How to target WCAG 2 AA?

The AA level of compliance is a common target for most organizations because it strikes a balance between accessibility and feasibility.

Here’s a breakdown of what your website should have to comply with WCAG 2 AA:

Four Principles (POUR):

1. Perceivable — Information and user interface components must be presentable to users in ways they can perceive.
2. Operable — User interface components and navigation must be operable.
3. Understandable — Information and the operation of the user interface must be understandable.
4. Robust — Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.

Key AA-Level Requirements:

• Text Alternatives: Provide text alternatives for all non-text content (e.g., alt attributes for images).
• Audio and Video Captions: Provide captions for all pre-recorded audio and video content.
• Adaptable Content: Content must be organized in a way that assists users to perceive it correctly (e.g., proper use of headings and semantic HTML).
• Contrast Ratio: Text and images of text must have a contrast ratio of at least 4.5:1 (3:1 for large text).
• Resizing Text: Text must be resizable up to 200% without loss of content or functionality.
• Non-Text Contrast: Graphical elements (like buttons or charts) must have sufficient contrast against their background.
• Avoid Images of Text: Use text rather than images of text wherever possible, unless the presentation of the text is essential.

Operable

• Keyboard Accessibility: All functionality must be operable through a keyboard interface.
• Focus Order: Ensure a logical and predictable focus order through interactive elements.
• Timeouts: Inform users of time limits and allow them to adjust or disable time limits if necessary.
• Navigable: Provide multiple ways to navigate, such as a site search, breadcrumb trails, or a clear site map.
• Input Modalities: Provide alternatives for non-pointer gestures and interactions.

Understandable

• Readable Content: Use clear and simple language. Ensure that reading levels are appropriate or provide mechanisms to explain complex terms or phrases.
• Predictable Behavior: Ensure that web pages appear and operate in predictable ways (e.g., no sudden context changes when interacting with a control).
• Input Assistance: Provide error identification and suggestions. Labels or instructions must be clear for forms and other input fields.

Robust

• Assistive Technology Compatibility: Use clean and valid code so that assistive technologies (like screen readers) can reliably interpret your content.
• Name, Role, Value: Ensure all UI components have programmatically determinable names, roles, and values for accessibility tools.

Testing Your Website for WCAG 2.0 AA Compliance

Use Automated Tools:

Tools like WAVE, Axe, Lighthouse (in Chrome DevTools), or Accessibility Insights can help detect many issues.