Text enlarged to 150% in order to read email. A slight tremor that causes half the buttons on a phone to be missed. One eye surgery, then another. Many people live with these situations without ever considering themselves disabled, yet they struggle with websites almost every day.
These situations are common. According to Statistics Canada, 27% of Canadians aged 15 and over lived with at least one disability in 2022, or 8 million people. In a region with an ageing population, such as ours, that share is not decreasing.
A standard exists for building sites these people can use: WCAG. This article explains what it requires, and why we aim for it on every site we build.
What is WCAG?
WCAG stands for Web Content Accessibility Guidelines. They are published by the W3C, the organization that manages web standards. Version 2.2, released in October 2023, is the current one.
The guidelines rest on four principles. A site must be:
- perceivable: the content can be seen or heard in one form or another. An image has text describing it, and a video has captions;
- operable: it can be used with a keyboard alone, with an unsteady finger, and without time pressure;
- understandable: the text is clear, and forms indicate what went wrong;
- robust: it works with screen readers and other assistive technologies, not only with Chrome on a new laptop.
Why aim for Level AA rather than A or AAA?
Because it is the realistic target. Each guideline has a level. Level A is the minimum: without it, some people are entirely blocked. Level AA adds what makes a site usable for most people. Level AAA goes further, but some AAA criteria cannot be met across an entire site, and the W3C itself does not recommend it as a general requirement.
Level AA is therefore the realistic target. It is also the level referenced by most laws and public policies around the world.
What does it change on a page in practice?
Fewer things than one might expect, and changes that benefit everyone.
- Contrast. Regular text requires a contrast ratio of at least 4.5 to 1 with its background. The light grey on white often favoured in mockups frequently fails this threshold.
- Keyboard. Everything that can be done with a mouse must also work with the Tab and Enter keys, and the user must always be able to see their position on the page.
- Targets. New in 2.2: a button or link must measure at least 24 by 24 pixels, or have sufficient space around it. On our sites, we aim for 44.
- Images. A photo that conveys information has alternative text. A decorative photo does not, so as not to waste the time of someone listening to the page.
- Forms. Every field has a label, and every error message explains in words what needs to be corrected.
- Logging in. Also new in 2.2: users must not be required to solve a puzzle or memorize a code to sign in.
- Motion. Anything that moves automatically can be stopped, and the site respects the device's "reduce motion" setting.
Why should a small business care?
For its customers, more than for legal reasons. In Québec, the government's web accessibility standards (the SGQRI 008 standards) apply to ministries and public bodies. A private business is not required to follow them, so the legal argument is not the one we emphasize.
The main argument concerns customers: the 78-year-old looking for your phone number; the man with one free hand because he is holding his daughter with the other; the person listening to your site because they cannot see it. If the site does not work for them, they call a competitor.
An accessible site is also nearly always a better site overall. Clear headings, real text rather than text embedded in images, visible buttons: this is precisely what Google and AI tools read.
How do we build our sites?
We aim for WCAG 2.2 Level AA on every site we build: our own, our clients', and our projects. Not as an add-on at the end, but from the outset.
- Clean, well-structured HTML: real headings, real lists, real buttons. Everything else depends on this foundation.
- Brand colours are checked for contrast before the first line of code is written.
- Every page is tested with the keyboard, without a mouse.
- An automated tool (axe) scans the pages after every significant change.
- We review the site in dark mode, in high contrast and on a small phone.
On lapetitenation.ca and on this site, we have also added a Display panel: larger text, dark mode or high contrast, an easier-to-read font, a reading guide, a large cursor, and the option to stop animations. Settings remain on your device. The Accessibility page explains all the details.
The panel is a complement and does not replace a well-built site. We advise caution with tools that "install with one line" and promise to make any site compliant: they do not fix a button that cannot be reached with the keyboard.
What are the limits of our approach?
Automated tools detect only some of the problems. The rest requires human review, ideally by people who use a screen reader every day. None of our sites has been audited by an external firm, and we hold no certification.
While preparing this article, we ran our own site through the test again. A few text elements were still too pale in light mode, and one page overflowed horizontally on very small phones. These issues were corrected the same day.
Does your site pass the test?
A simple check: open your site, set the mouse aside, and navigate using only the Tab key. Can you see where you are? Can you open the menu, fill in the contact form, and call? If you get stuck somewhere, your customers do too.
To review your site with us, get in touch.