Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory, or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech.
Images can make the web user experience better and more pleasant, especially for users with cognitive and learning disabilities. Not all images used in websites are accessible, and that can be a major barrier. Accessible images are beneficial for everyone, especially for people using screen readers and other assistive technologies, as well as search engine optimization (SEO).
When screen readers come across images, graphs, and icons without an
alt attribute, by default the screen reader will speak the name of the file, which most of the time can be unhelpful (for example:
You can read more about why alternative text for images is important in the Web Accessibility Tutorials Guidance on how to create websites that meet WCAG .
To help you determine the best way to communicate the information of an image to a screen reader user, you can use the alt text decision tree provided by the W3C.
alt text must contain the description of what is displayed visually in the image.
When you create a new design and it includes images, include captions with a description for each of them. Annotate which images are informative and which ones are decorative.
As you're developing a new component, feature, or page that contains an image, use proper semantic HTML and use the
<img> element with proper alternative text using the
<img> element must have an
alt attribute. It could have content for informative images or be empty for decorative images, but it must always be present.
alt attribute is bad, but an
alt attribute with wrong or useless information is not a better solution. When writing the
alt text of an image, you should always have in mind some rules:
alt text should be the most concise description possible of the image’s purpose.
alt text with keywords. The
alt attribute is often misused as a place to store SEO keywords or copyright information.
alt text with the caption or the content. If the image is sufficiently described in the text (for example, a simple diagram illustrating what's written in the web page text) it can have a brief
alt text such as "A diagram of work flow as described in the body text".
Every img element must have an 'alt' attribute.
Leave the 'alt' attribute empty for decorative.
Don't use an img element without an 'alt' attribute.
You can read more tips in the Web Accessibility Tutorials Guidance on how to create websites that meet WCAG .