Web Accessibility Fundamentals

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.

These are the material resources for my Web Accessibility Fundamentals workshop.

Pre-Workshop requirements

To get the most out of the workshop, please do the following things in advance.

• Install Zoom to join the video call (if applicable).
  • If possible, turn your camera on, so that we don't feel alone.
• The browser Chrome or Firefox installed. I'll be using Chrome most of the time.
• Setup the project prior to the workshop to avoid unexpected installation issues.
• Install the browser extensions that we will use during the workshop.
• Familiarize yourself with the basics of a screen reader. Read below for further practical guidance.

The better prepared you are for the workshop, the more you will learn from it!

Setup the workshop

Recommended

Install Git and NodeJS before proceeding. Otherwise jump to the next Alternative section.

# Clone the repository
git clone https://github.com/sandrina-p/workshop-a11y-fundamentals.git

# Go to workshop folder
cd workshop-a11y-fundamentals

# Install the dependencies
npm install

# Run the project
npm start

Open http://localhost:5000/ and you are ready to go!

Alternative

Locally

• Download the project and open src/index.html. You are ready to go!

Browser extensions

Additionally to the codebase, we'll explore multiple browser extensions. Kindly install them ahead of time.

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 also use the following extensions:

• Colour contrast checker - Chrome only
• Web Developer - Chrome or Firefox
• HeadingsMap - Chrome or Firefox

Screen Readers

We'll explore SR (Screen Reader) during the workshop. In a remote workshop it's not practical to teach everyone how to use a SR. For that reason, please take some time (20-30 minutes) to practice in advance, with the help of these friendly video tutorials:

• 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:

• VO and NVDA cheatsheet
• Orca cheatsheet.

I encourage you to practice with this playground.

Good luck 🤞

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.

MacOS Tipt: Go to Settings > Accessibility > Voice Over Utility > Web > General. Uncheck "Automatically speak the webpage".

Workshop Dynamic

Project structure

The workshop consists of a set of challenges.
Each one introduces a new topic, followed by a code exercise for you to apply the concepts learned. After each challenge, we'll go through the solution together and clarify any questions that you might have.

src/
  briefings/  # The exercises introduction
    *.md
  exercises/  # Where you'll be coding
    *.html
    *.css
  solutions/  # The solutions
  index.html  # Home page

Expectations:

• Time value: I don't expect you to complete all the exercises on time. The main goal is to introduce you to new things, to make you think about them, and ask me questions as we go through the materials.
• Guidance & tips: Through the exercises, you'll find the light bulb emoji 💡 to guide you, and the lucky clover emoji 🍀 with extra tips for you to apply right away.
• Solutions: Although all the exercises have explained solutions, check them as a last resource. If you take a peek at the solution before even trying, you'll be sabotaging your own learning. It's okay to struggle while you solve the exercise. It's part of the learning process. :)

Not a developer?

It's totally fine you don't know HTML, CSS or JS in depth. As long you can read the basic code, you'll be able to follow along with the exercises. All the exercises are done in small groups of 3-4 people, so you have people to pair and help you along.

If you don't know any code at all, I got you covered too. Besides the "coding" part, the exercises also include resources suitable for designers and Product Managers, which you are more than welcome to read/watch while the others are coding.

---

License

This project is available for private, non-commercial use under the BSD 3-Clause License.

The workshop exercises are proprietary and are licensed on a per-individual basis, usually as a result of purchasing a ticket to a workshop, or being a participant in a private training.

Here are some guidelines for things that are OK and Not OK based on this license:

OK

• Using everything in this project other than the briefings and exercises to build a project used for your own free or commercial training material;
• Copying code from build scripts, configuration files, tests and development harnesses that are not part of the exercises specifically, for your own projects;
• As an owner of an individual license, using code from tests, exercises, or exercise solutions for your own non-training-related project.

Not OK (without express written consent)

• Using this project, or any subset of exercises contained within this project to run your own workshops;
• Writing a book that uses the code from these exercises;
• Recording a screencast that contains one or more of this project's exercises.

Copyright

© 2022 Sandrina Pereira, All Rights Reserved, under BSD 3-Clause License.

This material cannot be used for workshops, training, or any other form of instructing or teaching, without express written consent.