Alternative text
Alternative text conveys an image’s meaning or function in context. Purely decorative images need different treatment.
Convey the relevant image information
Alternative text is a text substitute for an image's relevant meaning or function. For an HTML image, it is usually provided through the alt attribute. What it should say depends on how the image is used.
If an example product photo shows a device's connector, the connector type may matter for selection. If the same image is the sole link to a data sheet, its accessible name must communicate that destination. “Image of a device” is of little help then.
A purely decorative HTML image generally uses alt="" to avoid unnecessary announcements. For a complex chart, essential information must also be available as accessible content. Alternative text is neither a list of search keywords nor automatically the image caption.
Sources
Related terms
- Screen readerA screen reader makes digital content available through speech or Braille. Meaningful structure and labels support understandable interaction.
- Focus orderFocus order determines the route through focusable elements. It should preserve meaning and operability, including during dynamic changes.
- Keyboard trapA keyboard trap leaves keyboard users stuck within a region. Deliberately containing focus in a dialog needs a keyboard-operable exit.
- Skip linkA skip link bypasses repeated navigation and leads to the main content. The destination must also work for subsequent keyboard navigation.
- Accessible nameAn accessible name labels a control for assistive technology. It should explain the action and agree with the visible text.
- Search suggestionA search suggestion offers a possible query while someone types. Selection, submission and the later results list need to work together clearly.
Articles on this topic
Design & UX with ASES
User experience, interfaces and brand presence