Lesson 10The design process: how to make room for web accessibility?
- Notion 67 - Consider the layout
- Notion 68 - How you can use design to optimise your content
- Notion 69 - Make initial mock-ups
- Notion 70 - Usability is key!
- Notion 71 - Structure HTML properly
- Notion 72 - Your use of language matters
- Notion 73 - How to work with visual content
- Notion 74 - The importance of keyboard-only navigation
- Notion 75 - Pro-tips on design that are universally useful
- Notion 76 - Types of content to avoid at all costs
- Notion 77 - Check for conformance to accessibility standards and best practices
- Notion 78 - Review of the main concepts
Notion 77
Check for conformance to accessibility standards and best practices
Target skills
Exercise
In this short exercise, you will try the spot the main accessibility issues of a webpage using tools and guidelines.
Select a page
Use a webpage you know well for this exercise. It could be the website of your company or school, or your favorite shopping website. If you cannot find any issues in the following steps, select another page with more elements.
Look for accessibility issues
You can use the resources below to help you find the accessibility issues. You should keep in mind the different problems you saw in previous lessons as they are the most common.
Guidelines will be exhaustive, describing accessibility requirements and best practices. Browser plugins should be useful to quickly spot problems to do a quick audit.
Write a short report
List all problems spotted by your plugins and the most recurrent issues that should be fixed. This quick evaluation will give insights on the amount of corrections.
Then pick a particular element and try to provide a workaround: for example, you have spotted a particularly bad UI element, and you think it should be simplified. Use the previous lessons to make your recommandation.
Resources
Guidelines
Guidelines are exhaustive and ordered by categories. It can be tedious to go through without a specific problem in mind, but it often indicates the solution associated with an accessibility problem.
- WCAG ( https://www.w3.org/TR/WCAG21/ )
Plugins
This plugins are tools inside your web browser to quickly scan a page to look for accessibility issues: perfect for a quick audit !
- Wave ( https://wave.webaim.org/extension/ )
- Axe DevTools ( https://www.deque.com/axe/devtools/ )
Website
- The A11Y project made a checklist based on the WCAG guidelines to know wether you apply them correctly or not on a web page ( https://www.a11yproject.com/checklist/ )
Correction
As an example, here is how we did our audit. Check how it differs from your findings.
Examined website:
We’ve selected a very famous online shopping website.
Quick approach:
Our plugins detected a very high number of problems (~80) just on the homepage. Half of them are color contrast issues, and a third are bad alternative texts for images.
Exhaustive approach:
From the WCAG guidelines on color contrast, we learn about the ratio needed between the background and the text ( https://www.w3.org/TR/WCAG21/#contrast-minimum ). We can use an online tool to calculate the actual contrast ratio ( https://coolors.co/contrast-checker/112a46-acc8e5 ) and propose new color values in our report.
The WCAG guidelines could also help us on other problems on the webpage and provide solutions in our report.
To review what you learnt about the WCAG, you can have a look back on Lesson 8.