Using images
Accessibility
With the new European Act on Accessibility, a focus on accessibility is now a legal must to have in mind [1].
Avoid text on images
- A media should never be the only way to carry a message in the page
→ Always have text to support your visual. This makes the information in the images and media available to everyone
Don’t use text directly integrated on the image, instead use block text over images
Try this
Use appropriate blocks to have the text accessible and readable in all situations
Avoid this
Text over image on Desktop is not easy to read
Using ALT text
Alternative text (alt text) is a descriptive text which conveys the meaning and context of a visual item in a digital setting, such as on an app or web page.
When screen readers like Microsoft Narrator, JAWS, and NVDA reach content with alt text, the alt text is read aloud so people can better understand what's on the screen. Well-written, descriptive alt text dramatically reduces ambiguity and improves user experience.
- Remember to properly name images to make them clear and descriptive.
- Fill-up a descriptive ALT field for screen readers.
- The description should be short and concise, with a maximum of 128 characters.
- Use the most important user information to improve comprehension and SEO.
Sources and why’s
[1] : European Accessiblity Act Checklist, WCAG
