Provide alt attributes for informative images
no. 001
Make sure informative images have a non-empty alt attribute
Informative images provide meaningful information to users and help them understand the content presented on the page. If the information conveyed by the image is required to understand the content, it must also be interpretable by assistive technologies so all users, regardless of disabilities, can benefit from the information.
To do this, simply enter the description of the image within the value of the ALT attribute of the IMG element. Contrary to popular belief, there is no official limit to the number of characters that can be entered in the value of the ALT attribute, but brevity and conciseness is strongly recommended. Sticking to a few short, properly punctuated sentences will facilitate understanding when the information is read aloud by screen reading software.
User Story
As a visually impaired user using assistive technology, I want every informational image I encounter in a web page to be properly described, so that my tools can convey the information and I don’t miss out on any content.
Simple Code Example
<img src=“image.png” alt=“Short image description.”>
Testing Methodology
Using the Web Developer Toolbar for Firefox, select the “Display Alt Attributes” test under “Images” [...]