Design Template by Anonymous

WCAG Guidelines

Levels of Compliance

There are different levels of WCAG compliance.

• Level A - minimum, not recommended
• Level AA - includes A and AA requirements, recommended
• Level AAA - includes A, AA, and AAA requirements

Not all content can achieve Level AAA making Level AA the recommended level of compliance.

POUR Principles

With the introduction of WCAG 2.2, these guiding principles called POUR are used to refer to requirements. This refers to the 4 principles and 13 overarching guidelines. Earlier versions of WCAG are backwards compatible with WCAG 2.2, meaning developers only need to refer to WCAG 2.2 to meet 2.1 and 2.0.

• Perceivable information and user interface
  • Text alternatives for non-text content
  • Captions and other alternatives for multimedia
  • Content can be presented in different ways
  • Content is easier to see and hear
• Operable user interface and navigation
  • Functionality is available from a keyboard
  • Users have enough time to read and use the content
  • Content does not cause seizures and physical reactions
  • Users can easily navigate, find content, and determine where they are
  • Users can use different input modalities beyond keyboard
• Understandable information and user interface
  • Text is readable and understandable
  • Content appears and operates in predictable ways
  • Users are helped to avoid and correct mistakes
• Robust content and reliable interpretation
  • Content is compatible with current and future user tools

Guide

To learn how to comply with the different levels of compliance and the various principles, W3C provides this detailed guide, How to Meet WCAG (Quick Reference). This guide contains how to comply with each POUR principle.

Overview of AA

For the purposes of this tutorial, there are only some key items from the WCAG guide discussed in other parts of this tutorial. Since AA is the recommended level of compliance, here are a few specific ways to achieve compliance. The numbered guidelines come from the WCAG Guidelines, and list if they are Level A or Level AA compliant.

• Perceivable
  • 1.1.1 Non-text Content (A)
    • Example: Provide alternative text for images
    • This benefits users who are blind or visually impaired, or people who have low wifi access and can't load images.
  • 1.4.4 Resize Text (AA)
    • Example: Use relative font sizes to allow for resizing
    • Larger text is useful for mobile device users since the screens are smaller. Without needing assistive technologies to resize text for the user makes the site flexible for everyone.
• Operable
  • 2.1.1 Keyboard (A)
    • Example: Functionality is available from a keyboard
    • When users use only a keyboard, checking the tab order and including skip links creates an easier navigation experience. Additionally, the ability to use keyboard shortcuts is helpful for everyone.
  • 2.4.7 Focus Visible (AA)
    • Example: Create CSS rule to outline focusable elements when focused
    • If there is visible focus, keyboard users will understand where they are on a page and what actions they can take. Any user, including those with visual impairments, benefit from knowing where they are on a page.
• Understandable
  • 3.1.1 Language of Page (A)
    • Example: Add the "lang" attribute to your html element
    • Having the language listed can help with search engine optimization and increases the support of being able to translate the content into other languages or other forms. For example, people with reading disabilities benefit from receiving content in a form they can understand.
  • 3.2.3 Consistent Navigation (AA)
    • Example: Use consistent labeling and navigation through your site
    • Assitive technology can better navigate sites when the elements are consistent and predictable. If the site is easily navigatable, it's more likely that the a site will retain users since there's less confusion on content.
• Robust
  • 4.1.1 Parsing (A)
    • Example: Use semantic HTML well so assistive technologies can interpret site as intended, like using nav instead of div id="nav"
    • Semantic HTML can also help with search engine optimization, and create a more responsive design that can change when using a mobile device or a laptop, for example.
  • 4.1.3 Status Messages (AA)
    • Example: Add a role, like role="status", and an aria attribute, aria-live="polite", to alert screen reader users there is a non urgent popup
    • Making status messages predictable and clear benefts all users by reducing confusion or interruption of content. Since some users can't receive visual cues, it's important to remember to mark the HTML code clearly.

Examples of Level A and Level AA compliance are given since to achieve Level AA compliance, developers also need to comply with Level A guidelines.