Accessibility

Notes taken mostly on React's A11Y Docs.

A great checklist from the A11Y project.

There are 3 levels of accessibility with The Web Content Accessibility Guidelines (WCAG).

A: Essential. If this isn't met, assistive technology may not be able to read, understand, or fully operate the page or view.

AA: Ideal support. Now required for EU government and public body websites.

AAA: High-level support. This is typically reserved for sites that serve a specialized audience.

It's good to know there are levels to this and it's not a complete pass/fail.


ARIA in JSX

The aria-* stay hyphenated in JSX, not camelCased like everything else.

Semantic HTML

Use React Fragments to keep the HTML semantic and not add needless divs.

Accessible Forms

Use labels on every input.

When a form fails validation, let the user know and add aria-invalid="true" to each invalid form control.

Focus Control

The entire application should be easily navigated by the keyboard only. Don't get rid of focus highlighting unless you replace it with something clear.

Allow for skipping navigation links. I know on sites there can be navs that are just massive and it becomes hard to get past them by tabbing alone. Here's how to allow for skipping those.

You can manage focus in your React app by using ref, and calling this.textInput.current.focus();. Use this wisely, as stealing focus can be disorienting.

Mouse and Pointer Events

If it can be done with a mouse, make sure it can be done with keyboard, too. Don't just listen for clicks outside of a modal, but instead onBlur and onFocus.

Complex Widgets

Just because it's a complex component doesn't mean it can't be accessible. ARIA roles and ARIA states and properties are crucial here.

Other Points for Consideration

Set the human-language on the document (Eg US English).

Change the Document title as the page changes (Important on SPAs).