Types of disabilities that affect people’s ability to use web interfaces include visual, audio, motor, speech, and cognitive disorders. These may be chronic conditions or temporary problems due to illness or injury.

This diagram to the right comes from “Inclusive 101,” a manual from Microsoft Inclusive Design.

The brief Browsing with Assistive Technology Videos demonstrate how people use screen readers (both desktop and mobile), screen magnifiers, speech recognition, and keyboards for navigation. The W3C maintains a library of videos showing people with disabilities using various assistive technologies.

Visual disabilities include problems with vision, or other physical problems triggered by visual effects.

• Blindness
• Low vision
• Color blindness
• Seizure disorders with visual triggers
• Vestibular disorders and motion sensitivity triggered by animation

Assistive technologies for visual disabilities include screen readers, braille displays, screen magnifiers, and voice recognition or dictation software.

There are few assistive technologies available for people with physical reactions to visual triggers. Operating systems now include settings to reduce motion and dim flashing lights. In CSS, we can check for these settings using media queries and adjust styles accordingly.

Hearing-related disabilities lead to difficulty hearing sound alerts, video presentations, or spoken instructions. People with some cognitive disabilities may have auditory processing disorders, which can make it difficult to filter out background noise or focus on an audio-only presentation.

Captions and visible alerts are essential alternatives to sound in web interfaces.

People with tremors, neuropathy, paralysis, or injured or missing limbs may use keyboards for navigation as well as typing, or they may use other devices entirely, like two-button switches or sip and puff devices. People in this group may also use voice recognition software for input.

Cognitive conditions include the autism spectrum, ADHD, memory loss, dyslexia, dyscalculia, and sensory processing disorders. Language comprehension can also be a barrier, so cognitive accessibility includes considerations for language learners.

There are few assistive technologies available for people with cognitive disabilities. Users may adjust their system font, color, and sound settings to compensate for reading and hearing difficulties. People with dyslexia might use voice recognition software instead of typing.

People with cognitive difficulties may have trouble remembering where options are located or how something on one screen relates to something else on another screen. Consistent layout and labeling is generally a best practice, but will particularly help this group of people.

Sensory processing disorders may require lower color contrast, more whitespace, and special attention to sound design. Avoiding unexpected disruptions is important for this group.

Further reading on designing for cognitive and/or sensory processing issues:

• W3C Working Group draft: Making Content Usable for People with Cognitive and Learning Disabilities
• “How do you design for cognitive accessibility?” Amy Grace Wells Confab 2022 keynote, 27 minutes (watch 10:00–15:00 if you are pressed for time)
• Design on the Spectrum: Creating a More Inclusive Workplace, Lona Moore (YouTube, 49 minutes)

Many people need more than one kind of accessibility accommodation. Keep in mind that you may be designing for someone who has low vision and a mobility impairment, or someone with ADHD and hearing loss.

Note that people with traumatic brain injuries or strokes often have unpredictable combinations of vision, hearing, mobility, and sensory processing issues.

Most assistive technologies rely on properly structured HTML. Headings and landmarks, form labels, and well-written links and buttons go a long way toward making a web interface accessible. For interactive elements, ARIA attributes help convey the available functionality and current state of the control.

To get a better idea of how screen readers, switch devices, and voice recognition software work, try the 1-5 minute videos on the following sites:

• Browsing with Assistive Technology videos
• Switch Devices
• I Used a Switch Control for a Day
• Designing and Coding for Voice includes very short videos showing both common interactions and some common problems using Dragon Naturally Speaking

• WebAIM Resources
  • Introduction to Web Accessibility
  • WCAG 2 Checklist
• Designing for Web Accessibility, W3C
• ARIA Authoring Practices Guide
• Accessibility for Everyone, Laura Kalbag
• A Complete Guide To Accessible Front-End Components
• web-a11y.slack.com – invitation required to join; email Stephanie for a link