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

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

Images

Alt text

Use images relevant to the page’s content and audience. To ensure the significance of an image an be experienced by all, it is critical that you include alt text for every image.

Alt text doesn’t need to explain everything in the image, just the essential details (1 sentence, max)

If you include images without alt text, search engines will count that against the accessibility of your site. This can impact the how high your website is surfaced in search results.

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.