How to write relevant ALT text

A page from a travel website with a map of Brisbane having its alt text being set to a relevant description of the map informationAlt text (Alternative Text) are descriptions used for non-text content such as:

The purpose of placing Alt text is to convey the function of an image rather than relying on the image itself. Alt text is critical to help Screen Readers understand the content of a PDF for the visually impaired audience. They serve as labels for controls and functionality aid keyboard navigation and navigation by voice recognition (speech input). They also serve as invisible description to identify audio, video, and files in other formats as well as applications that are embedded as part of a website.

Alt Text can be used in different ways. For example, they can be read aloud for people who cannot see the screen and for people with reading difficulties, enlarged to custom text-sizes, or displayed on braille devices.

Tips on writing a good Alt Text:

  1. Any time you use an image, be sure to include an ALT text within the image tag. Doing so will provide a clear text alternative of the image for screen reader users.
    • Prioritise images that contain crucial information (unlike decorative images) – Infographics, artistic images that are relevant to the content, functional images like buttons, logos, graphs, maps and more.
    • For PDF tagging, you can skip decorative images and tag them as background instead of image.

    A sleeping puppy

  2. Provide short and concise information that describes the image.
    • An example, for the image below, would be “A puppy sleeping” instead of “Ahhh, what a cute puppy” or “dog” etc.
    • There is no specific rule as to how many characters an alt text can have, but the general recommendation is 150 characters. However some images are so complex that more information may be needed.
  3. For functional images, like buttons, it is recommended to write the function instead of describing the image. An example on the search icon would be writing your Alt text as “Search button” instead of “magnifying glass”.

For more information visit www.w3.org

« back to the blog