Checking your webpage for accessibility

Maintaining an accessible website not only ensures that everyone can access your content, it means that search engines and AI will be able to crawl and surface your pages in search results.

Below, you can find a series of items to be mindful of as you’re creating and updating content.

Headings and heading structures

Headings allow screen readers to easily navigate content on a page. It also allows users to quickly scan a page to find the information they’re looking for. As a result, headings should be used to organize the page into content buckets.

The page title is already using an H1 heading, so H2s should be used to indicate the main content buckets of the page. H3s should be used for subsections within an H2 section, H4s as subsections within an H3, and so on.

Please do not skip levels for aesthetic purposes (e.g., moving directly from an H2 to H4).

For guidance on creating a clear and accessible heading hierarchy, see Optimizing titles, headings and descriptions for search.

Writing practices

Copy

Using clear, concise language ensures users understand the message you’re sharing. It also helps search engines and AI pull details to surface in search results.

Here are some practices to keep in mind:

• Use descriptive headings followed by short paragraphs (2-3 sentences)
• Do not use all caps in headings or text
• Do not rely on bold or italics to convey meaning—these can be missed by screen readers
• Write for a Grade 9 reading level (Grade 12 if speaking to a specific, expert audience)

Links

Hyperlinks and buttons should describe the destination or action.

People using screen readers may navigate through links without hearing the surrounding paragraph, so each label should make sense on their own.

Where possible, avoid vague CTAs like “learn more” or “click here”.

For additional guidance, see:

• Choosing the right button or link for guidance on selecting, positioning and using accessible buttons.
• Writing effective calls to action for guidance on making clear and recognizable CTAs.

Images

Alt text

Check that images conveying meaningful information have alternative text that describes their content or purpose. Decorative images should be marked appropriately so assistive technologies can skip them.

For guidance on writing and adding alternative text, see Writing alt text for images.

Text-heavy images

Because alt text needs to be concise, it is recommend to limit the amount of text in an image to an absolute minimum. Graphs and other visual representations of data are discouraged and should be built using elements on the page.

If a graph cannot be replicated on the page, include a detailed explanation of the presented data next to the image.

How to add alt text to images

To upload an image and add alt text:

• Select the Media Library option from the backend of the website
• Drag and drop your desired photo into the media library
• If the desired photo isn’t selected already, click on it so the side window appears
• Fill in the Alt Text field
• If you don’t see the Alt Text field, make sure you have More Details expanded

On-page colours

Use global colours and styles whenever possible; these have been created with accessibility in mind.

If you need to manually update an element’s colour, check the contrast between:

• text and background,
• button text and button backgrounds,
• links and surrounding text,
• normal, hover and active states, and
• text and every part of a background image.

Most text requires a contrast ratio of at least 4.5:1. Large text requires at least 3:1.

You can use Adobe’s Colour contrast checker or your browser’s inspect tool.