Skip to Main Content

Accessibility

We aim to provide an inclusive experience for Canadians. Guidelines, tools, and techniques exist to help achieve and maintain an accessible digital experience.

Accessibility standards at Canada Post

At Canada Post, we strive to achieve level AA compliance of the Web Content Accessibility Guidelines (WCAG) 2.0. To do this, we use a collection of tools, techniques, and a combination of automated and manual testing throughout the design, development, and maintenance phases of our digital products.

WCAG 2.0

Getting familiar with the principles and guidelines of WCAG 2.0 is the foundation for creating an inclusive web experience. You can start by reading the overview of WCAG.

When designing or developing, use the following tools to reference accessibility guidelines, techniques and possible solutions.

Automated testing

Once you’re familiar with the WCAG 2.0 guidelines, you can use automated tools to complete an audit. Keep in mind that no single tool will be able to identify all issues and some tools have inaccuracies. It’s important to use a combination of automated tools and manual testing to help you improve your accuracy and coverage of accessibility compliance.

Accessibility audit tools

These tools can help you perform a near holistic audit of your webpage, based on accessibility guideline success criteria. Some tools provide you with the ability to specify which guidelines you’re trying to meet, and offer recommendations on how to fix issues.


Contrast checking tools

Contrast checking tools help determine whether a webpage’s content meets the contrast criteria. This is required to improve readability for users with low vision or those who are colour-blind.


Vision simulators

Vision simulators help you replicate the experience of low vision and colour-blind users.


  • NoCoffee: Free Chrome plugin
  • Colorblinding: Free Chrome plugin
  • Taking off your glasses or physically stepping back

Markup validation tools

Validating that a webpage’s markup is clean, semantic and fully functioning is important to ensure assistive technology can interpret content effectively. Using W3C’s Markup Validation Service, you can maintain your HTML by checking the markup validity.

Manual testing

Manual testing should be done alongside automated testing. Explore the tools and techniques you can use to perform manual testing.

Screen readers

It’s important to manually test a user’s experience with screen readers. There are many screen readers available, that read content and user interface components differently. For example, some screen readers read every letter in words containing all capitals. The following screen readers are recommended for testing.


Tab key navigation

The tab key navigation test is a simple technique used to assess the keyboard operability of a webpage. Using your cursor, select the beginning of a webpage and press the tab key repeatedly to move through the interactions. Ask yourself the following questions.


  • As you tab, can you see the browser’s default focus indicator move through the different functional elements on the page?
  • Can you tab to all functional elements, including links, buttons, and form controls?
  • As you tab, is the path taking you through the elements from left to right and from top to bottom?
  • Can features that rely on the use of a mouse also be accessed with a keyboard? For example, can you open the menu using a keyboard?

“Select all” test

The “select all” test is a quick way to help you identify elements that are potentially inaccessible with a keyboard. Simply use the select-all command on your computer while reviewing a webpage, and investigate the elements that are not selected.


  • Windows: Ctrl + A
  • macOS: Command + A

View webpages without JavaScript and Cascading Style Sheets (CSS)

Many users choose to disable JavaScript because their screen readers are not compatible with it. Try to view webpages without JavaScript to mimic their experience.


In addition, viewing webpages without CSS allows you to perceive content the way many screen reader users will. Chrome and other browsers give you the ability to disable both JavaScript and CSS.

Readability

Write content in a way that makes it clear and simple. Avoid using jargon or language that's not easily understood by all Canadians. At Canada Post, we aim to write for an 8th-grade reading level.

Break up content into paragraphs that focus on one idea at a time. Try to keep sentences approximately 60 to 70 characters in length. Always try to use the active voice because the passive voice can confuse readers and impact readability.

Alt text

Apply alt (or alternative) text to images that help users understand the content on the page. Alt text should describe what the image portrays. This way, users who are unable to see the image will understand what the image is meant to represent. Keep alt text clear and brief.

Alt text is not necessary when an image is decorative.

ARIA attributes (aria-label and aria-labelledby)

Some web elements are more easily understood when accompanied by a label or when viewed within the context of an entire page. Labels may work for sighted users, but may not communicate the full purpose of the web element to those with low or impaired vision.

To solve for this, use the aria-label attribute to indicate the purpose of a web element that users may not be able to see. For example, a hamburger menu should include a simple aria-label indicating that it’s a menu.

Use these labels to provide further detail and context. Ensure they’re clear, brief, and only provide details that are relevant to the tasks that users seek to accomplish.

ARIA landmarks

ARIA landmark roles can help assistive technology users quickly navigate to and past blocks of content in a web interface.

  • Header: role = "banner"
    This is a region of the page that’s site-focused and is typically your global page header.
  • Navigation: role = "navigation"
    This contains links that navigate to different pages of a website, screens of an application, or sections within a single document.
  • Main: role = "main"
    This wraps the focal content of a document and should only be used once within it.
  • Article: role = "article"
    This represents an independent item of content. There may be many articles in a single document. Articles are not considered landmarks, but screen readers may still surface articles when navigating by regions or landmarks in a document.
  • Aside: role = "complementary"
    This is a supporting section related to the main content, even when separated.
  • Footer: role = "contentinfo"
    This contains information about the document, including meta info, copyright, and company info.
  • Form: role = "search"
    Add a “search” role to your primary search.

Document outline

  • Use semantic headings and structure.
  • When nesting headings <h1> to <h6>, your primary document header should be an <h1>. Subsequent headings should make logical use of <h2> to <h6>, so that screen readers can construct a table of contents for your pages.

Forms

  • Tab order of the form should follow a logical pattern and layout.
  • Associated label for all form controls (for example, input, select, etc.): <label for = "name">
  • Name: </label><input id = "name" type = "text">
  • Group related form elements with a field set and describe the group with a legend: }} Important for {{input type = "radio" and input type = "checkbox"

Keyboard access

  • Make sure you can use the keyboard to navigate through the website.
  • Use the tab key to navigate.
  • Use the Enter key to activate the element.

Language attribute

  • Declaring a language attribute on the HTML element enables a screen reader to read out the text with correct pronunciation.
  • Language attribute: html lang = "en"

Links

  • Ensure links have a focus state.
  • Ensure links are recognizable and underlined.
  • Link images and use appropriate alt text.

Content...