Alternative text guide
Alternative (alt) text is used to convey meaning and provide context in place of an image, graph and other media. Blind and low vision users rely on the alt text attribute to understand the equivalent meaning of images, figures or other graphics in textual form. Alt text should provide a concise description conveying essential information about the image. Here are some key tips:
- Should be concise and meaningful, yet does not compromise on detail for it to make sense.
- Usually, around one hundred characters or less, like a “tweet”.
- Uses full stops and commas, so it can be read in a more human way by a screen reader.
- Avoids phrases such as "image of…” or “photo of..." or "graphic of…"
- A screen reader already indicates this information.
- Consider the context of the surrounding information when writing.
On this page:
- Where to add alternative text
- Decorative images
- Images that capture a mood
- Images that tell a story
- Images with a visible caption
- Images of text and numbers
- Images of people for a biography page or profile
- Images that hyperlink to another page
- Logos and brand marks
- Alternative text for complex images and figures
- Alternative description for Google Data Studio
- Relevant WCAG 2.0 Success Criteria
Note: Do not use double quotation marks in the alt text or title field. It will conflict with the HTML and break your alternative text.
Set images as decorative in the Accessibility Dashboard if they do not add meaningful information to a page. Decorative images are ignored by assistive technologies, such as screen readers.
Whether to set an image as decorative is based on your judgement. Visual elements such as borders or spacer elements should be set as decorative. If the surrounding text already captures the information in the image, it may be set as decorative too. Otherwise, please add alternative text to your image.
Plain text should always be used instead of placing text inside of an image. Plain, selectable text is much more flexible and accessible. Real text can be resized using the browser without losing clarity. Secondly, text colours and spacing can be adjusted to suit the reading preferences of users with the help of browser settings or extensions.
Accessibility guideline: Avoiding images of text is a WCAG 2.0 Level AA success criterion. Please reference: 1.4.5 Images of Text (Level AA). (external link)
Do not use images of text as visual headings. Use semantic headings instead.
Do not use images of text for quotes or long passages of text. Use a text-based component instead.
Problems with images of text
- Cannot translate automatically.
- More likely to distort and pixelate when resized. At high magnification, the text may look "fuzzy" and sometimes unreadable.
- The text within the image will not scale proportionally when using the browser's magnification features.
- In small viewports (like mobile screens), the text may become too small or very difficult to read.
- Not selectable (impossible to copy and paste), and won't be accessible for people who use assistive technology unless a text alternative is provided.
- Not customizable for people with browser preferences or extensions that make it more readable for them.
- If using a dark mode extension, sometimes the image becomes completely unreadable because it blends in with the background.
There should be minimal text within the image. Check if the text is still readable on mobile.
Save the image as an SVG (Scalable Vector Graphics). SVGs can easily re-size without degradation and usually have a small file size.
Save as SVG in Illustrator
If creating an image of text or vector graphics, export the image as an SVG! SVG is a vector image format, which means it will not lose its sharpness at high magnification or clarity.
- Using the Selection Tool, select the text frame, then go to Type > Create Outlines.
- Once you are ready to export, go to File > Export > SVG.
For 'clickable' images, it is highly recommended to use Overlay Text with the Image Component. The Overlay Text replaces the alternative text of the image in this case, and accurately describes to an assistive technology user where the image takes you.
The alternative text is "Environmental Health and Safety Inspections and Audits pie chart." The long description is located in the accordion component after the image which includes a brief summary and a data table.
The alternative text is "Pie chart of EHS inspections and Audits." Although the image has alt text, this does not accurately describe the contents of the pie chart! The purpose of alt text is to provide the same information and experience as displayed in the chart.
The pie chart shows the audit type and number of Environmental Health and Safety inspections and audits conducted in 2017.
|Number of Audits
|Fume hood audits
|Lab emergency equipment audits
|Lab inspections for safe chemical storage
|Physical space assessments
|Research risk assessments
|Maintenance room safety audits
The bar chart shows the world population versus the number of internet users in China, India, United States, Indonesia, Brazil, Pakistan, Nigeria, Bangladesh, Russia and Japan. [Insert some key information like general trends or outcomes in simple, easy to understand language.]
Providing alternative text for images is a Level A success criteria, which is required for conformance with WCAG 2.0 and the Accessibility for Ontarians with Disabilities Act (AODA).
- 1.1.1 Non-text Content (Level A): (external link) All non-text content that is presented to the user has a text alternative that serves the equivalent purpose...
- 1.4.5 Images of Text (Level AA): (external link) If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except...
- 1.4.9 Images of Text (No Exception) (Level AAA): (external link) Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.