Making images and graphics “visible” to all users is one of the first principles of accessibility. Adding alternative text (alt text) to an image or graphic allows it to be discoverable and understood by users in a variety of ways. Text alternatives convey the purpose of an image or function to provide an equivalent user experience. For instance, an appropriate text alternative for a search button would be “search” rather than “magnifying lens”.

Why using alternative text (alt-text) is important

Adding alternative text (“alt text”) will make images and graphics “visible”.
Text alternatives serve as labels for controls and functionality to aid keyboard navigation and navigation by voice recognition (speech input).
For people using screen readers or browsing speech-enabled websites alt-text can be read aloud or rendered as Braille.
Alt-text gives the speech input software users the ability to put focus onto a button or linked image with a single voice command.
Alt-text allows mobile users to turn images off to help with download speeds or limit data-roaming charges.
Alternative text (alt-text) covers POUR principles: perceive, operate, understand, robust.

How to create good alt-text?

Remember that context matters when creating alt-text.
Always ask yourself “What is the context and purpose of this image/graphic?“
Create alt-text which provides a textual alternative to non-text content.
Describe the content and function represented by the image/graphic.
Tips:
- Don't use the words "image of, picture of, photo of etc." it is redundant. Assistive technology already announces the item is an image.
- Add alt-text to images in documents, web sites and social media posts.

The World Wide Web Consortium (W3C) has created a very useful guide on how to create useful alt-text.

Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
Decorative images: Provide a null text alternative (alt=””) when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
Images of text:Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
Complex images such as graphs and diagrams: To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative.
Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.

Before and After Alternative text (Alt-text) Demo

Accessibility Barriers:

Check out the alternative text (alt-text) accessibility errors on this home demo non-accessible page.
- The alternative text errors are
  - home page error #1
  - home page error #2
  - home page error #4
  - home page error #7
  - home page error #8
  - home page error #10

No Accessibility Barriers:

Now see an accessible version of the home demo page. Look at the accessible alternative text (alt-text) on this home demo accessible page.
- The alternative text for:
  - accessible home page section #1
  - accessible home page section #2
  - accessible home page section #4
  - accessible home page section #7
  - accessible home page section #8
  - accessible home page section #10