Language selection

Creating accessible web content

Improve the accessibility of your web content with these common structural and labelling best practices.

Contributors:

Accessibility helps everyone

When content is accessible, it's easier for everyone to read and understand the information they need to know.

The Accessible Canada Act (ACA) requires CRA content to be barrier-free by 2040. We use the Web Content Accessibility Guidelines (WCAG) to help us meet this goal.

The User-Centred Design (UCD) guide incorporates accessibility into its guidance. By using the guide, your web content should meet most of the WCAG success criteria.

More information: CRA audiences and user needs - UCD guide

How to create accessible content

Accessible content is written in plain language, structured in a logical order, labelled with descriptive headings, and coded in a way that supports assistive technologies.

Our web developers have identified some of the most common best practices to improve the accessibility of web content.

Use descriptive titles and headings

Improve navigation

Non-descriptive headings make it difficult for users to navigate through the content. For example, if a page contains multiple headings called “Important note”, users cannot distinguish the difference between the sections.

Provide clarity and understanding

Titles and headings that lack clarity can prevent users from finding the information they need. For example, a heading like "Partnership" on a page about reporting partnership income does not convey enough information about what users can expect to find.

Describe content effectively

Headings should provide users with a clear idea of what each section contains, making it easier to scan and understand the page's structure.

Give context

For users relying on assistive technologies, non-descriptive headings can be a significant barrier. As screen readers use headings to navigate and provide context, descriptive headings allow users to understand and navigate the content effectively.

More information:

Use tables for data, not formatting

Reduce confusion

Tables should only be used to present data that can be represented as numbers or as very short phrases.

If your information needs formatting or structural elements such as full sentences, bullet lists, or paragraphs, do not use a table.

It can be hard for users to keep track of where they are in a table with long or complicated information, and how one cell relates to another.

Assistive technologies can also struggle to convey a table’s content clearly for a user.

A screen reader will read out the table’s structural information as it reads the contents of each cell. This can make it hard to understand the actual content, especially when individual cells contain too much information.

A screen magnifier will show a smaller section of the content at a time, which means the user has to do a lot more scrolling, both vertically and horizontally, and can very easily lose track of how the cell they are reading relates to the column or row headers.

Present content in a logical order

Using tables for layout can disrupt the logical reading order of the content. Screen readers and other assistive technologies follow the order of elements in the HTML code. This means the technology might read things in a confusing order.

Users who do not rely on assistive technologies can also get lost in long and complicated tables, because the most logical reading order is not easy to identify.

Use responsive design components

Tables are not flexible and can cause significant issues when viewed on different screen sizes, or if someone is using a screen magnifier.

For example, important information might be missed if a user doesn't realize they should scroll sideways to see more columns.

There are design components that adapt to different screen sizes and reduce the risk of content getting missed.

More information:

Describe images with alt text or a text version

Make images visible for screen readers

Screen readers cannot interpret images. They rely on alt text to describe the content of images. Without alt text, screen readers either skip the image entirely or read out the file name, which is often meaningless. If an image conveys essential information, some users will miss it. Clear alt text gives everyone access to the same information.

More information:

Write meaningful link text

Support navigating by links

Screen reader users often rely on keyboard shortcuts to pull up a list of links or use the tab key to navigate through links on a page. When screen readers read links in this way, they ignore the surrounding text and read only the link text. If the link text is non-descriptive, such as "click here" or "more," users cannot determine the purpose or destination of the link.

Help users understand what to expect

Non-descriptive links make it challenging for users to understand where a link will take them. This can lead to confusion and frustration, as users may be unsure whether the link will provide the information they need.

More information:

Apply correct heading structure

Support navigating by heading

Headings allow users to quickly scan a page and understand whether it is likely to contain the information they need.

Screen readers or voice-controlled navigation tools can use headings to quickly navigate through a web page and understand its structure.

Properly structured headings allow users to jump from one section to another, either by scanning and scrolling, or using keyboard shortcuts.

If the heading structure is incorrect, it can make navigation confusing and cumbersome.

Maintain content hierarchy

Headings create a hierarchical outline of the content, helping users understand the relationship between different sections. Incorrect heading levels can misrepresent this hierarchy, making it difficult for users to comprehend the organization of the content. For example, an <h2> following an <h4> suggests a hierarchical inconsistency, which can confuse users.

Reduce cognitive load

A well-structured heading hierarchy helps users process and understand the information by breaking down content into manageable sections.

Well-structured content lets the user ignore sections that they don't need. It helps them do less reading while still getting the answers they were looking for.

More information:

Use the UCD guide

Accessible content creates a better user experience for everyone. When you follow these best practices and other guidance from the User-Centred Design (UCD) guide, you can avoid most accessibility mistakes by default.

Date modified: