Toronto Website Design Accessibility

Making your Website AODA Level AAA Compliant

September 19, 2022

Developing a website that users of all abilities can successfully navigate requires a lot of planning, but is well worth the time, effort, and cost for many businesses. 

The Accessibility for Ontarians with Disabilities Act (AODA) became law in June, 2005. The legislation ensures that there is equal access to the necessities of society for all individuals. In January 2021, websites for companies with more than fifty employees are required to conform with WCAG 2.0 Level AA compliance. Despite this legal requirement, every website should be built with this base standard for optimal user experience. You can learn more about what makes accessibility important and how to achieve base accessibility in our past blog post AODA for your website.

There are some instances where a site requires more than the base AA compliance level. The primary reason for meeting a higher AAA level of accessibility is for legal requirements, but other businesses may simply strive to achieve the best experience for all of their users as a courtesy.

When designing and developing a website to meet the latest AODA Level AAA requirements, planning goes beyond meeting standard accessibility needs. AAA compliance encompasses  all considerations of level A and AA, but also additionally includes unique and advanced guidelines. The major changes from AA that are required to meet AAA compliance are outlined below. 

1. Using ARIA landmarks to identify regions of a page

ARIA landmarks define the section on each page of the site to provide context to the value of each section’s content. ARIA landmarks commonly include:

  • Banner: The main header on the page.
  • Complementary: Any section of the document that supports the main content.
  • Main: The primary content of a page.
  • Navigation: A collection of links for navigating.
  • Search: A search tool.
  • Form: A form.
  • ContentInfo: A region that contains site-wide content, like copyrights and links to privacy statements. Often, this is the footer of a site.

2. Enhanced Contrast Criteria

AA compliance requires strong contrast, while AAA builds on that. A great tool for checking contrast can be found here.

Text and images of text require a 7:1 contrast ratio (instead of the 4.5:1 for AA requirements) except for the following:

  • Large text requires a contrast ratio of at least 4.5:1 (3:1 for AA).
  • Incidental text or images of text that are part of an interface component, are pure decoration, or are not visible to anyone have no contrast requirement.
  • Text that is a part of a logo or a brand name has no contrast requirements.

3. Unique Visual Presentation Elements

For the visual presentation of blocks of text, the following must be completed or achievable by a user mechanism:

  • Foreground and background colours can be selected by the user.
  • Width of content is no more than 80 characters or glyphs.
  • Text is not justified (aligned to both the left and right margins).
  • Line spacing (leading) is at least space-and-a-half within paragraphs and paragraph spacing is at least 1.5 times larger than line spacing.
  • Text can be resized without assistive technology up to 200 percent in a way that does not require horizontal scroll on a full screen window.

4. Images of Text

While AA compliance is more forgiving when it comes to images of text, AAA compliance allows for no exceptions to the rule. Images of text are only allowed for pure decoration or where a particular presentation of text is essential to the information being conveyed (logo or brand names are considered essential).

5. Animation from Interactions

Motion animation that is triggered by user interaction should be limited, and when used should include the ability to disable. The exception to this is if the animation is essential to functionality or the information being delivered. The most common way to achieve this is by using the CSS reduce-motion query to prevent motion.

6. Navigation

Information about the user’s location within a set of pages is available. This is more commonly achieved using:

  • A breadcrumb trail.
  • A sitemap.
  • Indicating current location within navigation.
  • Indicating the current page’s relationship to a larger collection, like dividing the main content within chapters and each page includes the number and title of the chapter.

7. Link Purpose

There is a solution available to describe the purpose of each link, achieved through a variety of approaches including aria-labels, using link text that describes the purpose of the link, and using anchor-link text.

8. Target Size

The size of the target for pointer inputs must be at least 44×44 pixels except:

  • When the target is available through an equivalent link or control on the same page that meets the size criteria.
  • The target is in a sentence or block of text.
  • A particular presentation of the element is essential to the information being conveyed.

9. Unusual Words, Abbreviations and Pronunciation

There is a solution applied to identify specific definitions of abbreviations, words or phrases used in an unusual or restricted way, like jargon or idioms. Solutions include linking to a site glossary and using in-line or tooltip definitions.

10. Help/Support

Providing a help link, contact page, or assistant on the site and providing text instructions at the beginning of a form or set of fields that describe the necessary input.

11. Error Prevention

Where a page requires the user to submit information, at least one of the following is met:

  • Submissions are reversible.
  • Data entered by the user is checked for input errors and the opportunity to correct them, which is most common.
  • A process is available for reviewing, confirming, and modifying content prior to submission.

12. Additional Requirements

There are many additional AAA requirements not covered in detail in this blog, either because they’re unique to certain functional decisions or more directly related to content and less so the web design and development process. These additional rules to meet AAA compliance include:

  • Sign language interpretation provided for all prerecorded audio content in media.
  • Providing extended audio descriptions (prerecorded) for movies.
  • Pre-recorded audio content that contains primarily speech in the foreground requires low or no background audio.
  • Providing an alternative for time based media.
  • Unique requirements for live streaming.
  • No timing or interruptions on essential actions, allowing users to complete activities without any time limit.
  • If a site requires user authentication, ensuring that the user can resume their activity without loss of data after re-authenticating an expired session.
  • Warning users of the duration of any process that can result in data loss due to user inactivity (unless the data is preserved for more than 20 hours without user interaction).
  • Web pages should not contain anything that flashes more than three times per second.
  • Providing a text summary or simplified content when text requires reading ability more than the lower secondary education level.

While AAA compliance isn’t a legal requirement (yet!) it is great to consider accommodating the widest range of users with your services. It is equally important to understand that meeting AAA compliance does come at the expense of some custom functionality and design elements. AAA compliance can restrict certain elements that are synonymous with “modern” web design like buttons, animations, and user-driven interaction.

Have questions about accessibility or making your site compatible? Give us a call!