Alternative Text (Alt Text)
Definition
Alternative text, better known as alt text, is a written description of an image that helps to explain what it is being shown on screen. When used with assistive technologies such as screen readers, alt text helps users with visual or cognitive impairments engage with the content.
Using alt text is a compliance requirement and standard for digital accessibility as it relates to current WCAG guidelines (2.1 AA) and federal laws. Additionally, alt text is beneficial to SEO as it helps assistive technologies to understand and communicate images and nontechnical information.
Usage
When using alt text, avoid these common mistakes:
- Don't use "image of" or "picture of" in alt text; screen readers announce images by default.
- Don't use more words than necessary. Keep your text brief and relevant to the context of the page.
- Capitalize the first letter of every sentence.
- Avoid acronyms.
- End full sentences with a period.
- Don't post filenames and URLs without embedding them in hyperlinks; otherwise, they offer poor accessibility communication to assistive technologies.
Informative Images
Informative images add clarity and meaning to the context of a webpage. For these images, alt text provides visual and narrative support and helps create a positive experience for assistive technology user.
Alt text for informative images should provide a full and concise description of the image in a complete, well-written sentence. Elongated alt text can hinder accessibility, making it difficult for assistive technology users to process the informaiton.
Decorative Images
Decorative images serve as a design contribution to the webpage and do not convey meaning or important context. Alt text for decorative images should be left empty; use two double quotation marks (“”) instead. This communicates that the image is decorative and signals assistive technologies to ignore it.
Images of Text
It is recommended to avoid using images of text. Images of text are not web accessible to users of assistive technologies. However, if unavoidable, as in the case of a logo or branding, include alt text. A balance of visual design and accessibility barriers will need to be determined, see WCAG for additional details.
Linked Images
A linked image behaves as a clickable image and when clicked takes the user to a new webpage. Alt text for linked images should provide a clear and descriptive explanation of the link destination.