A simple test reveals a great deal about a website's accessibility. Disconnect the mouse, or keep your hand away from the trackpad, and try to send a message through the contact form using only the Tab and Enter keys. Is it clear which field is active? Is the send button reachable at all?
Many small business sites fail this test, along with several others: pale grey text on a white background, chosen because it looked elegant in the mockup; a phone number that is actually part of a banner image; a form where the only indication of what belongs in each field is placeholder text that disappears as soon as the visitor clicks.
None of this is intentional. Owners and their designers have simply never been told that these choices exclude people. Accessibility is often perceived as a concern for governments and banks, not for dive shops, restaurants or local plumbers. That perception is mistaken, and most of the corrections take an afternoon.
What is WCAG 2.0?
WCAG 2.0, the Web Content Accessibility Guidelines, is the reference standard for web accessibility. The W3C published it in December 2008. More than seven years later, it remains largely unknown to most small businesses. The W3C offers a plain-language summary on the WCAG overview page, which is worth reading even without consulting the full technical document, which is lengthy.
In Canada, the requirements currently apply mainly to governments and larger organizations. Federal government sites follow their own web accessibility standard based on WCAG 2.0. Quebec also has standards for its public bodies. In Ontario, the AODA already requires larger organizations to meet WCAG 2.0 on new websites. Small businesses are not yet covered by any of these rules. The trend points toward broader requirements, however, and building a site correctly from the start costs much less than correcting it later to comply with a law.
Which accessibility fixes can a small site make in an afternoon?
Four corrections address the most common problems: heading order, contrast and text size, alt text, and form labels.
Why does heading order matter?
Screen reader users often move from heading to heading to understand the structure of a page, in the same way sighted visitors skim. If a page has three H1 headings, jumps from H2 to H5 because the designer preferred the font size, or uses bold paragraphs instead of headings, that navigation no longer works.
The rule is simple: one H1 for the page title, H2 for the main sections and H3 beneath them when needed. Google reads the same structure to determine what the page is about, so one correction produces two benefits.
What contrast and text size are required?
For normal body text, WCAG requires a contrast ratio of at least 4.5 to 1 against the background. Light grey on white usually fails, as does white text placed over a busy photo.
This requirement does not concern only people with low vision. It also helps someone reading a menu on a phone outdoors in full sun, or anyone over fifty who has left their reading glasses in the car. Larger text and stronger contrast benefit all of these visitors. A website that is easy to read has never been a source of complaints.
How should alt text be written?
As though describing the photo to someone over the phone. Alt text is the short description a screen reader reads aloud in place of an image. On a dive site, "IMG_4471" tells a blind visitor nothing. "Green turtle resting on a coral bommie at about 12 metres" conveys what the dive is like. Purely decorative images, such as a divider line or a background texture, can have empty alt text so that they are skipped.
Text should never be placed inside images. If a phone number or opening hours exist only as pixels in a banner, a screen reader cannot read them, Google cannot read them, and a customer cannot copy them into a phone.
Why does every form field need a label?
Because placeholder text is not a label. It disappears as soon as the visitor starts typing, it usually has low contrast, and some screen readers skip it. Each field needs a proper label linked to it in the code. Error messages should explain in words what went wrong, rather than simply turning the field red.
The contact form is where a visitor becomes a customer. It is also where we find the most accessibility problems, a combination that deserves attention.
Does accessibility also help SEO?
Yes, and this argument is often the most persuasive for small business owners. The word "accessibility" tends to lose their attention, while "Google reads your site much as a screen reader does" retains it.
The comparison is a simplification, but a close one. Search engines do not see the design. They read the headings, the link text, the alt text and the words in the HTML. A page built so that a screen reader can interpret it is almost always a page Google can interpret as well.
The benefits extend beyond search. Video captions help deaf visitors, and they also help people watching on the bus with the sound off, an increasingly common situation now that videos play silently by default on Facebook. Clear link text ("see our course prices" rather than "click here") helps screen reader users and anyone skimming the page. This is the curb-cut principle: designing for specific needs benefits everyone.
The SEO argument should not overshadow the primary reason, however. Some customers cannot see well, cannot use a mouse or have difficulty with dense text. That alone justifies the work. Since it is not always sufficient to convince owners, the SEO benefit is a useful complement.
How can a business test its website's accessibility?
With free automated tools, followed by a few simple manual tests. For a quick check, run the homepage and the contact page through WAVE, the free checker from WebAIM. Chrome also offers the Accessibility Developer Tools extension, which adds an audit that can be run on any page. These tools flag issues such as missing alt text, empty links and insufficient contrast.
The manual tests are often more informative:
- Complete the contact form using only the keyboard.
- Turn on VoiceOver on an iPhone, or TalkBack on Android, and listen to the homepage for a minute. The experience is very instructive.
- Zoom the page to 200% in the browser and note what breaks.
- View the site on a phone outdoors, in daylight.
Most of the issues found will be minor: a missing label, a heading out of order, an image of text that should be real text. For a new site, accessibility should be requested from the outset; it costs almost nothing when addressed early. For an existing site, it fits naturally into an SEO audit, given how much the two overlap. When comparing small business websites or themes, we recommend running the keyboard test on the demo before purchasing.
Perfection is not the objective. The objective is for the hours, the phone number and the contact form to work for everyone who wants to reach the business.