THAT Conference 2019
Day: Mon, Aug 5 Time: 1:00 PM Duration: 4 hours Location: G (map)
Level: 100 Primary Category: UX/UI Secondary Category: Soft Skills
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: https://github.com/nloding/accessibility-a-walk-in-someone-elses-shoes#requirements Requirements Repository (https://github.com/nloding/accessibility-a-walk-in-someone-elses-shoes) 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 Optional A blindfold Headphones (for the screen reader) WAVE Evaluation Tool extension axe extension