Understanding the Guidelines

Under each of the four governing principles, guidelines help web content creators meet website accessibility. Each guideline is assigned a level (A, AA, AAA) along with a number of criteria items.  In the examples below, we did not include any AAA guidelines/criteria, as CPABC does not need to adhere to level AAA. 

Examples of Accessibility Guidelines

Governing Principal - Perceivable

  • Guideline 1.2 Time-based Media: Provide alternatives for time-based media (audio or video)
    • ​5 criteria
    • 3 Level A and 2 Level AA 
    • Check: 
      • Important visuals, such as text, are communicated in videos through either the audio track or a text alternative
      • Videos have captions
      • Audio-only and video-only content has an alternative format that provides equivalent information (transcripts)

  • Make it easy for all users to access your video content by including links to alternative formats. Links to audio transcripts, audio described versions of videos, and captions should be easy to locate.
  • Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example – simpler layout) without losing information or structure. 
    • 5 criteria
    • 3 Level A and 2 Level AA 
    • Check:
      • Instructions don’t rely on sensory characteristics (colors, sounds, shape)
      • Visual order matches programmatic order (code order and content order match)
      • Information and relationships are communicated programmatically (are there mismatches between the way information is presented visually and how it is marked up?  For example: heading, tables, input labels (forms)

 

  • Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.  
    • 5 criteria
    • 2 Level A and 3 Level AA
    • Check:
      • Text does not appear as images (if so, images must have full content represented in ALT tag)
      • Content can be resized (text needs to be resized to 200% without losing content or functionality)
      • Text/background colour combinations meet contrast requirements (text has a contrast ratio with background of 4.5:1 for regular text and 3:1 for large (18+pts).  Use a contrast checker to ensure correct numbers.
      • It’s possible to stop audio if it plays automatically
      • Colour alone is not used to communicate information (Example: click on green button below)

Governing Principal - Operable

  • Guideline 2.1 Keyboard Accessible:  Make all functionality available from a keyboard
    • 3 criteria
    • 3 Level A
    • Check:
      • Keyboard focus does not become trapped anywhere on the page/site (Hold down the tab key to move throughout all content – make sure you end up back at the top of the page)
      • All interface components can be operated with a keyboard (navigate through pages using only TAB to move forward and Shift+Tab to move back to ensure all elements receive focus)
  • Guideline 2.2 Enough Time: Provide users enough time to read and use content
    • 2 criteria
    • 2 Level A
    • Check: 
      • It is possible to stop or hide moving, blinking or updating content. (any content that moves, such as carousels, banner videos, and animation, can be either paused or hidden.
      • Time limits are adjustable, extendable, at least 20 hours (not logged out of sessions without warning)
  • Guideline 2.3 Seizures:  Do not design content in a way that is know to cause seizures
    • 1 criteria
    • 1 Level A
    • Check: 
      • No content that flashes more than three times per second
  • Guideline 2.4 Navigable (provide ways to help users navigate, find content, and determine where they are.
    • 7 criteria
    • 4 Level A and 3 Level AA 
    • Check:
      • Focus is visible on interactive elements (when using a keyboard to navigate, can you easily identify where you are on the page?)
      • Headings and labels are descriptive (review headings and labels for clarity)
      • There are at least two ways of locating content on the site (ensure search and site map)
      • Link purpose is clear in text (click here, learn more, need to have more meaningful text)
      • Focus order is logical (use the keyboard to navigate, check that focus order is meaningful)
      • Pages have unique and meaningful titles
      • A skip-to-content exists a the top of a page (ensure user can skip to content without needing to listen to header and primary utilities each time)

Governing Principal - Understandable

  • Guideline 3.1 Readable: Make text content readable and understandable
    • 2 criteria
    • 1 Level A and 1 Level AA 
    • Check:
      • The human 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.
      • Language of page is defined programmatically (EN)
  • Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways
    • 4 criteria
    • 2 Level A and 2 Level AA 
    • Check:
      • Components are identified consistently across the site (drop downs, accordions, banners)
      • Navigation is consistent across pages (ensure primary nav is consistent throughout site)
      • There is not unexpected changes when user provides input
      • There are no unexpected changes when an element receives focus
  • Guideline 3.3 Input Assistance: Help users avoid and correct mistakes
    • 4 criteria
    • 2 Level A and 2 Level AA 
    • Check:
      • Error suggestions are given
      • Labels and instructions are provided
      • Errors are described (especially on forms)

Governing Principal - Robust

  • Guideline 4.1 Compatible: Maximize compatibility with current and future user agents., including technologies
    • 3 criteria
    • 2 Level A and 1 Level AA 
    • Check:
      • HTML markup passes validation 
        • Use a screen reader to interact with our site
        • Learn and understand ARIA
        • Run code through a validation markup tool
  • Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways
    • 4 criteria 
    • 2 Level A and 2 Level AA 
    • Check:
      • Components are identified consistently across the site (drop downs, accordions, banners)
      • Navigation is consistent across pages (ensure primary nav is consistent throughout site)
      • There is not unexpected changes when user provides input
      • There are no unexpected changes when an element receives focus
  • Guideline 3.3 Input Assistance: Help users avoid and correct mistakes
    • 4 criteria
    • 2 Level A and 2 Level AA 
    • Check:
      • Error suggestions are given
      • Labels and instructions are provided
      • Errors are described (especially on fillable forms)

CPABC Web Accessibility
Quick Reference Guide
Quick Reference Guide
A customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2.1 requirements.
See Quick Reference Guide