How to Make Your Website AODA Compliant

In 2011, the regulations relating to the Accessibility For Ontarians With Disabilities Act (AODA) started kicking in, and since then the EnvisionUP team has been answering a lot of questions from clients who are concerned about either modifying their websites for website accessibility or confirming that their site is accessible.

Everyone agrees that making sites more accessible is a good thing. It’s just that most people have a hard time understanding what “accessible website development” means.

It’s easy to see why – places like the Ontario government are providing hard to understand guides about website accessible guidelines and requirements. They reference the W3C (World Wide Web Consortium) standards. Have you ever tried clicking on the W3C accessibility standards guide? One of our developers printed it out once, and it makes a telephone book look like a light read. I’ve included these links at the bottom of this post so that you can see for yourself.

Many have been struggling to grasp what exactly the standards are, and the good news is that we’ve now got a handy internal guide that I’ll be sharing with you. The AODA covers a lot of different kinds of standards, but I’ll be focusing strictly on websites.

Timelines

The Ontario government decreed that as of January 1, 2014, all public and private sector organizations need to start making any new websites Level A compliant if they have 50 employees or more. Old sites are grandfathered, but on January 1, 2021 it jumped to Level AA and it’s all sites period, not just new ones being constructed.

Let’s Remember The Accessibility Audience

Before we get into the details, let’s take a moment to put ourselves in the shoes of the people who will be most affected by inaccessible websites. While there are guidelines dealing with buildings and other types of accessibility for the mobility, visually, and hearing impaired, when it comes to your website people will be using their computer. That means most of the guidelines for website accessibility will matter most to those with limited vision or no vision (the hearing impaired will definitely need closed captioning for any videos on your site).

For those with low to no vision, obviously there are different degrees. The person may have trouble with small or low contrast fonts, but there are simple design fixes for those. All keyboards are designed to enlarge website content through the Control and +,-, or 0 keys (on a Mac they’re Command and +, etc.).

But what if the person cannot see at all? These folks will be relying on screen reader tools that basically narrate the website text to them from top to bottom and left to right. There are tons of free options a Google search away, and I encourage you to download one and try using it sometime. It can really make you appreciate what a visually impaired person has to go through. Many users of screen readers full time at home and at work will have a more advanced screen reader system, like JAWS software.

It will also help you understand what your web designers will have to do to structure your website so that screen readers can interpret the content. It will mean some design compromises in favor of website accessibility, especially if you need your site to be responsive to different devices as well (which EnvisionUP recommends). Basically, if you need your website to be fully accessible, your website developer needs to know about it right at the start.

Level A

Here is an overview of the features of a Level A website accessibility (at least those that will be understandable to non-developers):

• Everything needs to be either HTML text, or have a descriptive Alt tag (which is text associated with the image). This will make a difference for buttons – they can’t be graphics anymore.
• Colour cannot be the only way function is determined. For examples, links should be underlined on hover as well as a separate colour).
• Visual or sound cues should not be necessary to continue.
• Form fields need to be clearly labelled. Captchas have to be visually-impaired friendly.
• For any audio or video, alternative content (like a text summary) is provided. Videos need to be closed-captioned.
• Tables are not used for site layout, and any tables in the content are understandable from top to bottom, left to right (see below for examples).
• The site is understandable if narrated from top to bottom, left to right. Content in template columns is OK, for example if your page has a main column plus a separate column for the side navigation.
• Any audio or automatically updating or scrolling content (like banner sliders) can be paused or (where applicable) muted.
• A visually impaired person needs to be able to press the Tab key on their keyboard in order to get through a page.
• A “skip to content” link needs to be added at the start of the header so that people can bypass the main site navigation if they want.
• Don’t randomly change the page in ways that could confuse the user. If clicking on a link results in a change like a popup window, you need to inform the user ahead of time.
• Forms need to help users avoid and correct mistakes. This will mean descriptive label and validation that guides the user to the issue and make it really clear what the problem is.

A more detailed overview of the WCAG Level A guidelines is contained in this PDF.

