How do you write good alt text for images?

What is alt text?

Alt text is a textual replacement for an image on a webpage. The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) documents that images must have text alternatives that describe the information or function they represent. This ensures that people with various disabilities can use the images. When a browser cannot display an image, it may replace the image with the text provided in the element's alt attribute.

The intent of providing text alternatives for non-text content is to make the information accessible. W3C explains that text alternatives are a primary way to make information accessible because they can be rendered through any sensory modality, such as visual, auditory, or tactile, to match a user's needs. For example, screen readers read the alt attribute value aloud to their users, helping them understand what the image means.

When should an image have alt text?

Every image that conveys information or has a function should have alt text. The alt attribute is mandatory for img elements, and omitting it or the text alternative on img elements, area elements, and input elements of type "image" is considered a failure of accessibility guidelines by W3C. MDN Web Docs states that the alt attribute is incredibly useful for accessibility and advises providing a useful value for alt whenever possible.

The W3C WAI specifies that images must have text alternatives that describe the information or function represented by them. This means that if an image contributes to the understanding of the page's content, it requires a descriptive text alternative.

What should alt text say?

Alt text should provide a clear and concise text replacement for the image's content. The W3C WAI states that the text alternative should be at least a short description conveying the essential information presented by the image. The author determines the appropriate text alternative based on the image's usage, context, and content.

For images that serve as links or buttons, the alt text should describe the functionality of the link or button, rather than just its visual appearance. Similarly, for non-text content that acts as a control or accepts user input, such as images used as submit buttons or image maps, a name should be provided to describe its purpose. If an image contains text, its alt text should contain the exact same words as those in the image. For images that convey data or detailed information, a complete text equivalent of that data or information should be provided as the text alternative.

What should alt text not say?

Alt text should not describe the presence of the image itself or include its file name. Using filenames or placeholder text that are not true alternatives, such as "image1.jpg" or "picture," is considered a failure of accessibility guidelines by W3C. The purpose of alt text is to replace the image's content with an equivalent textual description, not to identify the image file.

It is also important to note that the title attribute is not an acceptable substitute for the alt attribute, as documented by MDN Web Docs. While the title attribute can provide supplementary information, it does not fulfill the accessibility requirements met by alt text.

When should alt text be empty?

Alt text should be empty, or null (alt=""), when an image's only purpose is to add visual decoration to the page and it does not convey information important to understanding the page. MDN Web Docs explains that setting the alt attribute to an empty string indicates that the image is not a key part of the content, such as a decorative element or a tracking pixel. In these cases, non-visual browsers and assistive technologies may omit the image from rendering, effectively ignoring it.

W3C further clarifies that providing a text alternative that is not null, such as alt="spacer" or alt="image", for images that should be ignored by assistive technology is a failure of accessibility guidelines. The correct approach for purely decorative images is to use alt="", which signals to assistive technologies that they should ignore the element and not present anything to the user.

Common questions