Creating accessible React apps
a11yTOConf 2018 — Notes and Links
The following are my notes and links for my #a11yTOConf 2018 live-coding demo on "Creating accessible React apps".
Here’s a quick how-to on recording your Mac desktop while using the VoiceOver screen reader. With this setup you’ll be able to capture both video and internal audio at the same time, and hear the audio output while recording.
For this setup we’ll be on OS X El Capitan and use QuickTime to capture the video and audio. The only extra thing required is the iShowU Audio Capture driver.
The following covers developing for accessibility and keyboard/screen reader users. There is much, much more to making everything accessible for all people. More to be added soon.
The first rule of using ARIA is not to use it. Only use it if absolutely necessary. It at all possible, use native HTML elements. Native controls have keyboard interactions and accessibility baked in from the start. Using these will save lots of time and make for way less code, making your application smaller and more manageable.
NVDA is a free and open source screen reader from NVAccess. It is available for the Windows operating system and officially supports Internet Explorer, Firefox, and Chrome web browsers. There is also a ton of braille display support!
NVDA is available for download here: http://www.nvaccess.org/download/
After everything is installed you can press
Ctrl + Alt + n to start NVDA. Quitting NVDA is done by pressing
NVDA + q, then
enter at the prompt.
Each screen reader has a special key or key combination to perform tasks. NVDA’s default keyboard modifier key is the
insert key. So, for example, to start reading a web page, you could press
insert + down arrow. As an option, if you are using a laptop you can also use the caps lock key as a modifier. This can be set in the
Preferences > Keyboard settings... menu.
I was once asked to come up with a short list of common accessibility issues. Here are some points I came up with. Please comment if anything is incorrect or you feel might be missing.
Test color contrast to make sure text is readable. Use a tool like this Color Contrast Calculator to test: http://leaverou.github.io/contrast-ratio/ Also test in High Contrast mode: https://twitter.com/svinkle/status/563405596699795456
It is important to know when to use the appropriate element for a page action. The following is a basic overview of when to use/attach an event to which element: