Universal Access (Accessibility)

Jump to bottom Edit New page

Garrett LeSage edited this page Mar 21, 2019 · 19 revisions

Terms:

Accessibility: being able to access something (implies disability)
Universal Access: making sure everyone can use something (inclusive of all)
Inclusive design: designing to covere the needs for everyone, keeping in mind any special situational, temporary, or permament accomodations
- Microsoft has an amazing document (PDF) on this exact topic.

Cockpit-related accessibility documents

Installing NVDA on Linux
ChromeVox HowTo (easier to install & set up on Linux — but, caution: it's not what our users will be using)

Resources

Introduction

Cheat sheet

ARIA Authoring Practices: A "cheat-sheet" reference to make sure widgets (both built-in and custom-made) are accessible.

Articles

Organizations

The A11Y Project: A community-driven effort to make web accessibility easier
WebAIM: Non-profit to help make the web more accessible

Screenreader survey results

WebAIM Screen Reader User Survey #7 Results

Section 508

Section 508 is law in the USA, to ensure everyone can use something.

HTML checklist:
Development Methodology for Section 508 Compliance (pdf)

Testing

HTML-specific resources

Tabindex
- summary: use 0 or -1, but nothing higher
Skip link

ARIA

ARIA stands for Accessible Rich Internet Applications.

ARIA @ MDN
"First rule of ARIA club" is to not use ARIA, unless there's no other way (that is: if there's a semantic element that provides the feature, use that instead — it's much prefered and simpler than marking up everything with ARIA)
Landmarks
Articles
- Landmarks: HTML5 vs. ARIA
- AIRA tabs (danger!)
- Don’t Use ARIA Menu Roles for Site Nav
  - "A properly-coded web page navigation menu needs no ARIA. Once you add ARIA, however, you have put yourself on the hook to handle some complex interactions."
  - "Somehow many developers have come to the conclusion that a web page is inaccessible unless it uses ARIA. This is a combination of patterns that do not use semantic HTML, a misunderstanding of ARIA, and not having practical experience with assistive technology."
  - "Tutorials often get it wrong, such as the always useless W3 Schools in its Bootstrap documentation. Not that Bootstrap is off the hook, given that its 2.x documentation recommended menu roles and I still see that code copy-pasted into projects today."

React

Testing framework

aXe: "The Accessibility Engine"
Accessibility Developer Tools from Google

React-specific a11y testing

eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements
react-axe: Accessibility auditing for React.js applications
react-a11y: Identifies accessibility issues in your React.js elements
axe-webdriverjs: Provides a chainable aXe API for Selenium's WebDriverJS and automatically injects into all frames
- react-axe-webdriverjs-demo: A demonstration of using axe-webdriverjs with a React application

Browser add-ons

aXe Extension: https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/
WAVE (WebAIM): https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/
Tota11y: Accessibility toolkit: https://addons.mozilla.org/en-US/firefox/addon/tota11y-accessibility-toolkit/
- Based on Tota11y by Khan Academy: https://khan.github.io/tota11y/
a11y.css: https://ffoodd.github.io/a11y.css/
- There's a bookmarklet on the page, letting you run it like an add-on (sort of), instead of adding it on the dev site. Be sure to select "English", click "Generate", and then drag and drop the "Grab your bookmarklet" to your bookmarks (or bookmarks bar).

Desktop screen reader

Orca is included in GNOME
- speech-dispatcher-flite adds a better voice for Orca (which is used once it's selected)
- orca -s lets you configure Orca, including the voice used

Web screen reader

Epiphany (GNOME-Web) can use Orca
Chrome has a plugin called ChromeVox

Home / About / Contributing / Cockpit project website