You are now in the main content area

Writing good text alternatives

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.

Where to add alternative text

Once you upload your image to the DAM, insert your alternative text in the “Title” field. Alternatively, you can use the Accessibility Dashboard to add your alternative text or to mark images as decorative. 

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.

Screenshot of Adobe AEM dashboard showing where to add alternative text.

Images that capture a mood

Use alt text for images that attempt to capture a mood or concept, images that are meant to evoke emotion or to make someone feel a certain way.

 Good: “Excited graduates wearing blue Bachelor’s gowns, waiting to receive their diploma at convocation."

 Bad: “Graduates at convocation”

Excited graduates wearing blue Bachelor’s gowns, waiting to receive their diploma at convocation.

 Good: “Two members of the security team speaking to a student whose bike was stolen.”

 Bad: “Three people talking”

Two members of the security team speaking to a student whose bike was stolen.

Images that tell a story

 Good: “A queue of people waiting for medical treatment in Nepal, with one woman looking up to the camera.”

 Bad: “Woman looking up”

A queue of people waiting for medical treatment in Nepal, with one woman looking up to the camera.

Images with a visible caption

Avoid duplicating the visible caption text for the alt text. It will be read twice by a screen reader.

 Good: “Representatives from MLSE and Ryerson each holding up jerseys for the Toronto Maple Leafs, Toronto FC, Raptors, Argonauts and Ryerson Rams.”

 Bad: “Photo: From left: Humza Teherany, MLSE’s chief technology and digital officer; Sumit Arora, MLSE’s senior director…” 

Note: Do not duplicate the visible caption in the alternative text field.

 Good: “Farrokh holding an anatomical model of a human heart.”

 Bad: “Man holding a heart"

Images of text and numbers

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.

 You should never replace semantic headings with images of text, or put long passages of text in an image.

Recommended: Use the Infographic, Full Width Colour, Blockquote or Image with Overlay Text component instead of embedding text within an image.

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

  • Images are more likely to distort and pixelate when resized. 
    • In small viewports (like mobile screens), the text may become too small or very difficult to read.
    • In large viewports or at high magnification, the text may look "fuzzy" and sometimes unreadable.
  • Text within images is not selectable (impossible to copy and paste):
    • Won't be accessible for people who use assistive technology unless a text alternative is provided.
    • Won't be customizable for people with browser preferences or extensions that make it more readable for them.

In rare situations where images of text must be used, the text alternative must contain the same text presented in the image. If the alternative text exceeds more than two sentences, please reference alternative text for complex images and figures.

It’s recommended to write out numbers in word form, as some screen readers may not recognize larger numbers and read out each digit one by one.

 Good:

  • “The most applied-to university in Ontario relative to available space.”
  • “Forty three thousand students.”
  • “Over one hundred undergraduate and graduate programs.”
  • “One hundred and thirty three partner universities in thirty seven countries.

 Bad:

  • “Infographic 1.jpg”
  • “Infographic 2.jpg”
  • “Infographic 3.jpg”
  • “Infographic 4.jpg”
Screenshot of About Ryerson page.

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. First, create an outline of the text,, external link and once you are ready to export, go to File > Export > SVG.

Images of people for a biography page or profile

Simply use the person's name as the alt text. It is not necessary to include the words "Portrait of" or "Photo of".

 Good: "Justin Trudeau"

 Bad: "Portrait of Justin Trudeau smiling"

Justin Trudeau's example biography page.

Images that hyperlink to another page

If you intend to make an image 'clickable', 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.

5 reasons to do a PhD today

 Best option: Use Overlay Text option if you intend to make the image link to another page.

5 reasons to do a PhD today

If you do not want to use Overlay Text, make sure the alternative text accurately describes where the link takes you.

 Good: “5 reasons to do a PhD today”

 Bad: “Smiling PhD student"

 

Alternative text for complex images and figures

For complex images such as charts, math equations, flowcharts, graphs and infographics where the text alternative is very long - it is best to provide the text equivalent below the image in plain text. 

Good example 

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.

Environmental Health and Safety Inspections and Audits pie chart.

The pie chart shows the audit type and number of Environmental Health and Safety inspections and audits conducted in 2017.

Audit Type Number of Audits
Biosafety cabinets 40
Fume hood audits 110
Lab emergency equipment audits 185
Lab inspections for safe chemical storage 88
Physical space assessments 25
Research risk assessments 500
Maintenance room safety audits 20

Bad example 

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.

Environmental Health and Safety Inspections and Audits pie chart.

Bad: "Pie chart of EHS inspections and Audits"

Alternative description for Google Data Studio

Google Data Studio widgets can be problematic for people who use a keyboard to navigate and people who have difficulty perceiving visual content. Similar to the example above, a Google Data Studio widget should also have a plain text alternative.

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.]

Country Population Internet Users
China 13,342,720,000 3,310,708,029
India 11,977,337,695 775,202,869
United States 3,076,528,567 2,030,008,955
Indonesia 2,388,914,104 196,466,812
Brazil 1,942,727,085 660,764,653
Pakistan 1,715,658,910 123,461,695
Nigeria 1,581,543,983 284,284,599
Bangladesh 1,505,724,822 45,073,048
Russia 1,431,239,304 473,508,567
Japan 1,277,657,187 885,924,532

Relevant WCAG 2.0 Success Criteria

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).

Relevant WCAG 2.0 Success Criteria

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).