Lesson 9Getting started: planning and initiating accessible web design
- Notion 60 - Take stock of what you know and what you need to know
- Notion 61 - Make sure everyone on your team is on the same page
- Notion 62 - Include accessibility into your budget
- Notion 63 - Make note of the technical requirements needed for accessible design
- Notion 64 - Test and evaluate your ideas with experts and tools
- Notion 65 - Test and evaluate your ideas with your target audience
- Notion 66 - Review of the main concepts
Notion 63
Make note of the technical requirements needed for accessible design
Target skills
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/