Building Accessible Web Apps with React workshop by Erin Doyle
Instructor: Erin Doyle
Thank you for signing up for the workshop on Building Accessible Web Apps with React! Please read through this entire document and follow the steps to get set up. Please complete each step before the workshop starts to ensure that you are ready to go from the start!
Please follow the steps to get your machine set up before the workshop to ensure that you're ready to code from the start.
Please ensure that your machine has the following core tools installed:
nvm install node && nvm alias default node
, which installs the latest version of Node.jsnode
. With nvm you canWhen you've verified that your machine has the above requirements, install the following tools:
If you are using a Mac and would like to also be able to test Windows-only based tools such as the NVDA screen reader, High Contrast Mode, and IE or Edge browsers then you can do so by setting up a Windows Virtual Machine on your Mac. See here for step by step instructions: How to Set Up a Windows VM
Note that different browsers may have different keyboard control options available. Most modern browsers support pressing Tab to move forward or Shift + Tab to move backwards through the focusable elements, but some browsers have their own idiosyncrasies:
Safari doesn't allow you to tab through links by default; to enable this, you need to:
Firefox for the Mac doesn't do tabbing by default. To turn it on, you have to:
npm install
npm run start
http://localhost:3000
in a browserNOTE: the HEAD revision of the master branch contains the fully completed workshop source. We will be checking out various revision tags to step through the evolution of improving this code with the first being completely inaccessible and ending with a version that has all accessibility findings resolved.
Please review the following materials to help you better prepare for the workshop:
Here is a recording of a presentation I gave previously that can serve as an introduction to Accessibility, what it's about and why it's important:
Here are some short videos that may be helpful to watch that we won't have time to watch during the workshop and will help us hit the ground running:
For the workshop you'll need to be able to check out specific tag revisions using git. Please familiarize yourself with how to do this.
If you're not familiar with ES6, you'll want to start here. Read one or both.
If you're not comfortable with React, you should read through the following resources:
The lesson plan we'll be following for this workshop can be found here: Lesson Plan