Accessibility for design

Accessibility for design

Accessibility for design

Accessibility for design


Designers provide a visual framework to ensure that all of our customers and team members, regardless of their abilities, can enjoy great digital experiences. It’s important for designers to be aware of our accessibility standards to design across any device or screen size.

Topics

Topics

Accessibility requirements

Our guidelines offer best practices to help make our sites and mobile and web apps more accessible for everyone. Accessibility is a legal requirement, mandated by the Accessibility for Ontarians with Disabilities Act (AODA) and Canadian Radio-Television and Telecommunications Commission (CRTC). All of our vendors and partners must follow these guidelines as well.

Learn more about accessibility requirements

Accessibility requirements

Our guidelines offer best practices to help make our sites and mobile and web apps more accessible for everyone. Accessibility is a legal requirement, mandated by the Accessibility for Ontarians with Disabilities Act (AODA) and Canadian Radio-Television and Telecommunications Commission (CRTC). All of our vendors and partners must follow these guidelines as well.

Learn more about accessibility requirements

Designers and Accessibility

User experience (UX), Interactions Designers, and Visual designers have distinct roles in making an accessible product experience.

Learn more about UX and visual designers

Designers and Accessibility

User experience (UX), Interactions Designers, and Visual designers have distinct roles in making an accessible product experience.

Learn more about UX and visual designers

Colour contrast introduction

The contrast of the foreground and background on text must be rich enough so that users can differentiate between elements. The contrast between other design elements like visible states, images with text, different types of elements, charts, graphs, keyboard only visible content, and maps add complexities to meeting colour contrast requirements. Discover how to create proper contrast to see if your designs meets the requirements.

Learn more about colour contrast

Colour contrast introduction

The contrast of the foreground and background on text must be rich enough so that users can differentiate between elements. The contrast between other design elements like visible states, images with text, different types of elements, charts, graphs, keyboard only visible content, and maps add complexities to meeting colour contrast requirements. Discover how to create proper contrast to see if your designs meets the requirements.

Learn more about colour contrast

Designing for colour-blindness

Colour blindness or colour vision deficiency must be taken into account when designing products. When one person sees blue another may see yellow.

Learn more about designing for colour-blindness

Designing for colour-blindness

Colour blindness or colour vision deficiency must be taken into account when designing products. When one person sees blue another may see yellow.

Learn more about designing for colour-blindness

Colour cues

Colours like red and green can be hard to distinguish so utilizing those alone are not enough when indicating something is incorrect or correct.

Learn more about colour cues

Colour cues

Colours like red and green can be hard to distinguish so utilizing those alone are not enough when indicating something is incorrect or correct.

Learn more about colour cues

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.

Learn more about accessible images & descriptive (alt) text

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.

Learn more about accessible images & descriptive (alt) text

Semantic content structure

Proper semantic structuring will help guide users throughout a page or screen. Discover the importance of semantic content and how to craft and implement it.

Learn more about semantic content structure

Semantic content structure

Proper semantic structuring will help guide users throughout a page or screen. Discover the importance of semantic content and how to craft and implement it.

Learn more about semantic content structure

Distinct elements

For an accessible experience for all users, design elements like headers, tables, and buttons need to be clear. The functionality of links and buttons should be clear to page visitors too so that they can complete the page function.

Learn more about distinct elements

Distinct elements

For an accessible experience for all users, design elements like headers, tables, and buttons need to be clear. The functionality of links and buttons should be clear to page visitors too so that they can complete the page function.

Learn more about distinct elements

Responsive content

There are many different sized devices users can access content on. We want to ensure that we are taking preferences into consideration so that anything our customers view will be optimized for their screens.

Learn more about responsive content

Responsive content

There are many different sized devices users can access content on. We want to ensure that we are taking preferences into consideration so that anything our customers view will be optimized for their screens.

Learn more about responsive content

Visible focus states

Elements that should be focusable include links, form fields, functional widgets, buttons and menu items. They need to look different than the elements around them so that their functionality is observed.

Learn more about visible focus states

Visible focus states

Elements that should be focusable include links, form fields, functional widgets, buttons and menu items. They need to look different than the elements around them so that their functionality is observed.

Learn more about visible focus states

Keyboard functionality

Some users will rely on only their keyboards, including alternative keyboards, as a way to navigate through different web and app experiences. It is one of the most important aspects of digital accessibility.

Learn more about keyboard functionality

Keyboard functionality

Some users will rely on only their keyboards, including alternative keyboards, as a way to navigate through different web and app experiences. It is one of the most important aspects of digital accessibility.

Learn more about keyboard functionality

Motion principles and accessibility

The use of animation and motion should be only used if necessary. Writers, developers and designers must work together to ensure any motion is properly created so that all users can still understand the message with the page even if they have reduced motion settings turned on.

Learn more about motion principle accessibility

Motion principles and accessibility

The use of animation and motion should be only used if necessary. Writers, developers and designers must work together to ensure any motion is properly created so that all users can still understand the message with the page even if they have reduced motion settings turned on.

Learn more about motion principle accessibility

Communicate the current state

Communicating the current state to our users lets them know if something has been selected or not amongst other indicators. It’s also important for digital wayfinding. Clearly outlining this is important as users will interact with products differently.

Learn more about communicating the current state

Communicate the current state

Communicating the current state to our users lets them know if something has been selected or not amongst other indicators. It’s also important for digital wayfinding. Clearly outlining this is important as users will interact with products differently.

Learn more about communicating the current state

Announce state changes and errors

Be sure to announce the state change to our customers, especially any error messages, by using visual cues along with text to describe what has happened.

Learn more about announcing state changes and errors

Announce state changes and errors

Be sure to announce the state change to our customers, especially any error messages, by using visual cues along with text to describe what has happened.

