PushBackLog

WCAG 2.1 AA Compliance

Soft enforcement Complete by PushBackLog team
Topic: accessibility Topic: quality Skillset: frontend Technology: generic Stage: execution Stage: review

WCAG 2.1 AA Compliance

Status: Complete
Category: Accessibility
Default enforcement: Soft
Author: PushBackLog team

Tags

  • Topic: accessibility, quality
  • Skillset: frontend
  • Technology: generic
  • Stage: execution, review

Summary

The Web Content Accessibility Guidelines (WCAG) 2.1 Level AA defines the internationally recognised standard for web accessibility. Meeting AA compliance ensures that people with visual, motor, auditory, and cognitive disabilities can perceive, operate, understand, and robustly use web interfaces. It is also a legal requirement in many jurisdictions.

Rationale

Accessibility is not optional

Approximately 1 in 5 people globally has a disability that affects how they use the web. WCAG 2.1 AA compliance is:

  • A legal requirement in the US (ADA, Section 508), UK (Equality Act 2010), EU (European Accessibility Act), and other jurisdictions
  • A user need: screen reader users, keyboard-only users, users with low vision, and users with cognitive disabilities are among your real users
  • A business asset: accessible products benefit all users (captions help in noisy environments; keyboard navigation helps power users)

The POUR principles

All WCAG 2.1 success criteria map to four principles:

PrincipleWhat it means
PerceivableAll information and UI components must be presentable in ways users can perceive. Color-only cues are invisible to colorblind users. Images without alt text are invisible to screen readers.
OperableAll functionality must be operable. If a user can’t reach a control with a keyboard, they can’t use your product.
UnderstandableInformation and operation must be understandable. Error messages must explain what went wrong and how to fix it.
RobustContent must be robust enough for assistive technologies to interpret reliably. This means valid HTML and correctly-used ARIA.

Level A, AA, and AAA

WCAG 2.1 has three conformance levels: A (minimum), AA (standard target), and AAA (enhanced). AA is the legally-required and industry-expected level. It builds on A by adding requirements for contrast ratios, reflow, text spacing, focus visibility, and captions.

Guidance

High-impact AA requirements

CriterionRequirementWhy it matters
1.1.1 Non-text content (A)All images have descriptive alt text; decorative images have alt=""Screen readers announce images
1.3.1 Info and Relationships (A)Structure conveyed visually is also in the DOM (headings, lists, tables)Screen readers navigate by structure
1.4.3 Contrast (AA)Normal text: 4.5:1 ratio; large text: 3:1 ratioLow-vision users need sufficient contrast
1.4.4 Resize Text (AA)Page usable at 200% browser zoom without horizontal scrollingZoom users must be able to read content
1.4.10 Reflow (AA)Single-column layout at 320px CSS widthMobile and zoom users expect flow, not pinch
2.1.1 Keyboard (A)All functionality accessible by keyboardMotor impairment users rely on keyboard/switch
2.4.3 Focus Order (A)Tab order follows visual/logical orderKeyboard navigation must be predictable
2.4.7 Focus Visible (AA)Keyboard focus indicator is visibleWithout visible focus, keyboard users are lost
3.3.1 Error Identification (A)Errors identify which field and describe the problemUsers can’t fix what they can’t identify
4.1.2 Name, Role, Value (A)All UI components have accessible name, role, and stateThe foundation of assistive technology compatibility

Testing approach

  1. Automated scan (fast, catches ~30-40% of issues): axe-core, Lighthouse, WAVE
  2. Manual keyboard test: tab through every interactive element; confirm focus visibility and all functionality reachable
  3. Screen reader test: VoiceOver (macOS/iOS), NVDA+Firefox (Windows), TalkBack (Android) — navigate by headings, forms, and landmarks
  4. Zoom test: 200% browser zoom; check for horizontal scroll and overlapping content

Examples

Colour contrast check

/* Fails WCAG AA: white text on #4a90d9 is only 3.1:1 */
.button { background: #4a90d9; color: white; }

/* Passes: white text on #1a5fa8 is 5.2:1 */
.button { background: #1a5fa8; color: white; }

Tool: WebAIM Contrast Checker or browser devtools accessibility panel.

Error message with identity and description

<!-- Fails: colour only, no description -->
<input type="email" class="error" />
<span style="color:red">✕</span>

<!-- Passes: identifies field, describes problem, links input to message -->
<label for="email">Email address</label>
<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
/>
<span id="email-error" role="alert">
  Enter a valid email address (for example, name@example.com)
</span>

Anti-patterns

1. Conveying information with colour alone

Red = error, green = success is invisible to users with red-green colour blindness (~8% of males). Always accompany colour with a text label, icon, or pattern.

2. Removing focus styles

/* Commonly seen in CSS resets: destroys keyboard navigation */
:focus { outline: none; }

/* Correct: replace with a visible custom style */
:focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; }

3. Images with missing or poor alt text

alt="image" or alt="photo" provides no information. Describe what the image conveys. If the image is purely decorative, use alt="".

4. Only running automated scans and calling it “compliant”

Automated tools catch 30-40% of WCAG failures. Focus order, screen reader announcement quality, and cognitive clarity require human testing.

Part of the PushBackLog Best Practices Library. Suggest improvements →