Designing for accessibility

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.

Accessibility is a legal requirement, mandated by the Accessibility for Ontarians with Disabilities Act (AODA) and Canadian Radio-Television and Telecommunications Commission (CRTC).

UX and Visual designers have different roles in accessibility

User experience

UX professionals need to understand the interaction models of people with disabilities on user interfaces, and build their designs with the intention to accommodate for those use cases and be able to communicate the interactions model (e.g. functionality is it a link or a button).

Defining the interaction model helps to build out documentation and identifies existing accessibility patterns that were built into the product. The documentation supports the visual design, coding and testing.

An advanced understanding of accessibility is to look at the business requirements for a project and see opportunities to amplify an experience for people with different needs that might have a specific need for that service.

Visual Design

Visual design

Visual designers ensure that the colours, fonts, shapes, and general visual representation as a whole are inclusive. Accessible design is a clear representation of content and the intended semantics of that structure, based of off the visual design. The visual design and annotated interactions allow developers to code accordingly (eg. Unordered lists vs. tables, headers vs. strong text, buttons vs. links).

A more advanced understanding of visual design and accessibility considers how the brain consumes colours, shape, and layouts, and how with different methods of organizing content can create better experiences for people of all needs. Design governs the intended experience and defines the requirements for the developers and testers, which ensures that accessibility is carried throughout the project.


Designing accessible elements

This section discusses TELUS accessibility standards for designers. Following these best practices will help designers create a clear, simple and accessible user experience for customers and team members.


Colour contrast

Communicating through colour alone can make it difficult from some page visitors to use an application. Colour cues should always be accompanied by text or a symbol that indicates the function of the user interface element. For example using a chevron (>) to indicate a link. 

Designers need to make sure there is a proper amount of colour contrast between the page background and text and with user interface elements like links, buttons, and headers. Proper contrast benefits page visitors with visual disabilities and also helps when there is screen glare from windows.

The minimum contrast ratio is 4.5:1 and meets WCAG 2, level AA. TELUS Brand Standard best practices aim for 7:1 for mobile responsive websites. Text that is part of a logo or brand name does need to meet contrast requirements.

Tools for testing colour contrast

Tips

  • Use your design application  to convert designs to grayscale to check if colours are still distinguishable 

  • Run automated tests on screenshots of your website to flag potential contrast issues. 

  • Validate the test results with other automated tools in staging

Correct. White text on dark green background.
Incorrect. White text on light green background.

Designing for colour-blindness 

Some people have difficulty distinguishing between colours. The most common colour-blindness is red-green deficiencies. 

Tips for designing for colour-blindness:

  • Convert designs to grayscale to test colour and look for similar shades of gray

  • Use textures to distinguish between colours

  • Utilize online tools to test the colour on your page

Colour Cues

When indicating the state or change in user experience do not rely on colour cues alone. For example, using a green border to indicate a form field is valid or a red border to indicate an error, will appear the same to someone with red-green colour-blindness. 

It is important to always include text when providing error messages . Designers can also use universal symbols alongside colour cues like a checkmark, stop sign or exclamation mark. 

A colour blindness scale showing what green and purple look like to someone with various levels of colorblindness.


Accessible images  

Digital accessibility is closely linked to page 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. Decorative images are apart of the design layout while descriptive images are a part of the message.

Correct. Text is beside the image of a phone and there is no overlapping.
Incorrect. Text is on an overlay on top of a photo of a phone.

Want to read more about writing alt tags from a content perspective?


Distinct elements

Design dictates the outcome of all interactions on a page. Designers should create an experience with recognizable user interface elements and a familiar design pattern. 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.

Correct. Two uniform buttons. The first is dark green with white text and labeled the primary CTA. The second is dark purple with white text and is labeled the secondary button.
Incorrect. White text is on a light green button. Underneath is a light purple button with white text that is larger and not uniform.

Usable focus states

The visible outline around links, input fields and buttons is known as a focus indicator. They help people know which element has keyboard focus and helps them understand where they are when they are navigating a site. Focus indicators are often used by people who use the keyboard as a primary way of navigating the web, including people who use screen readers.

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. Designers should ensure these elements are highly visible with good contrast to stand out from the rest of the content.

Announce state changes and errors

Visual indications of UI changes need a text-equivalent. Multisensory information ensures that people with different disabilities can perceive the change.

Correct. Tabbing order follows a left to right direction.
Incorrect. Tabbing order is confusing.