Website accessibility basics for Ontario small businesses

Roughly one in five people in Ontario has a disability. That includes permanent conditions, temporary ones — a broken wrist, an eye infection — and situational ones, like reading a screen in bright sunlight or using a phone one-handed while holding a toolbox.

Nearly every accessibility fix helps all three groups at once, which is why the work tends to improve conversion as well as compliance. Bigger tap targets, honest contrast, clear labels and keyboard operability make a site better for everyone.

What the law asks of Ontario businesses

The Accessibility for Ontarians with Disabilities Act sets accessibility standards, including for information and communications. Web content obligations under AODA have applied to designated public sector organisations and to larger private and non-profit organisations, with the standard referenced being WCAG 2.0 Level AA.

Small businesses below the employee threshold have generally not been subject to the specific web content requirement. That is not the same as having no obligation: the Ontario Human Rights Code applies regardless of size, and a website that a customer genuinely cannot use is a service barrier.

The practical position for a small business: you are unlikely to be audited, and you are still building a website that some of your customers cannot use. The fixes below take a day.

The ten fixes that matter most

1. Colour contrast

Light grey text on white is the most common accessibility failure on small business sites, and it is usually a design choice made on a bright monitor indoors.

• Body text needs a contrast ratio of at least 4.5:1 against its background.
• Large text (24px, or 19px bold and above) needs 3:1.
• Buttons, form borders and icons that convey meaning need 3:1.
• Check with the free WebAIM Contrast Checker, or the contrast readout in browser devtools.

2. Do not use colour alone to convey meaning

A red field border to indicate an error is invisible to a colour-blind visitor and to a screen reader. Add text: 'Enter a valid email address.' The same rule applies to required-field markers and to status indicators.

3. Every image needs the right alt text

4. Real headings, in order

Screen reader users navigate by heading, the way a sighted reader skims. One H1 per page, then H2s for sections and H3s beneath them, without skipping levels. Do not use a heading tag because you want big text, and do not use bold text where a heading belongs.

5. Keyboard operability

Some people cannot use a mouse. Put your mouse aside and press Tab repeatedly through your home page.

• Can you reach every link, button and form field?
• Can you see where you are — is there a visible focus outline?
• Does the order make sense, following the visual layout?
• Can you open and close the mobile menu?
• Can you dismiss any popup without a mouse?
• Does focus get trapped anywhere?
• Is there a 'skip to content' link so keyboard users can bypass the navigation?

6. Labels on form fields

<!-- Inaccessible: the label vanishes as soon as typing starts -->
<input type="email" placeholder="Your email">

<!-- Accessible -->
<label for="email">Your email</label>
<input type="email" id="email" name="email" autocomplete="email">

7. Link text that means something on its own

Screen reader users can pull up a list of every link on a page. A list reading 'click here, click here, read more, read more' is useless. Write 'See our local SEO packages' instead.

8. Video and audio

Captions on any video with speech — auto-generated captions edited for accuracy are acceptable and take minutes. Never autoplay audio. Provide a text summary for anything essential that only exists as video.

9. Respect reduced motion

Parallax, autoplaying carousels and large scroll animations trigger nausea and vertigo for people with vestibular disorders. Honour the operating system's reduced-motion setting.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

10. Set the page language

<html lang="en-CA"> tells screen readers which pronunciation rules to use. A one-line fix, and without it English content can be read aloud with the wrong phonetics entirely.

Testing in twenty minutes

1. 01Run an automated checkerThe WAVE browser extension or Lighthouse's accessibility audit. Both are free. They will find missing alt text, contrast failures and unlabelled fields in seconds.
2. 02Do the keyboard walkTab through the whole page. This one test finds more genuine barriers than any automated tool.
3. 03Zoom to 200%Press Ctrl/Cmd and + until you are at 200%. Content should reflow and stay readable, not overlap or get cut off.
4. 04Turn on a screen reader brieflyVoiceOver on Mac (Cmd+F5) or Narrator on Windows (Ctrl+Win+Enter). Listen to your home page for two minutes. It is uncomfortable at first and extremely clarifying.
5. 05Check it in sunlightTake your phone outside. Contrast problems become obvious immediately.

Why it is worth doing anyway

• It is a large customer group. One in five people, plus the people helping them choose.
• It overlaps almost entirely with good mobile design. Bigger targets, better contrast, clearer labels.
• It helps search engines. Headings, alt text, link text and semantic structure are read by crawlers too.
• It reduces support burden. Clear labels and error messages mean fewer confused phone calls.
• It is far cheaper before launch than after. Retrofitting a finished site costs several times what building it correctly costs.