Using <Alt> text on images

Top how-to tips for using <Alt> text

Alt text is html code that screen-readers use to announce images on a web page. The screen reader identifies there is an image when it sees <img>, announces “image” and then looks for <alt> so it can announce what the images is all about. Alt text is also the written copy that appears in tooltips when your mouse hovers over an image.

If alt text is done well screen reader users get a sense of what the image is, or purely decorative images are ignored by the screen reader. This adds to the user’s experience. If alt text is missing or done poorly, screen reader users can hear the image filename (often long meaningless strings of text) or they hear that there is an image but don’t hear what the image is about. Both cause frustration.

Alt text is the first checkpoint in the Web Content Accessibility Guidelines, also known as WCAG2.1 1.1, making it a great place to start any digital accessibility journey. Here are our top how-to tips for creating good alt text.

  1. Ensure that all informative non-text content has alternative text
    • This includes images, photos, logos and graphs
  2. Use <alt=””> (also called null text) if the image is purely decorative
    • This tells the screen reader to ignore this image
  3. Consider your audience and the specific message you want to convey by using this particular image in this particular situation
    • The same image might be described differently in different contexts
  4. Describe the image, and be specific about both the subject and the context
    • Use text to tell the story the image is telling visually
  5. Front-load your alt text by putting the most relevant words at the start
    • Consider what is the most important part of the image
  6. Keep alt text concise
    • Screen readers typically stop reading after 125 characters
  7. Never start alt text with “photo of…,” “picture of…” or “image of…”
    • Screen readers automatically announce that it is an image
  8. Alt text should not be redundant
    • E.g. If an image already has a descriptive caption consider whether alt text is needed
  9. Tell visitors where linked images go
    • E.g. alt=“Blind & Low Vision NZ logo – website home”
  10. Include alt text for images in Word, Excel, PowerPoint documents
  11. Always check automated alt text from auto text generators
    • They are still a little limited
  12. Create good business processes for naming all images
    • E.g. the owner of each image should create names as they add them to your database
  13. Explore using the longdesc=”” tag for more complex images that require a longer description.
  14. Get familiar with how to add/edit alt text in your CMS

More resources about creating great alt text

Learn more web accessibility tips for people who are blind or have low vision.

If you’d like further help with your digital accessibility contact Access Advisors (a Blind & Low Vision NZ initiative). Access Advisors provide reviews, consultancy, training, and research for all your digital services.