Accessibility: A Walk in Someone Else’s Shoes

THAT Conference 2019
Pre-Conference Workshop
Day: Mon, Aug 5   Time: 1:00 PM   Duration: 4 hours   Location: (map)
Level: 100  Primary Category: UX/UI  Secondary Category: Soft Skills
Tags: accessibility
Everyone talks about accessibility - or a11y - but how often is accessibility a primary thought during your development pipeline? How often is accessibility taken for granted? It’s easy to push it aside and say you’ll do it later or to forget entirely. It’s easy to drop a couple WAI-ARIA tags into your HTML and move on, but this doesn’t address many accessibility needs. When was the last time you used your website with your eyes closed?

Let’s do just that. Let’s try to navigate a website with a blindfold on. Let’s try to use a website without a mouse. Let’s try navigating a website with a visual impairment. And then let’s fix the problems encountered.

We will focus on experiencing website with two types of impairments:
* Visual impairments, such as color blindness, low visual acuity, and a complete lack of vision
* Mobility impairments, preventing users from using a mouse for input

These impairments of quite common and are simple to simulate using a combination of browser extensions and existing tools in your operating system. For each impairment, we will look at how the markup (both the semantic structure and the attributes), the colors and contract, tab order, and focus affect the experience. And for each issue we encounter, we will look at specific ways that experience can be improved.

Last, we will look at testing strategies to audit your code for potential accessibility issues, using extensions such as Google’s Lighthouse, Deque’s axe-engine, and others.
Here is a breakdown of this particular workshop:

Rough timeline:
30-45 minutes: introduction to disabilities, accessibility, tools
15 minutes: intro/setup for visual impairment test 1

Test 1 - no vision - purpose: alt tags, labels, tab order, headings, focus:
15 minutes: blindfolded (or eyes closed) w/ screen reader
15 minutes: discuss ways to address the issues found
15 minutes: implement the fixes and repeat the test to experience the difference

10 minute break

Test 2 - low vision - purpose: contrast, text size, clickable areas, focus
15 minutes: enable extension to fuzz website, navigate
15 minutes: discuss ways to address the issues found
15 minutes: implement the fixes and repeat the test

Test 3 - mobility impairment - purpose: semantic structure/headings, tab order, focus
15 minutes: navigate site without mouse
15 minutes: discuss ways to address the issues found
15 minutes: implement the fixes and repeat the test
5 minute break, optional

Time remaining, approx. 30 minutes: discuss testing tools, ways to test accessibility, and ways to take diversity into account when designing and developing
All requirements can be found in the GitHub repository:

Repository (
Node, with NPM or Yarn
NodeJS, with packages in repository installed (npm install or yarn)
Google Chrome (latest)
ChromeLens extension
A screen reader that works with Chrome, like ChromeVox

A blindfold
Headphones (for the screen reader)
WAVE Evaluation Tool extension
axe extension