Demystifying accessibility in React apps

Thanks for listening for my talk! Below are some resources you can find useful to dig deeper into the topic.

🔖 Slides

Below is a PDF version of my slides 👇

https://drive.google.com/file/d/1fMBcTVY_MjiL-xe1SIaWPGUT_ufPCzrD/view?usp=sharing

📚 Additional resources

Here are some additional resources to dive deeper into the topic and learn more:

If you are just starting with accessibility, this free course on Udacity is awesome: 🔗 Web Accessibility Course / Udacity
A11ycasts series on YouTube is great for bite-sized content on accessibility and screen-reader tutorials 🔗 A11ycasts with Rob Dodson
Adrian Roselli blog is an awesome resource for deep dives on specific topics and details
Web Content Accessibility Guidelines (WCAG) 2.1
ARIA Authoring Practices Guide (APG) is super useful for developing different widgets
HTML Accessibility API Mappings to see how native HTML elements map to accessibility tree
Aria Live Regions documentation to learn more about announcements and live regions
A11Y support shows support for various ARIA attributes across different screen readers

⚙️ Tools

AXE devtools can be useful to find some automated accessibility violations.
JSX a11y ESLint plugin, if you aren’t using yet will be useful to find violations and highlight right in your IDE
Testing-library, if you use testing library prefer relying in semantic queries in your tests, see this priority guide for reference. It would help to ensure accessibility when writing automated tests.
Fable —is a great service that connects you with people with disabilities to test features and receive feedback

🔊 Screen readers

If you haven’t used screen reader before, I really recommend you try! Find below links to official documentation, shortcuts cheatsheets and video tutorials for various screen readers:

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/3af315de-4ddf-4ef5-a79f-cdf7c03342f5/35fa3a12-d35d-4ef9-9af7-28ac0e1d927f/download.jpeg" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/3af315de-4ddf-4ef5-a79f-cdf7c03342f5/35fa3a12-d35d-4ef9-9af7-28ac0e1d927f/download.jpeg" width="40px" /> VoiceOver (Mac)

📄 Official Guide

⌨️ Keyboard Shortcuts

🍿 Video tutorial

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/3af315de-4ddf-4ef5-a79f-cdf7c03342f5/3cf22dfb-3be1-4f06-a65d-cfc3c82596df/download.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/3af315de-4ddf-4ef5-a79f-cdf7c03342f5/3cf22dfb-3be1-4f06-a65d-cfc3c82596df/download.png" width="40px" /> JAWS (Windows)

📄 Official Guide

⌨️ Keyboard Shortcuts

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/3af315de-4ddf-4ef5-a79f-cdf7c03342f5/a8d3719f-9eec-4947-b044-f6ef186e5cd9/download_(1).jpeg" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/3af315de-4ddf-4ef5-a79f-cdf7c03342f5/a8d3719f-9eec-4947-b044-f6ef186e5cd9/download_(1).jpeg" width="40px" /> Talkback (Android)

📄 Official Guide

👆 Gestures