Design Considerations for different Disabilities

Blind

All content must be presented in text or a text equivalent

Screen readers cannot read non-text content (images) directly, but they can read alt text that you provide. An example is alt text for images or other non-text objects.

All functionality must be available using only the keyboard

Even though most blind users can physically use a mouse or trackpad, it doesn’t do them much good because they can’t see where the mouse pointer is. It is more effective for them to navigate by the keyboard.

The content must use good semantic structure such as headings, landmarks and lists

Screen reader users often pull up lists of headings, landmarks, and other semantic elements to help them understand what is on the page. They can also navigate by these elements (for example, jump directly to the main content landmark, or to a specific heading).

All custom controls must have the correct name/label, role and value

Unlike native HTML elements, custom controls have no semantic parts natively, so screen readers can’t tell users what the widget is, and can’t update users on the properties of the widget unless you supply that information via ARIA names, roles, states, and properties. Examples include media player controls, expand/collapse buttons.

Users must receive immediate feedback after all actions when using a screen reader

Silence after activating a feature is always bad! Examples of feedback include: Expanded/collapsed region, when a value is changed on a control such as on a slider, successful/unsuccessful form submission.

Videos require audio transcriptions

Users who are blind can hear the dialog, narration, and other sounds in videos, but they can’t see the visual parts of a video. So, if the visual parts convey important information, those parts will need to be described aloud for blind users to understand them.

Considerations for mobile devices

On mobile devices custom swipe actions on web pages will not work with the screen reader turned on. When a blind screen reader user is on a mobile device, swipe actions are used by the screen reading software. All features (controls, widgets) on a mobile web page require a click action to work at all.

Low Vision

The pinch-to-zoom feature must not be disabled

When zooming is disabled on a web page, low vision users who use screen magnifiers to read content may be unable to properly see information on a web page.

All text must pass contrast guidelines against the background

Some users who have low vision may see in low contrast. Text, borders, and other elements may appear as the same or similar shades of brightness to them. Text elements that are too close in brightness to background colours may be extremely difficult to read for these users.

Links, buttons, and controls need to have a visible focus and hover state

Some low vision users may use a keyboard or a mouse, or both, as input methods. Having visible focus and hover states helps users to know where the keyboard/mouse focus is on a web page. Users with low vision benefit greatly from enhanced CSS focus and hover states.

The UI should provide a clear visual distinction between content (text) and controls ( buttons, links, etc.)

Users who see in low contrast may have difficulty distinguishing whether controls are actionable on a web page because these elements may blend together with surrounding text and background colours.

Colourblind

All information must be understandable without needing to distinguish between colours

When colours alone are the only methods being used to communicate important information on a web page, people who are colourblind may miss that information altogether. In addition to colour, consider using text and symbols as means to convey information. Reds and greens are especially problematic when used as the only way to convey information.

Deaf and hard of hearing

All videos must have captions

Without captions, people who are deaf may miss critical information communicated through dialog and narration, and may miss important sounds that give meaning to the video.

All audio-only content must have a transcript

Transcripts are necessary to convey all of the information being communicated by audio, including dialogue (and identifying speakers), narration, musical cues, and sound effects.

Sign language interpretation of videos can be very helpful

There are some people who are deaf whose primary means of communication is sign language. For this group, sign language interpretation may be preferred over captions and transcripts.

Deafblind

People who are deafblind use a screen reader, but instead of relying on audio output, a refreshable braille output device is used so that they can read content by touch.

A transcript must be provided for audio and video content.

Transcripts are the only way a person who is deafblind will be able to access all of the information communicated in audio and video formats.

Dexterity/Motor Disabilities

All functionality must be available using only the keyboard

For sighted keyboard users or those who use devices that emulate keyboards, everything that can be done on a web page with a mouse should be able to be done using only a keyboard. People with motor disabilities may not have the fine motor skills required to use a mouse.

Links, buttons, and controls must have a visible focus state and a visible hover state

The only way sighted keyboard users are aware of the current location of the keyboard focus is through a visible focus state. If focus is turned off, interaction on a web page for these users may be extremely difficult and nearly impossible. The default browser focus state is acceptable by the WCAG guidelines, but users can benefit greatly from enhanced CSS focus and hover states.

For session time-outs, warn users before the time expires (an accessible dialog or alert), and give them the option to extend the session

People who have motor disabilities need more time to enter information into a web page. So, it is important that they are given sufficient time and options to extend time limits. Ensure the warning itself allows for slow responses. A recommended minimum response time is 2 minutes.

Provide large click targets (links, buttons, controls) for users who have movements that are difficult to control.

People who may have tremors or spasms need to be able to activate targets on a web page. Increasing the target area for these users can help maximise their chances of accurately selecting the target on the web page.

Speech

Don’t depend on voice input

People with speech disabilities have difficulty with producing voice sounds and using muscles in their mouths, so it is critical that alternative means of communication are provided such as text chats, forms, email, etc.

Cognitive Disabilities

For users with lower comprehension

• Simplify the interface as much as possible.
• Simplify the content as much as possible.
• Keep videos and audio as short as possible.
• Limit the number of choices on the screen.
• Provide help features.
• Design for ease of use.
• Test the usability of the interface with actual users, preferably including users with cognitive disabilities.

Users who have lower comprehension will have a better web experience if the interface and content are easy to use and easy to understand. Too many options and complex information may be difficult for them to process.

For users with memory loss

• Retain information across screens, and within a path.
• Provide help features.

A website that has predictability across all its pages (same navigation, same structure, etc.) will greatly benefit users with memory loss. Sites that are too complicated may fatigue users with memory loss. If a user has difficulty interacting with the web page, help features can assist them with navigating the web page.

For users with distractibility

• Reduce or eliminate distractions (be careful with ads, carousels, intrusive audio, intrusive video, etc.).

Too many distractions on a web page may cause people with cognitive disabilities to miss important information being conveyed on a page. Distractions may cause them to lose focus or overwhelm them, and users may navigate from away the site.

Reading Disabilities

People who have difficulty reading text will need the information conveyed in other formats like images, audio, and video. Using the highest contrast may also be difficult for people to read and hard on the eyes, so using colors that are a slight step down in contrast (e.g., dark grey against white or off-white) may make reading text a little easier.

Seizure Disorders

Don’t include videos, animations, or transitions with sequences of flashing light at a rate of 3 or more times per second.

Using content that flashes, blinks, or flickers 3 or more times per second may trigger photo-epileptic seizures in susceptible users.