Describe Images Using Text
Individuals with visual disabilities or other cognitive impairments often cannot perceive information conveyed through images without help from a textual alternative. Image-based content that impedes accessibility includes charts, graphs and other non-textual content.
Textual alternatives accompany images in order to make the content and purpose of images accessible. All alternatives need to be compatible with screen-reading software.
Alternative text for images on web pages is provided via the alt attribute on the <img> and <input type="image"> tags. Always include the alt attribute on these tags.
Guidelines
Alternative text used should follow these considerations:
- If the image is necessary for understanding the page content, equivalent information should be communicated as text using the
altattribute. - If the image is decorative and not necessary for understanding the page content, the
altattribute should be empty (alt="").- Empty attributes tell screen-reading software to completely ignore the image.
- If an image is used inside of a link or as a button, the alternative text should describe the link's destination or the button's purpose.
Resources
Benefits
These measures allow users with visual disabilities to understand information communicated using images, as well as the destinations or purpose of image links and controls.
These measures also instruct screen reading software to ignore decorative-only images, which makes navigating content faster and easier.
Best Practices
- An alternative text attribute should accompany all
imgandinput[type="image"]elements. - Keep alternative text concise, e.g. no more than 10-15 words.
- Include any words that appear in informative images in the alternative text.
- Verify alternative text for links or controls helps to form the link text and/or control label.
- Treat images as decorative if the proposed alternative text would repeat neighboring text.
- Use an empty alt="" attribute for decorative images to indicate that it should not be announced.
Checking for Correct Usage
- All images are required to have an alternative text attribute.
- Alternative text for informative images needs to provide the same information as the image.
- Each decorative image should have an alternative text attribute with an empty string (alt="").
- Alternative text for images used in links or buttons must describe the function or destination of the link, even when read out of context.