I’m studying about Accessibility standards and best practices for the web. I decided to share my notes here, I hope you find them useful and we can improve the web together.
Status: Work in progress.
Last update: June 17, 2015
Lesson 1: Add AlternativesText for Images.
Alternative text is a text equivalent for a non-text element on the page.
Add alt attribute to images and input type=”image”
<img src=”mydog.jg” alt=”My dog” />
<input alt=”Submit” src=”img-submitbutton.jpg” type=”image” />
When an image is not a link, and carries no information or is redundant, use null alternative text ( alt=”” ). Images with null alternative text will be ignore by screen readers.
The alternative text should be consistent, clear and, most important, useful.
Alt-text is required for all images.
- If the image is active (link, button, area) the text alternative should describe the link’s function.
- if the image is not active but conveys information, the text alternative conveys the same information.
- if the image is redundant or conveys no information use
alt=””for the text alternative.
- If the image is text then the alt-text should (usually) be the same as the text in the image.
TIPS: How to write better alternative text.
- Write the function of the image, not its description.
- If the image is a link, or it’s inside a link tag, do not reference to the fact that it is a link. Screen readers will mention this anyways.
- Avoid words like “picture of…”, “image of…” or “link to…”
- Use the fewest number of words necessary.
- Use CSS to create graphic custom bullets. If you can not use CSS use null or “bullet” as alternative text.
- Include the image related to a link inside the link tag. And use null as alternative text.
- Use a text-only browser or hide the images on your browser to review your alternative text. You can also use an screen reader to check the page before publishing it.