Fundamentals of Accessible Web Design: Specific Requirements for WCAG 2.2 Level AA Success Criteria

In today's digital era, the accessibility of web content has become a crucial benchmark for website quality. The Web Content Accessibility Guidelines (WCAG) 2.2, an internationally recognized standard for accessible web design, aims to ensure that all users, regardless of their physical abilities, can access and use web content equally and conveniently.

This article by Arachne Group Limited provides a detailed analysis of the specific requirements for Level AA success criteria in WCAG 2.2 and explores their practical application in web design.

Recommended Reading: Web Accessibility Guide: What Are the Key Conformance Criteria of WCAG 2.2 Level A?

Fundamentals of Accessible Web Design: Specific Requirements for WCAG 2.2 Level AA Success Criteria

Captions (Live)

Providing captions for all live audio and video content ensures that individuals who are deaf or hard of hearing can understand the content, rather than it being accessible only to those without hearing impairments.

Audio Description (Prerecorded)

When providing video content, an audio description of the visual information must be supplied. This allows individuals who are blind or have low vision to comprehend the content.

Orientation

Content should be viewable and operable in both portrait and landscape orientations, unless a specific display orientation is essential. This ensures compatibility for users with physical disabilities who may have their devices mounted in a fixed position, such as on a wheelchair.

Identify Input Purpose

Utilizing the autocomplete attribute in form fields and pre-filling fields with user-selected values facilitates form completion, particularly aiding users with cognitive disabilities.

Contrast (Minimum)

The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1 between the foreground and background. This enhances readability for users. Logos and purely decorative elements are exempt from this requirement.

Resize Text

Implement a mechanism to allow text resizing up to at least 200% without loss of content or functionality. This assists users with mild visual impairments who may not use assistive technologies like screen magnifiers. Additionally, ensure that built-in browser text zoom functions operate correctly and that Cascading Style Sheets (CSS) are compatible with these zoom features.

Images of Text

Avoid using images of text wherever possible. Assistive technologies like screen readers cannot interpret text within images (relying solely on alt text), and browser text size adjustments do not affect text embedded within images.

Reflow

Employ responsive web design techniques so that when users zoom a page, no information or functionality is lost, and horizontal scrolling is not required.

Non-Text Contrast

All non-text content conveying essential information (e.g., images, charts, buttons, checkboxes, radio buttons, input fields) must have a contrast ratio of at least 3:1 against adjacent colors to improve user identification.

Text Spacing

Avoid using absolute units (e.g., pixels) to define line height for headings (h1, h2). Using relative units (e.g., percentages) ensures that line spacing adjusts proportionally when content is zoomed, preventing text truncation and maintaining readability.

Content on Hover or Focus

For additional content triggered by hover or focus, ensure:

Dismissible: Users can dismiss it without moving the hover/focus (e.g., using the Escape key).

Hoverable: The pointer can be moved over the additional content without it disappearing.

Persistent: The content remains visible until the hover/focus trigger is removed, the user dismisses it, or the information is no longer valid.

Multiple Ways

Provide multiple methods to locate pages within the website, such as a search function, sitemap, or consistent navigation menu. This aids users, including those with learning disabilities or attention deficits, in finding information efficiently.

Headings and Labels

Headings and labels must accurately describe their associated topic or purpose. This is particularly beneficial for users of screen readers.

Focus Visible

Ensure a visible focus indicator is presented when interactive elements (e.g., links, buttons, form fields) receive focus, clearly showing the current keyboard navigation position.

Focus Not Obscured (Minimum)

When a component receives focus, ensure at least a part of the focused item remains visible. This helps keyboard users ascertain their location on the page.

Dragging Movements

For any dragging functionality, provide a simple single-pointer alternative method. Examples include adding arrow buttons (up, down, left, right) for map navigation or up/down buttons for reordering items in a list.

Target Size (Minimum)

Ensure the minimum target size for all interactive elements is 24 by 24 CSS pixels, or sufficient spacing is provided around the target. This minimizes accidental activation and makes controls easier to use.

Language of Parts

Ensure the language of passages or phrases within the content is programmatically determinable. This allows screen readers to correctly pronounce text based on its specified language.

Consistent Navigation

Ensure navigational mechanisms that repeat across multiple web pages appear in the same relative order each time they are used.

Consistent Identification

Components that have the same functionality should be identified consistently across the website. Using different labels for identical functions can confuse users, particularly those relying on screen readers.

Error Suggestion

When an input error is automatically detected, provide suggestions for correction. If suggestions are not provided, users may struggle to identify and rectify the error.

Error Prevention (Legal, Financial, Data)

For web pages that cause legal commitments or financial transactions to occur, or that submit/ modify user-controllable data, ensure submissions are either reversible, checked for errors with correction options, or confirmed before finalization.

Accessible Authentication (Minimum)

Provide an accessible and secure authentication process that does not rely on a cognitive function test, unless at least one of the following is true:

An alternative authentication method not requiring a cognitive test is provided.

Mechanism is available to assist the user in completing the cognitive test.

The cognitive test is to recognize objects or user-provided images/non-text content the user provided to the website.

Status Messages

For status messages (e.g., success/error alerts added to the page but not receiving focus), ensure they are programmatically determined and presented to users of assistive technologies without receiving focus. This can be achieved using ARIA roles (e.g., status, alert) or live regions.

Adhering to WCAG 2.2 Level AA success criteria not only enhances web content accessibility but also improves the overall user experience for everyone. By implementing these guidelines, we can create a more inclusive, usable, and secure web environment, allowing everyone equal access to the benefits of the digital age, while potentially enhancing brand reputation and returns.