Summary
Add appropriate alternative text or an empty alt attribute to every image, including CSS background images, and ARIA tags to font icons.
Impact
Image-based information cannot be accessed by most adaptive technologies or in specific situations:
- Screen-readers and other text-to-speech applications
- Speech recognition systems
- Search engines
- Language translation applications
- Devices with small displays
- Text-only browsers
- Browsers with image loading disabled
- Images that fail to load
When an image does not include an alt attribute, screen readers will read the only available text-based information—the image path and file name. An image that lacks an alt attribute and is used as a link or other control will be difficult to activate for speech recognition users.
Dos and Don'ts
Follow Core Skills Alt Text Dos and Don'ts
Do
- Provide concise alternative text for meaningful images.
- Include an empty alt attribute for decorative images or when the information about the image is already included in the surrounding content.
Don't
- Don't include alt text with images that are purely decorative.
- Don't include alt text that provides the same information as the content surrounding the image.
Learn more about alt text for images.
Add Plain Alternative Text to Background Images
Do
When you use the CSS background property to display images, you still need appropriate alternative text but it needs to be done with “plain” text (text that is contained in the code and not in an image tag) that should only be exposed to screen reader users.
Don't
Don't include a background image without plain alternative text.
Hide Font Icons from Screen Reader Users
Font icons like Font Awesome or Glyphicons can pose accessibility issues. Screen readers may read font icons as nonsensical text. Users who override the font-family to improve readability (for example, because of dyslexia) may see font icons as empty boxes.
Do
Add the aria-hidden="true" attribute to the parent of the font icon.
Don't
Don't add the aria-hidden="true" attribute to the font icon itself.