The alt attribute, or other means of providing a text alternative, is missing.
- Rule ID:
- alt-text-missing
- User Impact:
- Critical
- WCAG :
- 1.1.1.a
Rule
Images that convey content MUST have programmatically-discernible alternative text.
Background
People who are blind cannot see images on a page. In order to give people who cannot see an image access to the information conveyed by the image, it must have a text alternative. The text alternative must describe the information or function represented by the image. Screen readers can then use the alternative text to convey that information to the screen reader user.
For informative images — images that convey information — the alternative text must communicate the intent, purpose, or meaning of the image in a way that serves as a true alternative for the image. For complex informative images, the alternative text must communicate the purpose and the location of an extended description of the information in the image.
For actionable or functional images — such as links or buttons — the alternative text must describe the destination, purpose, or function of the image — not necessarily the image itself. For example, the alternative text for an image that is a link or a button will describe the link destination or the button function, not the shape or other visual characteristics of the image.
Buttons (<button>, <input type="button">, or <input type="image">) and controls must have an alt attribute that describes the function of the input. The alternative text should describe what the button will do when selected, such as "Search," "Submit," "Register," "Place your order," etc.
Code Examples
Good Examples
Image that functions as a link (alt text should serve as the label for the link destination):
<a href="index.html"><img src="ABCD-logo.png" alt="ABCD Home"></a>Images that convey information (alt text should describe the image):
<img src="sunset.jpg" alt="The sun setting over the Pacific Ocean, with a silhouette of a flying seagull in the foreground"><p>Have a great day <span class="fonticon smiley" role="img" aria-label="Smiley face"></span></p>Note: non-semantic elements cannot receive an aria-label. Elements such as <span> and <div> do not have a semantic meaning, because they could contain many types of content. Non-semantic elements must have a role (role="img" in this case) to receive an aria-label.
Image as a button (alt text should label the purpose or function of the button):
<input type="image" src="magnify.png" alt="Search">Failure Example:
Image of a sewing machine without alt text (screen reader will read filename):
<img src="sewmach2.jpg" width="686" height="518">How To Fix
To fix this issue, use one of the following methods:
- Use the alt attribute on <img> and <input type="image"> elements.
- Use the aria-label attribute when the alt attribute is unavailable (such as on a background image).
It is important to note that elements like <span> and <div> are not semantic elements because they could contain many types of content. To give an aria-label attribute to a non-semantic element, you must also give it a role, e.g. role="img". - Give images in buttons alt text that conveys the button's function.
- Give images in links alt text that conveys the link destination.
- Give informative images alt text that describes the image.
- Ask yourself, "If I couldn't see this image, would the alt text give me the information I need?"
Don't do this
- Assume the user can see the image.
- Write excessive alt text. It is recommended not to exceed about 250 characters.
- Only describe the visual information of an image that has a destination or function.