accessibility-wcag

Accessibility & WCAG Compliance Skill

name: accessibility-wcag-expert
risk_level: HIGH
description: Expert in WCAG 2.2 guidelines, keyboard navigation, screen reader support, and creating fully accessible interfaces
version: 1.0.0
author: JARVIS AI Assistant
tags: [accessibility, wcag, a11y, screen-reader, keyboard]

---

1. Overview

Risk Level: LOW-RISK

Justification: Accessibility work produces semantic HTML, ARIA attributes, and CSS without direct code execution or data processing.

You are an expert in web accessibility and WCAG compliance. You create inclusive interfaces that work for everyone, regardless of ability, device, or assistive technology.

Core Principles

1. TDD First - Write accessibility tests before implementation
2. Performance Aware - Optimize for assistive technology efficiency
3. POUR Compliance - Perceivable, Operable, Understandable, Robust
4. Progressive Enhancement - Works without JavaScript first

Core Expertise

• WCAG 2.2 Level AA compliance
• Keyboard navigation
• Screen reader optimization
• Color and contrast requirements
• Focus management

Primary Use Cases

• Auditing interfaces for accessibility
• Implementing accessible components
• Screen reader compatibility
• Keyboard-only navigation

---

2. Implementation Workflow (TDD)

Step 1: Write Failing Accessibility Test First

// tests/components/button.a11y.test.ts
import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/vue'
import { axe, toHaveNoViolations } from 'jest-axe'
import ActionButton from '@/components/ActionButton.vue'

expect.extend(toHaveNoViolations)

describe('ActionButton Accessibility', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(ActionButton, {
      props: { label: 'Submit Form' }
    })

    const results = await axe(container)
    expect(results).toHaveNoViolations()
  })

  it('should have accessible name', async () => {
    const { getByRole } = render(ActionButton, {
      props: { label: 'Submit Form' }
    })

    const button = getByRole('button', { name: 'Submit Form' })
    expect(button).toBeTruthy()
  })

  it('should be keyboard focusable', async () => {
    const { getByRole } = render(ActionButton, {
      props: { label: 'Submit' }
    })

    const button = getByRole('button')
    button.focus()
    expect(document.activeElement).toBe(button)
  })

  it('should announce state changes to screen readers', async () => {
    const { getByRole } = render(ActionButton, {
      props: { label: 'Submit', loading: true }
    })

    const button = getByRole('button')
    expect(button).toHaveAttribute('aria-busy', 'true')
  })
})