Accessible images & descriptive (alt) text

Always communicate meaningful visual information  (images, charts, icons, branding content) to people who are blind, have low vision, or have cognitive disabilities within text.


Working together

Working together

Digital accessibility is closely linked to page and screen design. Designers need to ensure that the page experience is accessible to a wide range of people, including those who have visual and cognitive disabilities. Images, logos, charts, and animations that convey meaning need to include descriptive text. 

Content creators and designers need to work together to determine the meaning and purpose of visual elements on the page. Together they must decide if an image is decorative or descriptive. Content creators can provide the appropriate description as well as have it translated. Decorative images are apart of the design layout while descriptive images are a part of the message.

If an image, photograph, icon, has meaning, it needs a text alternative to provide an equitable experience for screen reader users, and others, including speech recognition users, magnification users, and users who restrict images from being downloaded.

Alt = "TELUS chart example ($$$), In 2020 the example shows 300, in 2019 it's 200, and in 2018 it's 100"

Alt = ""

Alt = "TELUS chart example ($$$), In 2020 the example shows 300, in 2019 it's 200, and in 2018 it's 100"

Alt = ""

Alt = "TELUS chart example ($$$), In 2020 the example shows 300, in 2019 it's 200, and in 2018 it's 100"

Alt = ""

Essentially, it is a descriptive image if the message of the page or screen is altered when the image, chart, icon, or photograph is removed from the page.

It is a decorative image if the message is not impacted if you remove the image, chart, icon, photograph from the page.

Digital accessibility is closely linked to page and screen design. Designers need to ensure that the page experience is accessible to a wide range of people, including those who have visual and cognitive disabilities. Images, logos, charts, and animations that convey meaning need to include descriptive text. 

Content creators and designers need to work together to determine the meaning and purpose of visual elements on the page. Together they must decide if an image is decorative or descriptive. Content creators can provide the appropriate description as well as have it translated. Decorative images are apart of the design layout while descriptive images are a part of the message.

If an image, photograph, icon, has meaning, it needs a text alternative to provide an equitable experience for screen reader users, and others, including speech recognition users, magnification users, and users who restrict images from being downloaded.

Alt = "TELUS chart example ($$$), In 2020 the example shows 300, in 2019 it's 200, and in 2018 it's 100"

Alt = ""

Alt = "TELUS chart example ($$$), In 2020 the example shows 300, in 2019 it's 200, and in 2018 it's 100"

Alt = ""

Alt = "TELUS chart example ($$$), In 2020 the example shows 300, in 2019 it's 200, and in 2018 it's 100"

Alt = ""

Essentially, it is a descriptive image if the message of the page or screen is altered when the image, chart, icon, or photograph is removed from the page.

It is a decorative image if the message is not impacted if you remove the image, chart, icon, photograph from the page.


Tips for writing descriptive alternative text

Tips for writing descriptive alternative text

  • Include descriptive and useful information
  • Keep the text short (no longer than 125 characters)
  • Write text with the customer in mind
  • Use optimized keywords for search engines responsibly if keywords are relevant
  • Be specific
  • Include descriptive and useful information
  • Keep the text short (no longer than 125 characters)
  • Write text with the customer in mind
  • Use optimized keywords for search engines responsibly if keywords are relevant
  • Be specific

Coding accessible images

Coding accessible images








Image checks: descriptive or decorative?

Image checks: descriptive or decorative?










Explore more

Explore more