This resource is intended for content editors who would like to understand the importance of alternative text, when and how to use it best.
Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this article will present our experienced interpretation of appropriate use of alternative text.
Alternative Text Basics
Alternative text provides a textual alternative to non-text content in web pages. We will be discussing alternative text for images only, though the principles can be applied to media, applets, or other non-text web content.
Alternative text serves several functions:
- It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
- It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
- It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.
The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content.
Alternative text can be presented in two ways:
- Within the
altattribute of theimgelement. - Within the context or surroundings of the image itself.
This means that the alt attribute (sometimes called the alt tag, though technically this is incorrect) is not the only mechanism for providing the content and function of the image. This information can also be provided in text adjacent to the image or within the page containing the image. In some cases where the equivalent cannot be presented succinctly, a link to a separate page that contains a longer description of the image content can be provided.
Every image must have an alt attribute. This is a requirement of HTML standard (with perhaps a few exceptions in HTML5). Images without an alt attribute are likely inaccessible. In some cases, images may be given an empty alt attribute value (e.g., alt="", sometimes call "null" alternative text).