fbpx
 In Web Design

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 making their web sites accessible.

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

It’s easy to see why – even the Ontario government doesn’t make it really clear what counts as an accessible website. 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.

We’ve 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.

Three Levels of Accessibility: What Do They Mean?

Part of what makes things so complex is that there are three WCAG 2.0 levels:

  • Level A: If your site isn’t up to this level, some people will find your site impossible to use.
  • Level AA: If your site isn’t up to this level, some people will find it difficult to use.
  • Level AAA: If your site isn’t up to this level, some people will not get the full impact.

Want to know what’s involved for each level? I’ll cover that below.

Timelines

The Ontario government has 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 jumps 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 will matter most to the visually impaired (the hearing impaired will definitely need closed captioning for any videos on your site).

For the visually impaired, 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 ones just 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.

It will also help you understand what your web designers will have to do to structure your website so that screen readers can deal with them. It will mean a lot of design compromises, 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 accessible website (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 accessible websites have all the Level A requirement, 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 requirement, 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

Accessible websites are not all about moving parts: 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:

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:

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

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

 

Start typing and press Enter to search

EnvisionUP Remains Open For Business For Your Online Services Needs.> Our COVID-19 Statement
+