AODA Compliance Examples: What It Looks Like in Practice

Images have a text alternative

WCAG 1.1.1 Non-text Content (Level A)

A screen reader reads the alt text out loud. With no alt text it reads the file name, which is rarely poetry.

<img src="IMG_4471.jpg">

<img src="team.jpg" alt="Our three technicians outside the Guelph shop">
<img src="divider.svg" alt="">  <!-- decorative: empty alt -->

Form fields have real labels and clear errors

WCAG 1.3.1, 3.3.1, 3.3.2 (Level A) and 3.3.3 (Level AA)

Placeholder text disappears when you start typing and is often skipped by assistive technology. A red border alone tells a colour-blind visitor nothing.

<input type="email" placeholder="Email">

<label for="email">Email</label>
<input id="email" type="email" aria-invalid="true"
       aria-describedby="email-error">
<p id="email-error">Enter an email address, like name@example.com</p>

Vortio's own contact and enquiry forms work this way: visible labels, the error written under the field and linked to it, and focus moved to the first problem.

Keyboard focus is visible

WCAG 2.4.7 Focus Visible (Level AA) and 2.1.1 Keyboard (Level A)

People who navigate with a keyboard or switch need to see where they are. Removing the outline is the web equivalent of turning off the hallway lights.

button:focus { outline: none; }

button:focus-visible {
  outline: 2px solid #1e1b4b;
  outline-offset: 2px;
}

Text has enough colour contrast

WCAG 1.4.3 Contrast (Minimum), Level AA

Normal text needs a contrast ratio of at least 4.5:1, and large text 3:1. Low-contrast text was found on 83.9 percent of the top million home pages in WebAIM's 2026 scan, the most common failure by a distance.

color: #9ca3af;  /* on white: 2.54:1, fails */

color: #4b5563;  /* on white: 7.56:1, passes */

Check your own colours with the free contrast checker.

Links say where they go

WCAG 2.4.4 Link Purpose (In Context), Level A

Screen reader users often pull up a list of links. Ten links called "click here" is a list of nothing.

<a href="/menu.pdf">Click here</a> for our menu.

<a href="/menu.pdf">Dinner menu (PDF, 2 pages)</a>

Pre-recorded video has captions

WCAG 1.2.2 Captions (Prerecorded), Level A

Captions help people who are deaf or hard of hearing, and everyone watching on a bus with the sound off. Live captions are one of the two criteria Ontario excepts.

<video src="tour.mp4" controls></video>

<video src="tour.mp4" controls>
  <track kind="captions" src="tour.en.vtt"
         srclang="en" label="English" default>
</video>

There is a way to skip the menu

WCAG 2.4.1 Bypass Blocks, Level A

Without it, a keyboard user tabs through every navigation link on every page before reaching the content.

<header>...40 menu links...</header>
<main>...</main>

<a href="#main" class="skip-link">Skip to main content</a>
<header>...</header>
<main id="main" tabindex="-1">...</main>

The page declares its language

WCAG 3.1.1 Language of Page, Level A

It tells a screen reader which voice and pronunciation rules to use. Without it, English can come out with a confused accent.

<html>

<html lang="en-CA">