Web Accessibility WCAG 2026: Complete Compliance Guide

Web accessibility isn't optional—it's essential. In 2026, WCAG 2.2 guidelines are the standard, and compliance is both a legal requirement and a moral imperative. This comprehensive guide covers everything developers need to know about implementing accessibility in modern web applications.

Understanding WCAG 2.2

The Four Principles (POUR)

Perceivable: Information must be presentable to users in ways they can perceive
Operable: User interface components must be operable
Understandable: Information and operation must be understandable
Robust: Content must be robust enough to be interpreted by assistive technologies

Conformance Levels

Level A: Minimum accessibility (must have)
Level AA: Standard compliance (should have)
Level AAA: Enhanced accessibility (nice to have)

Essential Accessibility Features

1. Semantic HTML

<!-- ❌ Bad: Non-semantic divs -->
<div class="nav">
  <div class="link" @click="navigate">Home</div>
</div>

<!-- ✅ Good: Semantic HTML -->
<nav>
  <ul>
    <li>
      <NuxtLink to="/">Home</NuxtLink>
    </li>
  </ul>
</nav>

2. Keyboard Navigation

<script setup lang="ts">
const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === "Enter" || event.key === " ") {
    event.preventDefault()
    // Handle action
  }
}
</script>

<template>
  <!-- Keyboard accessible button -->
  <button @click="handleClick" @keydown="handleKeyDown" :tabindex="0">
    Click Me
  </button>
</template>

3. Focus Management

<script setup lang="ts">
const focusFirstError = () => {
  const firstError = document.querySelector("[data-error]")
  if (firstError) {
    firstError.focus()
  }
}

// Trap focus in modals
const useFocusTrap = (element: Ref<HTMLElement | null>) => {
  const focusableElements = element.value?.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
  )

  const firstElement = focusableElements?.[0]
  const lastElement = focusableElements?.[focusableElements.length - 1]

  element.value?.addEventListener("keydown", (e) => {
    if (
      e.key === "Tab" &&
      e.shiftKey &&
      document.activeElement === firstElement
    ) {
      e.preventDefault()
      lastElement?.focus()
    }
  })
}
</script>

Implementing ARIA Attributes

1. ARIA Labels

<template>
  <!-- Label for icon buttons -->
  <button aria-label="Close modal">
    <Icon name="close" />
  </button>

  <!-- Label for form inputs -->
  <input type="text" aria-label="Search" aria-describedby="search-help" />
  <p id="search-help">Enter keywords to search</p>
</template>

2. Live Regions

<template>
  <!-- Announce dynamic content -->
  <div role="status" aria-live="polite" aria-atomic="true">
    {{ notification }}
  </div>

  <!-- Assertive for urgent updates -->
  <div role="alert" aria-live="assertive">
    {{ errorMessage }}
  </div>
</template>

3. Complex Widgets

<script setup lang="ts">
const tabs = ref([
  { id: "tab1", label: "Tab 1", active: true },
  { id: "tab2", label: "Tab 2", active: false },
])

const selectTab = (index: number) => {
  tabs.value.forEach((tab, i) => {
    tab.active = i === index
  })
}
</script>

<template>
  <div role="tablist">
    <button
      v-for="(tab, index) in tabs"
      :key="tab.id"
      role="tab"
      :aria-selected="tab.active"
      :aria-controls="`panel-${index}`"
      :id="`tab-${index}`"
      @click="selectTab(index)"
    >
      {{ tab.label }}
    </button>
  </div>

  <div
    v-for="(tab, index) in tabs"
    :key="tab.id"
    role="tabpanel"
    :id="`panel-${index}`"
    :aria-labelledby="`tab-${index}`"
    v-show="tab.active"
  >
    <slot :name="`panel-${index}`" />
  </div>
</template>

Color and Contrast

1. Minimum Contrast Ratios

/* WCAG 2.2 Requirements */
.text-normal {
  color: #1a1a1a; /* 4.5:1 minimum on white */
}

.text-large {
  color: #595959; /* 3:1 minimum for large text (18pt+) */
}

.ui-components {
  border-color: #767676; /* 3:1 minimum */
}

2. Don't Rely on Color Alone

<!-- ❌ Bad: Color only -->
<span class="text-red">Error</span>

<!-- ✅ Good: Color + icon + text -->
<span class="flex items-center gap-2">
  <Icon name="error" />
  <span>Error: Invalid input</span>
</span>

3. Dark Mode Accessibility

/* Ensure contrast in both modes */
:root {
  --text-primary: #1a1a1a;
  --background: #ffffff;
}

.dark {
  --text-primary: #f5f5f5;
  --background: #1a1a1a;
}

/* Test contrast ratios */
.text {
  color: var(--text-primary);
  background: var(--background);
  /* Ensure 4.5:1 ratio */
}

Form Accessibility

1. Labels and Error Messages

