Accessibility

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.

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.

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 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.

• 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.

• 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"

• 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.

• 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"

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