3 tips for a more accessible website

For companies of a certain size or in certain jurisdictions, website accessibility can be a legal requirement. However, regardless of our clients’ jurisdiction or business size, our agency always prioritizes designing websites with accessibility in mind, drawing from international standards such as the Web Content Accessibility Guidelines (WCAG) and the Accessibility for Ontarians with Disabilities Act (AODA).

The term “a11y,” shorthand for accessibility, embodies the ethos behind designing with inclusivity. It’s not just about accommodating users with challenges; it’s about applying good design principles to enhance the experience for everyone.

In this article, we’ll delve into vision-based accessibility guidelines, reserving mobility and cognition-based topics for future discussions.

Here are three steps to kickstart your journey toward a more accessible website.

1. Harness the power of colour theory

Colour plays a significant role in brand identity, but it can also pose challenges for users with colour vision deficiencies. Avoid using colour to convey crucial information—e.g., using red to highlight an error in a web-based language-learning program. If you use colour in this way, be sure to supplement it with text labels or icons.

Moreover, colour contrast enhances readability, benefiting not only the 1 in 25 people who experience colour deficiency but also all of your readers. At its most basic, contrast is light colours on dark backgrounds or dark on light. Yellow on white, or dark blue on black? Don’t bother if you want a user to make sense of the words.

2. Prioritize heading levels and hierarchy

Screen readers rely on hierarchical structures—in particular, carefully applied heading levels—to navigate web content efficiently. Heading levels break up the content on your site in a way that makes it easier for everyone to navigate a page: H1 (the webpage title), H2 (the first level of subheadings), H3 (the next level down), H4, etc. Assistive technology can then be configured to navigate the site by using a list generated from the headings, just like navigating via a table of contents.

Descriptive headings that accurately summarize the information in each subsection also enable all users and search engines to understand your content. This practice not only improves accessibility but also boosts search engine rankings and facilitates efficient content skimming for all users.

3. Leverage alt text effectively

Photography, illustrations and other image types can impede search engines and accessibility aids. That’s why we use alt text descriptions to show what your site content is all about.

Alt text descriptions on images provide information to search engines and accessibility aids. Keep descriptions concise yet descriptive, ensuring they convey the image’s essence effectively. Additionally, consider providing context within the surrounding text, especially for charts or infographics. Use empty alt text when images are decorative or redundant information exists elsewhere.

While applying these guidelines may not guarantee full WCAG/AODA compliance (if you want to talk about more robust compliance, get in touch with us), they mark the beginning of your journey toward inclusivity. By prioritizing good design and accessibility, you enhance your website experience for all users.

Because, after all, inclusivity isn’t just a moral imperative—it’s good business practice.