<template>
  <form>
    <div class="form-group">
      <label for="email">
        Email Address
        <span class="required" aria-hidden="true">*</span>
      </label>

      <input
        id="email"
        type="email"
        required
        aria-required="true"
        aria-invalid="false"
        aria-describedby="email-error"
      />

      <p id="email-error" role="alert" class="error-message">
        Please enter a valid email
      </p>
    </div>
  </form>
</template>

2. Fieldsets and Legends

<template>
  <fieldset>
    <legend>Shipping Address</legend>

    <div>
      <label for="street">Street</label>
      <input id="street" type="text" />
    </div>

    <div>
      <label for="city">City</label>
      <input id="city" type="text" />
    </div>
  </fieldset>
</template>

Media Accessibility

1. Images

<template>
  <!-- Decorative image -->
  <img src="decoration.png" alt="" role="presentation" />

  <!-- Informative image -->
  <img
    src="chart.png"
    alt="Bar chart showing sales increase of 25% in Q4 2025"
  />

  <!-- Complex image with description -->
  <figure>
    <img src="infographic.png" alt="See infographic description below" />
    <figcaption>
      <p class="sr-only">Detailed description of the infographic content...</p>
    </figcaption>
  </figure>
</template>

2. Video and Audio

<template>
  <video controls>
    <source src="video.mp4" type="video/mp4" />
    <track kind="captions" src="captions.vtt" srclang="en" label="English" />
    <track kind="descriptions" src="descriptions.vtt" srclang="en" />
  </video>
</template>

Testing Accessibility

1. Automated Testing

// vitest.config.ts
import { defineVitestConfig } from "@nuxt/test-utils/config"

export default defineVitestConfig({
  test: {
    setupFiles: ["./test/setup.ts"],
  },
})

// test/accessibility.test.ts
import { axe, toHaveNoViolations } from "jest-axe"
import { mount } from "@vue/test-utils"
import MyComponent from "@/components/MyComponent.vue"

expect.extend(toHaveNoViolations)

test("should not have accessibility violations", async () => {
  const wrapper = mount(MyComponent)
  const results = await axe(wrapper.element)
  expect(results).toHaveNoViolations()
})

2. Manual Testing Checklist

// Test scenarios
const accessibilityTests = [
  "Navigate using keyboard only",
  "Test with screen reader (NVDA, JAWS, VoiceOver)",
  "Check color contrast",
  "Verify focus indicators",
  "Test zoom to 200%",
  "Validate with WAVE tool",
  "Test with browser accessibility tools",
]

3. CI/CD Integration

# .github/workflows/accessibility.yml
name: Accessibility Testing

on: [push]

jobs:
  a11y:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Install dependencies
        run: npm ci

      - name: Run accessibility tests
        run: npm run test:a11y

      - name: Lighthouse CI
        run: npx @lhci/cli@latest autorun

Common Accessibility Mistakes

1. Missing Skip Links

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

<main id="main">
  <!-- Main content -->
</main>

2. Improper Heading Structure

<!-- ❌ Bad: Skipped heading levels -->
<h1>Main Title</h1>
<h3>Subsection</h3>

<!-- ✅ Good: Sequential headings -->
<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

3. Auto-playing Media

<!-- ❌ Bad: Auto-playing video -->
<video autoplay />

<!-- ✅ Good: User-controlled -->
<video controls />

Accessibility Tools

1. Browser Extensions

WAVE: Web accessibility evaluation
axe DevTools: Automated testing
Lighthouse: Performance and accessibility
Color Contrast Analyzer: Check contrast ratios

2. Screen Readers

NVDA (Windows, free)
JAWS (Windows, paid)
VoiceOver (macOS/iOS, free)
TalkBack (Android, free)

3. Testing Tools

# Automated testing
npm install -g @axe-core/cli
axe-cli http://localhost:3000

# Color contrast
npm install -g color-contrast-checker

# Accessibility linting
npm install -g eslint-plugin-jsx-a11y

Legal Requirements

1. Compliance Standards

ADA (Americans with Disabilities Act)
Section 508 (US Federal)
EN 301 549 (European Union)
AODA (Ontario, Canada)

2. Documentation

## Accessibility Statement

We are committed to ensuring digital accessibility.
We conform to WCAG 2.2 Level AA standards.

### Contact

If you experience barriers, contact us:

- Email: accessibility@example.com
- Phone: +1-555-123-4567

Conclusion

Web accessibility is not just about compliance—it's about creating inclusive experiences for everyone. By implementing WCAG 2.2 guidelines, you ensure your applications are usable by people with disabilities while improving overall usability.

Start with semantic HTML, keyboard navigation, and proper ARIA attributes. Then expand to comprehensive testing and continuous monitoring. Remember: accessibility is an ongoing commitment, not a one-time fix.

Ready to improve accessibility? Run an automated audit with axe or Lighthouse, then fix the top 3 issues. Every improvement matters.

Section

Subsection

\n\n\n