WCAG Level AA requirements

The Accessibility for Ontarians with Disabilities Act's (AODA) Information and Communications Standard is part of the Integrated Accessibility Standards Regulation (IASR) that includes requirements for accessible websites and web content.

These requirements follow the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 2.0.

WCAG guidelines are based on four principles, including:

Perceivable: information and user interface components must be presentable to users in ways they can perceive

Operable: user interface components and navigation must be operable

Understandable: information and the operation of user interface must be understandable

Robust: content must be robust enough that is can be interpreted reliably by a wide variety of user agents, including assistive technologies

Currently, there are eleven WCAG 2.0 Level AA requirements that academic libraries must complete by January 1st, 2021. Note - requirements related to "Live Captions" and "Prerecorded Audio Description" are exempt from AODA Information and Communications Standard compliance.  

Each requirement is outlined below with intent and other categories, including examples, benefits, techniques, and resources, to help with understanding and implementation.

The information below is taken from"How to Meet WCAG (Quick Reference)". Level AA requirements are highlighted and include more details that may be of interest to you.

Contrast (minimum)

Resize text

Images of text

Multiple ways

Headings and labels

Focus visible

Language of parts

Consistent navigation

Consistent identification

Error suggestion

Error prevention

Markup validation

Contrast (minimum)

Requirement:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, exceptions:

  • large text (3:1 contrast ratio)
  • decorative text/images
  • logos

Intent: 

  • to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology)

Examples:

Accessibility Before Aesthetics | Marvel Blog - Marvel Blog

