Alternative Text

Successful alt text conveys the information a sighted person receives from the image, and does not necessarily describe the image itself:

• If the user interacts with the image (clicks, etc.), describe the action that will be taken (in UX terms, the image is an affordance for a link or action).
• If the image conveys information, provide the information conveyed by the image.
• If the image does not provide information or an action affordance (a decorative image), its alt text should be an empty string (but must be specified).
• If the image is included as an illustration of something fully described elsewhere in the topic, its alt text should be an empty string so screen reader users do not listen to redundant information.

Specific challenges for user documentation

• Icons and buttons: Accessible UI affordances have screen reader labels that might not be visually displayed. When you represent icons or buttons as images in documentation, match their UI labels for alt text. To find non-visible labels in the UI:
  • Mouse over a button to see its title text.
  • Use the browser inspector or developer tools. For example, in Chrome: Right-click the affordance and click Inspect. Click the Accessibility tab.
  • Test the UI using a screen reader.
• For some UI interactions or affordances (for example, sliders), it might be necessary to understand how a screen reader user will interact with the UI.
• Minimize the use of callouts in screenshots to simplify the alt text (and maintenance of the screenshot). Consider tabular or other ways to convey the information, such as referencing elements of the user interface by label.

Captions