Alt text (Alternative Text) are descriptions used for non-text content such as:
- Short descriptions for images, including icons, buttons, and graphics
- Description of data represented on charts, diagrams, and illustrations
- Brief descriptions of non-text content such as audio and video files
- Labels for form controls, input, and other user interface components
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:
- 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.
- 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.
- 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”.