​

WCAG Reference

​

POUR Principles

​

Conformance Levels

​

Success Criteria by Level

​

Level A (Minimum)

​

Perceivable

• All images, icons have text alternatives
• Decorative images use empty alt text

<!-- Informative image -->
<img src="chart.png" alt="Sales increased 40% in Q3">

<!-- Decorative image -->
<img src="border.png" alt="" role="presentation">

• Provide transcript for audio
• Provide audio description or transcript for video

• Captions provided for all prerecorded audio in video

• Audio description or transcript for prerecorded video

• Information, structure, and relationships conveyed through presentation can be programmatically determined

<!-- Use semantic HTML -->
<table>
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
</table>

• Reading order is logical

• Instructions don’t rely solely on shape, size, visual location, orientation, or sound

• Color is not the only visual means of conveying information

<!-- Bad: Only color indicates error -->
<input style="border: 2px solid red">

<!-- Good: Icon + text + color -->
<input aria-invalid="true" aria-describedby="error">
<span id="error" class="error">
  <svg aria-hidden="true"><!-- error icon --></svg>
  Invalid email format
</span>

• Audio playing automatically for more than 3 seconds has a control to pause/stop

​

Operable

• All functionality available via keyboard

• Keyboard focus can be moved away from any component

• Single-key shortcuts can be turned off, remapped, or only active on focus

• User can turn off, adjust, or extend time limits

• Moving, blinking, scrolling, or auto-updating content can be paused

• No content flashes more than 3 times per second

• Mechanism to bypass repeated blocks of content

<a href="#main-content" class="skip-link">Skip to main content</a>

• Web pages have descriptive titles

• Focus order is logical and preserves meaning

• Purpose of each link is clear from link text or context

• Multi-point or path-based gestures have single-pointer alternative

• Functions triggered on down-event can be aborted or undone

• Visible label text is part of accessible name

• Functions triggered by motion have UI alternative

​

Understandable

• Default language of page is programmatically determined

<html lang="en">

• Receiving focus doesn’t trigger unexpected context change

• Changing setting doesn’t automatically cause context change

• Input errors are identified and described in text

• Labels or instructions provided for user input

<label for="email">Email address</label>
<input type="email" id="email" required>

​

Robust

• HTML is well-formed (no duplicate IDs, proper nesting)

• All UI components have accessible name, role, and state

​

Level AA (Standard)

​

Perceivable

• Live audio content has captions

• Audio description provided for all prerecorded video

• Content doesn’t restrict view to single orientation (portrait/landscape)

• Purpose of input fields can be programmatically determined

<input type="email" autocomplete="email">

• Text has minimum 4.5:1 contrast ratio
• Large text (18px+ or 14px+ bold) has 3:1 ratio

• Text can be resized to 200% without loss of content or functionality

• Use actual text instead of images of text (except logos)

• Content reflows at 320px width without horizontal scrolling

• UI components and graphical objects have 3:1 contrast

• Content adapts when users adjust text spacing

• Additional content triggered by hover/focus is dismissible, hoverable, persistent

​

Operable

• More than one way to find pages (navigation, search, sitemap)

• Headings and labels describe topic or purpose

• Keyboard focus indicator is visible

:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

​

Understandable

• Language changes within page are marked

<p>The French word for hello is <span lang="fr">bonjour</span>.</p>

• Navigation is consistent across pages

• Components with same functionality use same labels

• Input error corrections are suggested when known

• Submissions are reversible, verified, or confirmed

​

Robust

• Status messages announced to assistive technologies

<div role="status" aria-live="polite">
  Item added to cart
</div>

​

Level AAA (Enhanced)

​

Key AAA Criteria

• 7:1 for normal text, 4.5:1 for large text

• No images of text (except essential uses)

• All functionality keyboard accessible without timing exceptions

• No time limits on content

• Link purpose determined from link text alone

• Section headings organize content

• Alternative content provided for text requiring advanced reading ability

• All user submissions are reversible, verified, or confirmed

​

Common ARIA Patterns

​

Buttons

<!-- Native button (preferred) -->
<button>Label</button>

<!-- Icon button -->
<button aria-label="Close dialog">×</button>

​

Links

<!-- Descriptive link text -->
<a href="/products">View all products</a>

<!-- External link -->
<a href="https://external.com" target="_blank" rel="noopener">
  External site
  <span class="visually-hidden">(opens in new tab)</span>
</a>

​

Form Fields

<label for="email">Email address</label>
<input type="email" id="email" 
       aria-describedby="email-hint"
       autocomplete="email">
<p id="email-hint">We'll never share your email.</p>

​

Error States

<label for="email">Email</label>
<input type="email" id="email" 
       aria-invalid="true" 
       aria-describedby="email-error">
<p id="email-error" role="alert">
  Please enter a valid email address.
</p>

​

Navigation

<nav aria-label="Main">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

​

Modals

<div role="dialog" 
     aria-modal="true" 
     aria-labelledby="dialog-title"
     aria-describedby="dialog-desc">
  <h2 id="dialog-title">Confirm Action</h2>
  <p id="dialog-desc">Are you sure you want to continue?</p>
  <button>Confirm</button>
  <button>Cancel</button>
</div>

​

Live Regions

<!-- Polite (waits for pause) -->
<div aria-live="polite">Status update</div>

<!-- Assertive (interrupts) -->
<div aria-live="assertive" role="alert">Error message</div>

<!-- Status (implicit polite) -->
<div role="status">Loading complete</div>

​

Testing Tools

​

Screen Reader Commands

​

Testing Checklist

​

Automated Testing

# Lighthouse accessibility audit
npx lighthouse https://example.com --only-categories=accessibility

# axe-core CLI
npm install @axe-core/cli -g
axe https://example.com

​

Manual Testing

• Keyboard navigation: Tab through page, use Enter/Space to activate
• Screen reader: Test with VoiceOver (Mac) or NVDA (Windows)
• Zoom: Content usable at 200% zoom
• High contrast: Test with Windows High Contrast Mode
• Reduced motion: Test with prefers-reduced-motion: reduce
• Focus order: Logical and follows visual order
• Color contrast: Check with Colour Contrast Analyser

​

Common Issues by Impact

​

Critical (Fix Immediately)

1. Missing form labels
2. Missing image alt text
3. Insufficient color contrast
4. Keyboard traps
5. No focus indicators

​

Serious (Fix Before Launch)

1. Missing page language
2. Missing heading structure
3. Non-descriptive link text
4. Auto-playing media
5. Missing skip links

​

Moderate (Fix Soon)

1. Missing ARIA labels on icons
2. Inconsistent navigation
3. Missing error identification
4. Timing without controls
5. Missing landmark regions

​

Additional Resources

• WCAG 2.1 Quick Reference
• WAI-ARIA Authoring Practices
• MDN Web Accessibility
• Deque University
• WebAIM
• A11y Project