Text with almost almost exactly 4.5:1 contrast,

  • gray (#767676) on white
  • purple (#CC21CC) white
  • blue (#000063) on gray (#808080)
  • red (#E60000) on yellow (#FFFF47)

These combinations are not readable for everyone. That is why 4.5:1 is a minimal contrast ratio.

Benefits:

People with low vision often have difficulty reading text that does not contrast with its background. This can be worsened if the person has a colour vision disability that further lowers the contrast.

Providing a minimum luminance contrast ratio between the text and its background can make the text more readable, even if the person does not see the full range of colours. It also works for the rare individuals who see no colour.

Resources:

Resize text

Requirement:

Text can be resized without assistive technology up to 200% (twice the width and height) without loss of content or functionality, exceptions:

  • captions
  • images of text

Intent:

On-screen text can be scaled successfully so that it can be read directly by people with mild visual disabilities, without requiring the use of assistive technology like a screen magnifier.

Examples:

  • A user with a visual disability increases the text size on a web page in a browser from 1 em to 1.2 ems. While the user could not read the text at the smaller size, they can read the larger text. All the information on the page is still displayed when the larger font is used for the text.
  • A Web page contains a control for changing the scale of the page. Selecting different settings changes the layout of the page to use the best design for that scale.
  • A user uses a zoom function in their user agent to change the scale of the content. All the content scales uniformly, and the user agent provides scroll bars, if necessary.

Images of text

Definition:

Images of text display text that is intended to be read:

Requirement:

If the same visual presentation can be made using text alone, an image is not used to present that text, exceptions:

  • image of text can be visually customized to the user's requirements
    • font, size, colour, background can be set
  • a particular presentation of text is essential to the information being conveyed
    • if removed, would fundamentally change the information or functionality of the content

In these situations where images of text must be used, the text alternative must contain the same text presented in the image.

Intent:

If an author can use text to achieve the same visual effect, they should present the information as text rather than using an image. 

Example:

The following image is the logo for the Web Accessibility Initiative. It is not part of a link, so the text alternative is “Web Accessibility Initiative”. There’s no need to mention that it is a logo.

Web Accessibility Initiative

Benefits:

Genuine text is much more flexible than images because it can be resized without losing clarity, and background and text colours can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized.

Multiple ways

Requirement:

More than one way is available to locate a web page within a set of web pages.

Intent:

  • to make it possible for users to locate content in a manner that best meets their needs. Users may find one technique easier or more comprehensible to use than another

Examples:

  • list of related pages
  • table of contents
  • site map
  • site search
  • list of all available web pages

Benefits

  • help people find information faster
  • users with visual disabilities may find it easier to navigate to the correct part of the site by using a search, rather than scrolling through a large navigation bar using a screen magnifier or screen reader
  • people with cognitive disabilities may prefer a table of contents or site map that provides an overview of the site rather than reading and traversing through several web pages
  • some users may prefer to explore the site in a sequential manner, moving from web page to web page to best understand the concepts and layout.
  • individuals with cognitive disabilities may find it easier to use search features than to use a hierarchical navigation scheme that is difficult to understand.

Headings and labels

Requirement:

Describe topic or purpose.

  • does not require headings or labels, requires that if headings or labels are provided, they be descriptive
  • does not require that content acting as a heading or label be correctly marked up or identified
  • does not need to be lengthy — a word, or even a single character, may suffice if it provides an appropriate cue to finding and navigating content

Intent:

  • help users understand what information is contained in web pages and how that information is organized

Benefits:

  • descriptive labels help users identify specific components within the content
  • descriptive headings are especially helpful for users who have disabilities that make reading slow and for people with limited short-term memory —  these people benefit when section titles make it possible to predict what each section contains
  • form input controls with labels that clearly describe the content that is expected to be entered helps users know how to successfully complete the form

Online learning resources:

Focus visible

Requirement:

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Intent:

  • to help a person know which element has the keyboard focus

It must be possible for a person to know which element among multiple elements has the keyboard focus. If there is only one keyboard actionable control on the screen, the requirement would be met because the visual design presents only one keyboard actionable item.

Examples:

  • when text fields receive focus, a vertical bar is displayed in the field, indicating that the user can insert text, OR all of the text is highlighted, indicating that the user can type over the text
  • when a user interface control receives focus, a visible border is displayed around it

Keyboard Accessibility • Accessibility • Purchase College

Benefits:

  • helps anyone who relies on the keyboard to operate the page, by letting them visually determine the component on which keyboard operations will interact at any point in time
  • people with disabilities affecting attention, short term memory, or executive processes benefit by being able to discover where the focus is located

Language of parts

Requirement:

The language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.

Intent:

Ensure that user agents can correctly present content written in multiple languages. This makes it possible for user agents and assistive technologies to present content according to the presentation and pronunciation rules for that language. This applies to graphical browsers as well as screen readers, braille displays, and other voice browsers.

Technique:

The objective of this technique is to clearly identify any changes in language on a page by using the lang attribute.

Language tags use a primary code to indicate the language, and optional sub-codes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of subcodes is optional but may be helpful in certain circumstances.

Example:

Demonstrates the use of the lang attribute to define a quote written in German.

<blockquote lang="de">
  <p>
    Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
    aber der Esel merkte, daß kein guter Wind wehte, lief fort
    und machte sich auf den Weg nach Bremen: dort, meinte er,
    könnte er ja Stadtmusikant werden.
  </p>
</blockquote>

Resources:

Consistent navigation

Requirement:

Navigational mechanisms that are repeated on multiple web pages within a set of web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

Intent:

  • to encourage the use of consistent presentation and layout for users who interact with repeated content within a set of web pages and need to locate specific information or functionality more than once
  • individuals with low vision who use screen magnification to display a small portion of the screen at a time often use visual cues and page boundaries to quickly locate repeated content
  • presenting repeated content in the same order is also important for visual users who use spatial memory or visual cues within the design to locate repeated content

Examples:

  • a consistently located control — a search field is the last item on every web page in a site. Users can quickly locate the search function

  • an expanding navigation menu — a navigation menu includes a list of seven items with links to the main sections of a site. When a user selects one of these items, a list of subnavigation items is inserted into the top-level navigation menu

  • consistently positioned skip navigation controls — a "skip navigation" (or "skip to main content") link is included as the first link on every page in a Web site. The link allows users to quickly bypass heading information and navigational content and begin interacting with the main content of a page

  • skip to navigation link — navigational content is consistently located at the end of each page in a set of web pages. A "skip to navigation" link is consistently located at the beginning of each page so that keyboard users can easily locate it when needed

Benefits:

Ensuring that repeated components occur in the same order on each page of a site helps users become comfortable that they will able to predict where they can find things on each page. This helps users with cognitive, visual, and intellectual disabilities. 

Consistent identification

Requirement:

Components that have the same functionality within a set of web pages are identified consistently.

Intent:

  • ensure consistent identification of functional components that appear repeatedly within a set of web pages. People who use screen readers rely heavily on their familiarity with functions that may appear on different web pages. If identical functions have different labels on different web pages, the site will be considerably more difficult to use. It may also be confusing and increase the cognitive load for people with cognitive disabilities

This consistency extends to the text alternatives. If icons or other non-text items have the same functionality, then their text alternatives should be consistent as well.

Note: Text alternatives that are "consistent" are not always "identical." For instance, a graphical arrow at the bottom of a web page that links to the next web page has the text alternative, "Go to page 4." To avoid repeating this exact text alternative on the next web page, it would be appropriate to say "Go to page 5". These text alternatives would not be identical, but they would be consistent, satisfying the requirement.

Examples:

  • checkmark — functions as "approved", on one page but as "included" on another. Since they serve different functions, they have different text alternatives

  • icons with similar functions — a printer icon labeled "Print receipt" is used in one part of an application, while the same printer icon labeled "Print invoice" is used in another part. The labeling is consistent, but the labels are different to reflect the different functions of the icons, satisfying the requirement

  • example of failure — a submit "search" button on one web page and a "find" button on another web page both have a field to enter a term and list topics in the Web site related to the term submitted. In this case, the buttons have the same functionality but are not labeled consistently

  • example of failure primarily impacting assistive technology users — two buttons with the same functionality visually have the same text, but have been given different aria-label="..." accessible names. For users of assistive technologies, these two buttons will be announced differently and inconsistently

Benefits:

  • People who learn functionality on one page on a site can find the desired functions on other pages if they are present.
  • When non-text content is used in a consistent way to identify components with the same functionality, people with difficulty reading text or detecting text alternatives can interact with the Web without depending on text alternatives.
  • People who depend on text alternatives can have a more predictable experience. They can also search for the component if it has a consistent label on different pages.

Error suggestion

Requirement:

If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.

Intent:

Ensure that users receive appropriate suggestions for correction of an input error if it is possible. The WCAG 2.0 definition of "input error" says that it is "information provided by the user that is not accepted" by the system.

Examples:

  • information that is not accepted may include — information that is required but omitted by the user; information that is provided by the user, but falls outside the required data format or allowed values

  • additional Help for Correcting An Input Error — the result of a form that was not successfully submitted describes an input error in place in the page along with the correct input and offers additional help for the form field that caused the input error

  • Suggestions from a Limited Set of Values — an input field requires that a month name be entered. If the user enters "12," suggestions for correction may include

    • a list of the acceptable values, e.g., "Choose one of: January, February, March, April, May, June, July, August, September, October, November, December."
    • a description of the set of values, e.g., "Please provide the name of the month."
    • the conversion of the input data interpreted as a different month format, e.g., "Do you mean 'December'?"

Techniques:

See "Sufficient Techniques" with multiple links for,

  • Situation A — mandatory field contains no information
  • Situation B — information for a field is required to be in a specific data format
  • Situation C — information provided by the user is required to be one of a limited set of values

Benefits:

Providing information about how to correct input errors allows users who have learning disabilities to fill in a form successfully. Users with visual disabilities understand more easily the nature of the input error and how to correct it. People with motor disabilities can reduce the number of times they need to change an input value.

Error prevention

Requirement:

For web pages that cause legal commitments or financial transactions for the user to occur, modify or delete user-controllable data in data storage systems, or submit user test responses, at least one of the following is true:

  • reversible — submissions are reversible
  • checked — data entered by the user is checked for input errors and the user is provided an opportunity to correct them
  • confirmed — a mechanism is available for reviewing, confirming, and correcting information before finalizing the submission

Note: This guideline will not apply to most library websites; if you want more details, see Understanding Success Criterion 3.3.4: Error Prevention (Legal, Financial, Data)

Markup validation

The WC3's Markup Validation Service checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.

Validate options include:

  • by URL
  • by file upload
  • by direct input

Using the validator helps you fix both errors and warnings.