Skip to main content

Accessibility

Colour and contrast​

All colour combinations must pass Web Content Accessibility Guidelines (WCAG) Level AA standards of 4.5:1 for normal text and 3:1 for large text (18px +). If visual information is conveyed in a way that is not accessible, an alternative, accessible text version must be supplied.

You can find more detailed usage information in the Allium colour palette.

Responsive content​

When coding page content for all users, consider the following best practices:

  • Content should be legible at all browser zoom levels: below 100%, at 100%, or above 100%.
  • Pages should be fully responsive and consumable on devices with screen sizes from 320px wide and above.
  • Page font size should be set to 100%, allowing users to adjust their preferred browser font size and have that reflected on page copy.

Keyboard navigation​

Overview​

Keyboard accessibility is important for users who rely on or prefer using a keyboard. Encourage accessibility by providing keyboard functionality to all available content. Common keyboard interactions include using the Tab key to select different interactive elements on a page and using the Enter key or the Spacebar to activate an in-focus element.

Focus state​

The Tab key navigates through various interactive elements on a page. A default visual indicator is provided by the web browser. The display is an outlined border around the focused element. When an element is in focus, it can be interacted with using the keyboard.

Tab order​

The order in which interactive elements receive focus should be logical and predictable. Create the tab flow hierarchy by using the source code to arrange the keyboard navigation. Begin with the header, followed by the main navigation, then page navigation (from top to bottom, left to right), and end with the footer.

Screen readers​

Ensure non-informational images are not read out loud. Links should be read as a link or a clickable element.

Make sure keyboard functionality works with VoiceOver and use alt text only where appropriate.

Content​

Writing for accessibility goes beyond making everything on the page available as text. It affects the way content is structured and how we guide people through a page.

See the TELUS BrandHub for detailed information on usage and implementation.

Simple guidelines:

  • Use plain language.
  • Write short sentences and use familiar words.
  • Avoid jargon and slang.
  • If you need to use an abbreviation or acronym that people may not understand, explain what it means on first reference.
  • Remember content hierarchy and place the most important information first.
  • Don’t use directional language.

Accessibility through Automation​

TELUS.com and Site Builder 2.0 follow the design standards and code from Allium. Allium code must pass automated accessibility checks to reduce accessible technical debt for TELUS.com products.

Allium uses JEST-axe with unit tests for its components.

Resource: JEST Accessibility Scanner Guide.

Governance​

If you have any questions or concerns regarding designing or developing in an accessible manner, please contact Oskar Westin.