Practical accessibility workshops

This workshop focuses on understanding and removing barriers from the user experience (UX) of people with disabilities.

---

Setup workshop tools

• Complete these setup tasks for your platform
• Bookmark how to enable/activate them
• Write down the keyboard shortcut next to your machine

PC

• Activate magnification for Windows
• Install NVDA (Free) or JAWS (Requires license after 45min)

Chromebook

• Activate magnification for ChromeOS
• ChromeVox
  • It’s also possible to run ChromeOS in Parallels

Apple MacOS

• Enable tab key navigation for Safari
• Activate magnification for MacOS
• MacOS Voiceover

Apple iOS

• iOS Voiceover
• Dynamic Type size

Android

• Android Talkback
• Text display size

Automated tools

• Install Chrome Lighthouse accessibility test plugin
  • Alternatively, access Lighthouse via Dev Tools
• Don’t use Google products?
  • Wave
  • MS Accessibility Insights

---

Assistive technology UX workshop: Low vision, motor and blindness (2hr)

This section will introduce you to assistive technologies in a useful order.

Slide deck - Assistive technology UX workshop

Low vision (Interactive)

• This workshop begins with low vision.
• Why? Over half the people who use your products are adjusting default font sizes or contrast on their desktop and handheld devices.
• Activity 1a - Go to this page magnify this form and fill it in (Do not use Cmd + to zoom in)
• On your own time: Increase the text size on your handheld or desktop device

Motor (Interactive)

• People using a mouse are driving and in control of their experience. People using a keyboard are being guided through the page.
• Motor comes next because keyboard accessibility is pre-requisite for screen readers.

• Testing must be performed with only the keyboard first, before testing with screen readers.

• Activity 1b - Try using this page with no mouse
• Activity 1c - What’s it like when it doesn’t work?

Automated tools (Interactive)

• Automated tools are important, but like spell check, can only capture a fraction of what can be wrong with a Web application.
• Activity 1d - Automated tools - Why automated tools can’t be trusted

Blindness (Screen reader demo)

• Demo 1e Using a screen reader - What’s it like to hear the UI
• Optional activities: Navigate these pages with the screen reader
  • Activity 1f - Try using this page with no mouse
  • Activity 1g - What’s it like when it doesn’t work?

---

Lowercase “a” agile principles and accessibility (2hr)

• The purpose of agile thinking is to deliver the most value to people as quickly as possible
• Good agile practices removes abiguity, and accessibility helps us do just that.

Recognizing bias

• Bias can be helpful, but it can also hurt
• Activity - Discussion: Identifing bias

Product kickoff

• Defining product goals with accessibility leads to better outcomes
• Activity - Edit these product/feature goals

Principles of design with dev

• Accessible layout principles
  • Mobile first page layout
  • Mobile first form layout
• Heading and page structure
  • Activity - Review Coffee roast guide
  • Activity - Review Coffee dashboard

Mobile first annotations

• The Figma file is not the most important deliverable; the conversation it sparks with the team is.
• Activity - FigJam
  • Working demo: What is it?
  • Discussion: Because we annotated mobile first, did we need to additionally annotate large screen?
• Annotation example options
  • Figma plugin: Ebay Include
  • Sticker sheet: A11y Annotation Kit
  • (What matters is that you do it)

Team agreements

• Definition of ready
• Definition of done
• Activity - On your own time: Review team agreements

Feature level acceptance criteria (AtomicA11y)

• Activity - Select acceptance criteria for these features
  • Discussion: What happens when designers annotate?

Slide deck

---

Testing with assistive technology (2hr)

• Syntax checking with automated tools
  • Install Chrome Lighthouse accessibility test plugin
    • Alternatively, access Lighthouse via Dev Tools
  • Don’t use Google products?
    • Wave
    • MS Accessibility Insights
  • Activity- What’s it like when it doesn’t work?
  • Install Chrome Lighthouse accessibility test plugin
  • Alternatively, access Lighthouse via Dev Tools
  • Don’t use Google products?
    • Wave
    • MS Accessibility Insights
  • Activity- What’s it like when it doesn’t work?
• Screen readers
  • Reference - Screen reader and browser pairings
  • Browsing vs focus
    • VoiceOver on MacOS (video demo reading a page using “ctrl option a”)
  • Multi-modal screen readers
    • NVDA (video demo radio button, Browse vs Focus mode)
    • JAWS (video demo radio button, Browse vs Forms mode)
  • Single-modal screen readers
    • ChromeVox (video demo radio button)
    • VoiceOver on MacOS (video demo radio button)
    • VoiceOver on iOS (video demo radio button)
    • Talkback on Android (video demo radio button)
• What if you’re not sure?

---

Code workshop (2hr)

• Semantics Semantics SEMANTICS
  • Name, Role, State, Group
• Structuring headings & sections (examine & discuss)
• Intense groupings (demo)
  • Fieldset + legend + radio
  • Fieldset + legend + radio + description
  • Fieldset + legend + radio + description + required
  • Fieldset + legend + radio + description + required + error
• When problematic designs appear
  • Payment selection form
    • Simplest version (show/hide)
    • What usually happens
    • Complex version to make the designer vision come true