Accessibility Implementation

Accessibility Implementation Skill — Frontend Developer

Overview

This skill provides comprehensive guidance for implementing accessible web content following WCAG 2.1 AA standards. It covers semantic HTML, ARIA attributes, keyboard navigation, screen reader support, and accessibility testing following CPACC certification standards.

When to Use

Use this skill when:

• Implementing accessible web interfaces
• Ensuring WCAG 2.1 AA compliance
• Adding ARIA attributes to components
• Implementing keyboard navigation
• Testing with screen readers
• Creating accessible forms
• Implementing accessible tables
• Adding accessible color contrast
• Creating accessible navigation
• Implementing accessible modal dialogs
• Creating accessible charts and graphs
• Ensuring accessible error messages
• Implementing accessible focus management
• Creating accessible landing pages
• Testing with accessibility tools
• Conducting accessibility audits
• Implementing skip navigation links
• Creating accessible PDFs
• Ensuring accessible video content
• Implementing accessible print styles
• Creating accessible email templates
• Implementing accessible mobile interfaces
• Ensuring accessible dark mode

Do NOT use this skill when:

• Writing backend business logic (use domain-driven skill)
• Designing database schemas (use database-design skill)
• Writing API endpoint specifications (use api-design skill)
• Performing security audits (use security-auditor skill)
• Writing SQL queries (use sql-best-practices skill)
• Designing multi-page website layouts (use design-system skill)
• Analyzing deployment configurations (use deployment skill)
• Writing documentation (use documentation-best-practices skill)

WCAG 2.1 AA Principles

Perceivable

┌─────────────────────────────────────────────────────────────┐
│              Perceivable Principles                         │
├─────────────────────────────────────────────────────────────┤
│  1.1 Text Alternatives - Provide text alternatives for      │
│      non-text content                                       │
│  1.2 Time-based Media - Provide alternatives for time-based │
│      media                                                  │
│  1.3 Adaptable - Create content that can be presented in    │
│      different ways without losing meaning                 │
│  1.4 Distinguishable - Make it easier for users to see and  │
│      hear content                                           │
└─────────────────────────────────────────────────────────────┘

Operable

┌─────────────────────────────────────────────────────────────┐
│              Operable Principles                            │
├─────────────────────────────────────────────────────────────┤
│  2.1 Keyboard Accessible - Make all functionality available  │
│      from a keyboard                                        │
│  2.2 Enough Time - Provide users enough time to read and    │
│      use content                                            │
│  2.3 Seizures and Physical Reactions - Do not design content │
│      in a way that causes seizures                          │
│  2.4 Navigable - Make it easier for users to find content   │
│      and navigate                                           │
└─────────────────────────────────────────────────────────────┘

Understandable

┌─────────────────────────────────────────────────────────────┐
│              Understandable Principles                      │
├─────────────────────────────────────────────────────────────┤
│  3.1 Readable - Make text readable and understandable       │
│  3.2 Predictable - Make Web pages appear and operate in     │
│      predictable ways                                       │
│  3.3 Input Assistance - Help users avoid and correct mistakes│
└─────────────────────────────────────────────────────────────┘

Robust

┌─────────────────────────────────────────────────────────────┐
│              Robust Principles                              │
├─────────────────────────────────────────────────────────────┤
│  4.1 Compatible - Maximize compatibility with current and   │
│      future user tools                                      │
└─────────────────────────────────────────────────────────────┘

Semantic HTML

Basic Elements

Site navigation
Main content
Navigation links
Article content
Section content
Sidebar content
Footer content

Site navigation
Main content
Navigation links
Article content
Section content
Sidebar content
Footer content

Interactive Elements

Click me
Link text

  Option 1

Click me
Link text

ARIA Attributes

Landmark Roles

...
...
...
...
...

...
...

Live Regions

  

  

...

Form Accessibility

Email address

We'll never share your email

  Please enter a valid email address

Keyboard Navigation

Focus Management

// ✅ Good: Proper focus management
function openModal() {
  modal.style.display = 'block';
  modal.querySelector('input').focus();
}

function closeModal() {
  modal.style.display = 'none';
  openButton.focus();
}

// Trap focus in modal
function trapFocus(event) {
  if (event.key === 'Tab') {
    const focusableElements = modal.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const first = focusableElements[0];
    const last = focusableElements[focusableElements.length - 1];

    if (event.shiftKey && document.activeElement === first) {
      event.preventDefault();
      last.focus();
    } else if (!event.shiftKey && document.activeElement === last) {
      event.preventDefault();
      first.focus();
    }
  }
}

Skip Links

Skip to main content

  
    Skip to main content
    Skip to footer
  

...
...

Color Contrast

WCAG Contrast Requirements

┌─────────────────────────────────────────────────────────────┐
│              Color Contrast Requirements                    │
├─────────────────────────────────────────────────────────────┤
│  Normal Text (14pt/18px bold): 4.5:1 ratio                 │
│  Large Text (18pt/24px or 14pt/18px bold): 3:1 ratio       │
│  UI Components: 3:1 ratio                                   │
│  Graphics: No minimum (but distinguishable)                 │
└─────────────────────────────────────────────────────────────┘

Contrast Checker

/* ✅ Good: Sufficient contrast */
.text-primary {
  color: #1a1a1a;
  background-color: #ffffff; /* 16.11:1 ratio */
}

.text-secondary {
  color: #333333;
  background-color: #f5f5f5; /* 12.63:1 ratio */
}

/* ❌ Bad: Insufficient contrast */
.text-muted {
  color: #888888;
  background-color: #ffffff; /* 3.99:1 ratio - fails AA */
}

Testing Tools

Automated Testing

┌─────────────────────────────────────────────────────────────┐
│              Accessibility Testing Tools                    │
├─────────────────────────────────────────────────────────────┤
│  axe-core:      Automated accessibility testing             │
│  WAVE:          Web Accessibility Evaluation Tool           │
│  Lighthouse:    Chrome DevTools accessibility audit         │
│  Accessibility Insights: Microsoft tool for Windows         │
│  Screen Readers: NVDA, JAWS, VoiceOver, TalkBack           │
└─────────────────────────────────────────────────────────────┘

Manual Testing Checklist

[ ] All interactive elements are keyboard accessible
[ ] Focus is visible and logical
[ ] Screen reader announces content correctly
[ ] Color contrast meets AA requirements
[ ] Form labels are associated with inputs
[ ] Error messages are announced
[ ] Skip links work correctly
[ ] Tab order is logical
[ ] Hover effects don't rely on hover alone
[ ] Animations can be paused

Real-World Impact

Before this skill:

• Inaccessible web content
• Keyboard users can't navigate
• Screen reader users miss content
• Color contrast issues
• Form accessibility problems

After this skill:

• Fully accessible web content
• Keyboard navigation works
• Screen readers announce correctly
• Sufficient color contrast
• Accessible forms and error messages

Cross-References

• design-system - For accessible design patterns
• frontend-philosophy - For inclusive design principles
• testing-strategy - For accessibility testing

References

• WCAG 2.1 Guidelines
• W3C Accessibility Standards
• CPACC Certification
• ARIA Authoring Practices

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Omar-Obando
• Source: Omar-Obando/qwen-orchestrator
• License: MIT
• Homepage: https://qwen.ai/qwencode

Install and usage instructions live in the source repository linked above.