Notes taken mostly on React's A11Y Docs.
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-* stay hyphenated in JSX, not camelCased like everything else.
Use React Fragments to keep the HTML semantic and not add needless divs.
Use labels on every input.
When a form fails validation, let the user know and add
aria-invalid="true" to each invalid form 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.
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
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.
Set the human-language on the document (Eg US English).
Change the Document title as the page changes (Important on SPAs).