I’ve provided instructions and examples for website content writers below.

Level AA

Level AA website accessibility level has all the Level A requirements, plus:

• Colour contrast ratio between text and anything else is 4.5 to 1 or better
• There is a way to increase the text size, and the page doesn’t break when this happens (although it generally does not look great).
• No information the user needs is embedded in text – in other words all images are strictly decorative.
• There are multiple ways to find content, like site searches, site maps, and breadcrumbs. You can’t just have the main and side navigation.
• All legal or financial data submitted by the user can be changed or deleted.

A more complete overview of the WCAG Level AA additional guidelines is contained in this PDF.

Level AAA

To be Level AAA accessibility complaint, your website must have met all the Level A and AA requirements, plus the following changes:

• All videos have sign language content.
• Text has a contrast ratio of 7:1.
• There are restrictions on how text content (80 characters or more) can be presented – for example it cannot be fully justified, line spacing has to conform to requirements, etc.
• No content is timing-dependant.
• Nothing flashes more than 3 times.
• Content on the page is organized with headings and subheadings (a good practice anyway).
• Any text that is not understandable by someone with 9 years of primary education has an understandable alternative or definition adjacent to it.
  The user can prevent any content changes like pop up, and if enabled, they can control them.

A more detailed overview of the WCAG Level AAA guidelines is contained in this PDF.

Writing Content For Accessible Websites

Website accessibility is not all about design and layout: how you write your text has a big part to play in how people with visual impairments deal with your content. Here are some guidelines:

1. As a general rule of thumb, content areas must make logical sense when read left to right, top to bottom. The page content area on the left will be read first, and then go to the right hand panel and start top to bottom again.
2. Page titles should be descriptive
3. Use headers and subheaders within your page content to make it more understandable.
4. Feel free to use bulleted and numbered lists if desired.
5. Any images will need to be purely decorative.
6. Content links must be descriptive – the link text itself, when removed from the text around it, must make sense as an instruction:
   Good:
   If you have any questions please contact us, and we’ll be ready to help you out.
   Bad:
   If you have any questions please contact us, and we’ll be ready to help you out.
7. Tables must be easily readable from left to right, top to bottom. Labels within the table must be descriptive. A clear label above the table is theoretically optional but recommended for clarity.In the “Bad” example below, a visually impaired user cannot make sense of the data because much of the information they need is all in the top row, which gets read first, and is not revisited. A sighted person can scan back and forth to make sense of the data.

Bad Table Website Accessibility:

Commute Method	Ottawa Count	Ottawa Percentage	Toronto Count	Toronto Percentage
Car Owners	800,000	80%	6,800,000	63%
Mass Transit Users	90,000	15%	3,690,000	25%
Pedestrians and Cyclists	5,000	3%	45,000	3%

Good Table Website Accessibility:

Ottawa Transit Statistics
Number of People Who Own Cars In Ottawa	800,000	Or, 80%
Number of People Who Use Mass Transit in Ottawa	90,000	Or, 15%
Number of People Who Commute By Foot or By Bicycle in Ottawa	45,000	Or, 3%

Toronto Transit Statistics
Number of People Who Own Cars In Toronto	6,800,000	Or, 63%
Number of People Who Use Mass Transit in Toronto	3,690,000	Or, 25%
Number of People Who Commute By Foot or By Bicycle in Toronto	45,000	Or, 3%

In the good example, all the same information is presented, it just needed to be broken up into separate tables and rearranged.

You’ll find that a lot of the requirements, especially in terms of writing content, will make sense for anyone, visually impaired or not, because they’re reader friendly AND Google-friendly as well.

If you have any experiences or thoughts on site accessibility, go ahead and share them in the comments below.

Resources

• Latest version of the full Website Accessibility Guildelines (WCAG) 2.0
• WebAIM WCAG 2.0 checklist
• Techniques and failures for WCAG.20

Special thanks to Erika McWhorter and developer Gene Foxwell for their awesome research contributions! Erika, in particular, created the summary PDF content.