The Good Manager  >  Training modules

100 points to know about...
Digital accessibility

100
points to know about...
Back to module summary

Notion 63

Make note of the technical requirements needed for accessible design

Target skills

Factor in the specifications and requirements you'll need to fulfill before the design process

From the start of your project, establish a checklist for each development item. Some examples:

At the content level

  • Make sure that the texts are easy to read (few levels of titles with a good hierarchy, short sentences, lists...).
  • Name the links explicitly.
  • Provide identical titles for the same functions.
  • Use plain language and avoid figures of speech, idioms, and complicated metaphors. Here is a readability analyzer that can help you to evaluate your level of language: https://datayze.com/readability-analyzer.php. For a more detailed look at the elements of readability, refer to Lesson 5: Grain 32 of this module.
  • Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages. Centered-aligned or justified text is difficult to read.

In terms of colors

Test the contrasts. On a webpage, color contrast is the difference betweenthe color used for information in the foreground (fonts, images of a text, links, infographics, diagrams, etc.) and the background color. Make sure that the information remains understandable even without colors... Activate modes such as Dark mode, Increased Contrast Mode, Inverted Colors Mode, Reduced Motion Mode, and High Contrast Mode. Is your content still legible? Are your icons, borders, links, form fields, and other content still present? Can you distinguish foreground content from the background?

Here are some examples of good and bad color contrast on a "Menu" button:

In terms of Media

Make sure that media does not autoplay. Unexpected video and audio can be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD (see Lesson 5 for more information on the needs of this audience). Certain kinds of autoplaying video and animation can be a trigger for vestibular and seizure disorders. Provide a global pause function on any media element
Provide captions for videos. Captions allow a person who cannot hear the audio content of a video to still understand its content. Provide transcripts for audio. Transcripts allow people who cannot hear to still understand the audio content. It also allows people to digest audio content at a pace that is comfortable to them.

In terms of navigation

Offer a responsive version of your site. Facilitate access to hidden content. Offer several ways of navigation. Do not block the orientation of the display (for people who could not turn their device)

At the level of forms

Name each form field (in addition to placeholders). Help the user to correct their errors. Allow them to check the information they have entered. Clearly indicate required fields.

At the level of tactile zones

Provide sufficiently large areas that are spaced apart from each other. Think about people who have motor problems, who use their mobile device in a moving environment (public transport) or who have poor vision...

To go further:
https://www.a11yproject.com/posts/large-touch-targets/
https://www.a11yproject.com/posts/design-accessible-animation/
https://www.a11yproject.com/posts/alt-text/
https://www.a11yproject.com/checklist/