The web is awesome and everyone should be able to enjoy it.
Hi there! I'm Sandrina Pereira and I believe that making the web accessible is our duty as web creators.
💭 At the end of the workshop, I highly appreacite your anonymous feedback.
Open the project in Codesandbox and you are ready to go.
# Clone the repository
git clone https://github.com/sandrina-p/workshop-a11y-in-js-reactsummit
# Go to workshop folder
cd workshop-a11y-in-js-reactsummit
# Install the dependencies
npm install
# Run the project
npm startWe'll explore some browser extensions:
The ones below we'll use frequently:
- Accessibility Insights for Web - Chrome only
- Axe Developer Tools - Chrome or Firefox. This is the alternative, but the extension above is more complete.
At some point, we'll might also use the following:
- Colour contrast checker - Chrome only
- HeadingsMap - Chrome or Firefox
We'll explore SR (Screen Reader), however during a remote workshop it's not practical to teach everyone how to use a SR. Here's some friendly video tutorials for you to practice in the meantime:
- Mac: You'll use VO (Voice Over) Watch VO introduction.
- Windows: Install NVDA and watch NVDA introduction.
- Linux: Install Orca and watch Orca introduction.
My favorite cheatsheet of keyboard shortcuts:
I encourage you to practice with this playground.
Tip: While the SR is speaking, press Control key to force it to stop reading it. This might help you to reduce the annoying/frustration feeling while exploring it.
Good luck 🤞
© 2022 Sandrina Pereira, All Rights Reserved.