Multiple accessibility issues in the new (and existing) Gitpod interface

[shaal]

Bug description

There are a few accessibility issues in the new Gitpod interface, some examples:

• Not enough color contrast between text and background
• Not possible to tab through all the items using a keyboard
• Some items missing a clear focus border
• Some images miss alternative text
• Does not respect prefers-reduced-motion
• Almost no use of Aria attributes
• Lack of semantic HTML usage

Steps to reproduce

Open https://main.staging.gitpod-dev.com

• Try navigating through items with keyboard
• Open devtools, inspect images, and see alternative text is missing
• Start a project, the jumping G logo would jump even when prefers-reduced-motion is set in the user's browser.

Expected behavior

Make Gitpod a fully accessible experience

Example repository

https://github.com/gitpod-io/gitpod

I'll be happy to help identify more accessibility issues, and help resolve them as well :)

[gtsiolis]

Hey @shaal, thanks for opening this! We're aware of these issues and tried to mitigate as much we could in this first iteration of the dashboard while a) introducing the new layout with new technologies (see utility classes, etc) and b) building our own components from scratch as we've moved away from component libraries like material-ui.

We're approaching the development of the dashboard using an MVC (minimum viable change) approach and we plan to tackle these in future iterations. Ideally, we should split this issue into concrete smaller issues that tackle most of the points raised here in small batches focusing on specific product areas, so that code reviews are also faster and more efficient.

Let's keep this issue open for now and close this as we open up follow-up issues for improving the overall accessibility.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[shaal]

I would like to request that the label meta: never-stale be added to this issue

[gtsiolis]

Thanks, @shaal! I've added the meta: never-stale label for this. Re-posting from #3717 (comment), for visibility:

We're approaching the development of the dashboard using an MVC (minimum viable change) approach and we plan to tackle these in future iterations. Ideally, we should split this issue into concrete smaller issues that tackle most of the points raised here in small batches focusing on specific product areas, so that code reviews are also faster and more efficient.