Learn more about announcing state changes and errors

Accessibility requirements

Our guidelines offer best practices to help make our sites and mobile and web apps more accessible for everyone. Accessibility is a legal requirement, mandated by the Accessibility for Ontarians with Disabilities Act (AODA) and Canadian Radio-Television and Telecommunications Commission (CRTC). All of our vendors and partners must follow these guidelines as well.

Learn more about accessibility requirements

Accessibility requirements

Our guidelines offer best practices to help make our sites and mobile and web apps more accessible for everyone. Accessibility is a legal requirement, mandated by the Accessibility for Ontarians with Disabilities Act (AODA) and Canadian Radio-Television and Telecommunications Commission (CRTC). All of our vendors and partners must follow these guidelines as well.

Learn more about accessibility requirements

Designers and Accessibility

User experience (UX), Interactions Designers, and Visual designers have distinct roles in making an accessible product experience.

Learn more about UX and visual designers

Designers and Accessibility

User experience (UX), Interactions Designers, and Visual designers have distinct roles in making an accessible product experience.

Learn more about UX and visual designers

Colour contrast introduction

The contrast of the foreground and background on text must be rich enough so that users can differentiate between elements. The contrast between other design elements like visible states, images with text, different types of elements, charts, graphs, keyboard only visible content, and maps add complexities to meeting colour contrast requirements. Discover how to create proper contrast to see if your designs meets the requirements.

Learn more about colour contrast

Colour contrast introduction

The contrast of the foreground and background on text must be rich enough so that users can differentiate between elements. The contrast between other design elements like visible states, images with text, different types of elements, charts, graphs, keyboard only visible content, and maps add complexities to meeting colour contrast requirements. Discover how to create proper contrast to see if your designs meets the requirements.

Learn more about colour contrast

Designing for colour-blindness

Colour blindness or colour vision deficiency must be taken into account when designing products. When one person sees blue another may see yellow.

Learn more about designing for colour-blindness

Designing for colour-blindness

Colour blindness or colour vision deficiency must be taken into account when designing products. When one person sees blue another may see yellow.

Learn more about designing for colour-blindness

Colour cues

Colours like red and green can be hard to distinguish so utilizing those alone are not enough when indicating something is incorrect or correct.

Learn more about colour cues

Colour cues

Colours like red and green can be hard to distinguish so utilizing those alone are not enough when indicating something is incorrect or correct.

Learn more about colour cues

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.

Learn more about accessible images & descriptive (alt) text

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.

Learn more about accessible images & descriptive (alt) text

Semantic content structure

Proper semantic structuring will help guide users throughout a page or screen. Discover the importance of semantic content and how to craft and implement it.

Learn more about semantic content structure

Semantic content structure

Proper semantic structuring will help guide users throughout a page or screen. Discover the importance of semantic content and how to craft and implement it.

Learn more about semantic content structure

Distinct elements

For an accessible experience for all users, design elements like headers, tables, and buttons need to be clear. The functionality of links and buttons should be clear to page visitors too so that they can complete the page function.

Learn more about distinct elements

Distinct elements

For an accessible experience for all users, design elements like headers, tables, and buttons need to be clear. The functionality of links and buttons should be clear to page visitors too so that they can complete the page function.

Learn more about distinct elements

Responsive content

There are many different sized devices users can access content on. We want to ensure that we are taking preferences into consideration so that anything our customers view will be optimized for their screens.

Learn more about responsive content

Responsive content

There are many different sized devices users can access content on. We want to ensure that we are taking preferences into consideration so that anything our customers view will be optimized for their screens.

Learn more about responsive content

Visible focus states

Elements that should be focusable include links, form fields, functional widgets, buttons and menu items. They need to look different than the elements around them so that their functionality is observed.

Learn more about visible focus states

Visible focus states

Elements that should be focusable include links, form fields, functional widgets, buttons and menu items. They need to look different than the elements around them so that their functionality is observed.

Learn more about visible focus states

Keyboard functionality

Some users will rely on only their keyboards, including alternative keyboards, as a way to navigate through different web and app experiences. It is one of the most important aspects of digital accessibility.

Learn more about keyboard functionality

Keyboard functionality

Some users will rely on only their keyboards, including alternative keyboards, as a way to navigate through different web and app experiences. It is one of the most important aspects of digital accessibility.

Learn more about keyboard functionality

Motion principles and accessibility

The use of animation and motion should be only used if necessary. Writers, developers and designers must work together to ensure any motion is properly created so that all users can still understand the message with the page even if they have reduced motion settings turned on.

Learn more about motion principle accessibility

Motion principles and accessibility

The use of animation and motion should be only used if necessary. Writers, developers and designers must work together to ensure any motion is properly created so that all users can still understand the message with the page even if they have reduced motion settings turned on.

Learn more about motion principle accessibility

Communicate the current state

Communicating the current state to our users lets them know if something has been selected or not amongst other indicators. It’s also important for digital wayfinding. Clearly outlining this is important as users will interact with products differently.

Learn more about communicating the current state

Communicate the current state

Communicating the current state to our users lets them know if something has been selected or not amongst other indicators. It’s also important for digital wayfinding. Clearly outlining this is important as users will interact with products differently.

Learn more about communicating the current state

Announce state changes and errors

Be sure to announce the state change to our customers, especially any error messages, by using visual cues along with text to describe what has happened.

Learn more about announcing state changes and errors

Announce state changes and errors

Be sure to announce the state change to our customers, especially any error messages, by using visual cues along with text to describe what has happened.

Learn more about announcing state changes and errors

Tools

Tools

Apply your TELUS knowledge by using the Tools below. Click into each of the tools and find out how to access and use each one.

Apply your TELUS knowledge by using the Tools below. Click into each of the tools and find out how to access and use each one.