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 73
How to work with visual content
Target skills
Images are really good at conveying informations in a glimpse. But we need to make sure their content is accessible.
Use alternative text
An alternative text of an image will be used by a screen reader to provide the main information from the image. If the image is purely decorative, the alternative text should be empty but present, to notify no important information is missed.
Avoid text in images
Text in an images is not accessible as the viewer could not have access to the image, or could not change font parameters that could help its reading (contrast, size, font family…). If the information can be conveyed with text, use text directly instead! It will have benefits for accessibility, and SEO or page weight as well. If an image is used, you can still provide in addition to the alternative text, a caption field that is accessible.
Below is an example of a text in an image that is not accessible by default: a screen reader would need its alternative text to identify its content.
Size matters
Visitors will have different screen sizes: on smartphones the available estate is small! The same occurs when a visitor uses the magnifying glass tool. Make sure your images is understandable on different screen sizes. If your image requires to be zoomed in to be understandable, then you’ve probably missed the point.
Using images for user verification
An image can be used as a CAPTCHA and therefore is not accessible at all, otherwise it will help robots to pass the test. When using images for verification, always provide an accessible alternative. It could be an audio version or any other non-graphical system of the verification steps.
Below is an example of an audio captcha by Google. A robotic voice will read numbers you need to recognize. You can also download the audio sequence.
To go further
- Alt attribute for images in HTML: https://www.w3schools.com/TAGS/att_img_alt.asp
- Long description attribute for images in HTML: https://www.w3schools.com/tags/att_img_longdesc.asp
- Captions in HTML: https://www.w3schools.com/TAGs/tag_caption.asp
- More info about Audio CAPTCHA : https://captcha.com/articles/audio-captcha.html