Accessibility review/edits for Desktop, Companion, WebUI

[lidel]

Edit: April 2020

Placeholder issue for reviewing and acting on accessibility overall for Desktop, Companion, and WebUI. Suggest that we dig into this mid-2020 once we've got an additional round of issues for the apps overall knocked out. Please see specific issues that have been closed in favor of this meta-issue:

• Display help when pressing '?' ipfs-webui#756 for existing discussion around keyboard-only navigation
• Feature: Accessible breadcrumbs ipfs-webui#1350 for specific user-provided guidance around keyboard nav and breadcrumbs
• Accessibility: Need more visual focus indicators for keyboard-only users ipfs-shipyard/ipfs-share-files#66 for keyboard nav in share-files app

Original issue specs

This is a placeholder issue for coming up with a strategy to tackle accessibility in our apps and documentation

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.

Accessibility is essential for developers and organizations that want to create high quality websites and web tools, and not exclude people from using their products and services. #

Tasks

• identify potential accessibility problems in User Journey (Figuring out the IPFS user journey (consider non-technical users) #6)
  • create/track accessibility issues in responsible repos
    (eg. website, desktop, Companion, Dashboard)
• include accessibility tips and guidelines in our Style Guide (Styleguide and Language for the UI's #7) and other materials, make sure materials themselves follow good practices

References / Reading Material

• Accessibility Resources @ w3.org
• Automation
  • http://pa11y.org, https://github.com/pa11y/pa11y
  • https://www.axe-core.org, https://github.com/dequelabs/axe-core#axe-core
  • https://github.com/github/accessibilityjs

[olizilla]

We want to include automated a11y testing from the start of the web-ui rebuild project. https://github.com/pa11y/pa11y looks worth testing out.

[lidel]

Another engine for automated Web UI testing: https://github.com/dequelabs/axe-core#axe-core

[olizilla]

react storybook with the a11y info could be good combo https://github.com/storybooks/storybook/tree/master/addons/a11y

[jessicaschilling]

Linking to (closed) issue ipfs/ipfs-webui#756 for an existing discussion around keyboard navigation and thoughts for next steps.

[jessicaschilling]

Also linking to (closed) issue ipfs/ipfs-webui#1350 for a user-provided specific suggestion for keyboard nav in breadcrumbs.

[jessicaschilling]

Excellent reference on color palette process here: https://stripe.com/blog/accessible-color-systems

[lidel]

ipfs-webui getting a11y treatment and automated checks in ipfs/ipfs-webui#1512 🚀

[jessicaschilling]

ipfs/ipfs-webui#1631 (comment) references contrast issues in Files screen checkbox and browse box button/backkground.