-
-
+
+
-
- Panel 1 content
-
- `,
-
- // Accessible form
+
Content
`,
+
form: `
-
- `
+
+
+
`
};
```
### 5. Manual Testing Checklist
-Create comprehensive manual testing guides:
-
-**Manual Accessibility Checklist**
```markdown
-## Manual Accessibility Testing Checklist
+## Manual Accessibility Testing
-### 1. Keyboard Navigation
-- [ ] Can access all interactive elements using Tab key
-- [ ] Can activate buttons with Enter/Space
-- [ ] Can navigate dropdowns with arrow keys
-- [ ] Can escape modals with Esc key
-- [ ] Focus indicator is always visible
-- [ ] No keyboard traps exist
-- [ ] Skip links work correctly
-- [ ] Tab order is logical
+### Keyboard Navigation
+- [ ] All interactive elements accessible via Tab
+- [ ] Buttons activate with Enter/Space
+- [ ] Esc key closes modals
+- [ ] Focus indicator always visible
+- [ ] No keyboard traps
+- [ ] Logical tab order
-### 2. Screen Reader Testing
-- [ ] Page title is descriptive
+### Screen Reader
+- [ ] Page title descriptive
- [ ] Headings create logical outline
-- [ ] All images have appropriate alt text
+- [ ] Images have alt text
- [ ] Form fields have labels
-- [ ] Error messages are announced
-- [ ] Dynamic content updates are announced
-- [ ] Tables have proper headers
-- [ ] Lists use semantic markup
+- [ ] Error messages announced
+- [ ] Dynamic updates announced
-### 3. Visual Testing
-- [ ] Text can be resized to 200% without loss of functionality
-- [ ] Color is not the only means of conveying information
+### Visual
+- [ ] Text resizes to 200% without loss
+- [ ] Color not sole means of info
- [ ] Focus indicators have sufficient contrast
-- [ ] Content reflows at 320px width
-- [ ] No horizontal scrolling at 320px
-- [ ] Animations can be paused/stopped
-- [ ] No content flashes more than 3 times per second
+- [ ] Content reflows at 320px
+- [ ] Animations can be paused
-### 4. Cognitive Accessibility
-- [ ] Instructions are clear and simple
-- [ ] Error messages are helpful
-- [ ] Forms can be completed without time limits
-- [ ] Content is organized logically
-- [ ] Navigation is consistent
-- [ ] Important actions are reversible
-- [ ] Help is available when needed
-
-### 5. Mobile Accessibility
-- [ ] Touch targets are at least 44x44 pixels
-- [ ] Gestures have alternatives
-- [ ] Device orientation works in both modes
-- [ ] Virtual keyboard doesn't obscure inputs
-- [ ] Pinch zoom is not disabled
+### Cognitive
+- [ ] Instructions clear and simple
+- [ ] Error messages helpful
+- [ ] No time limits on forms
+- [ ] Navigation consistent
+- [ ] Important actions reversible
```
-### 6. Remediation Strategies
+### 6. Remediation Examples
-Provide fixes for common issues:
-
-**Accessibility Fixes**
```javascript
-// accessibility-fixes.js
-class AccessibilityRemediator {
- applyFixes(violations) {
- violations.forEach(violation => {
- switch(violation.id) {
- case 'image-alt':
- this.fixMissingAltText(violation.nodes);
- break;
- case 'label':
- this.fixMissingLabels(violation.nodes);
- break;
- case 'color-contrast':
- this.fixColorContrast(violation.nodes);
- break;
- case 'heading-order':
- this.fixHeadingOrder(violation.nodes);
- break;
- case 'landmark-one-main':
- this.fixLandmarks(violation.nodes);
- break;
- default:
- console.warn(`No automatic fix for: ${violation.id}`);
- }
- });
- }
-
- fixMissingAltText(nodes) {
- nodes.forEach(node => {
- const element = document.querySelector(node.target[0]);
- if (element && element.tagName === 'IMG') {
- // Decorative image
- if (this.isDecorativeImage(element)) {
- element.setAttribute('alt', '');
- element.setAttribute('role', 'presentation');
- } else {
- // Generate meaningful alt text
- const altText = this.generateAltText(element);
- element.setAttribute('alt', altText);
- }
- }
- });
- }
-
- fixMissingLabels(nodes) {
- nodes.forEach(node => {
- const element = document.querySelector(node.target[0]);
- if (element && ['INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName)) {
- // Try to find nearby text
- const nearbyText = this.findNearbyLabelText(element);
- if (nearbyText) {
- const label = document.createElement('label');
- label.textContent = nearbyText;
- label.setAttribute('for', element.id || this.generateId());
- element.id = element.id || label.getAttribute('for');
- element.parentNode.insertBefore(label, element);
- } else {
- // Use placeholder as aria-label
- if (element.placeholder) {
- element.setAttribute('aria-label', element.placeholder);
- }
- }
- }
- });
- }
-
- fixColorContrast(nodes) {
- nodes.forEach(node => {
- const element = document.querySelector(node.target[0]);
- if (element) {
- const styles = window.getComputedStyle(element);
- const foreground = styles.color;
- const background = this.getBackgroundColor(element);
-
- // Apply high contrast fixes
- element.style.setProperty('color', 'var(--high-contrast-text, #000)', 'important');
- element.style.setProperty('background-color', 'var(--high-contrast-bg, #fff)', 'important');
- }
- });
- }
-
- generateAltText(img) {
- // Use various strategies to generate alt text
- const strategies = [
- () => img.title,
- () => img.getAttribute('data-alt'),
- () => this.extractFromFilename(img.src),
- () => this.extractFromSurroundingText(img),
- () => 'Image'
- ];
-
- for (const strategy of strategies) {
- const text = strategy();
- if (text && text.trim()) {
- return text.trim();
- }
- }
-
- return 'Image';
- }
-}
+// Fix missing alt text
+document.querySelectorAll('img:not([alt])').forEach(img => {
+ const isDecorative = img.role === 'presentation' || img.closest('[role="presentation"]');
+ img.setAttribute('alt', isDecorative ? '' : img.title || 'Image');
+});
-// React accessibility components
-import React from 'react';
+// Fix missing labels
+document.querySelectorAll('input:not([aria-label]):not([id])').forEach(input => {
+ if (input.placeholder) {
+ input.setAttribute('aria-label', input.placeholder);
+ }
+});
-// Accessible button component
-const AccessibleButton = ({
- children,
- onClick,
- ariaLabel,
- ariaPressed,
- disabled,
- ...props
-}) => {
- return (
-
- );
-};
+// React accessible components
+const AccessibleButton = ({ children, onClick, ariaLabel, ...props }) => (
+
+);
-// Live region for announcements
-const LiveRegion = ({ message, politeness = 'polite' }) => {
- return (
-
- {message}
-
- );
-};
-
-// Skip navigation component
-const SkipNav = () => {
- return (
-
- Skip to main content
-
- );
-};
+const LiveRegion = ({ message, politeness = 'polite' }) => (
+
+ {message}
+
+);
```
### 7. CI/CD Integration
-Integrate accessibility testing into pipelines:
-
-**CI/CD Accessibility Pipeline**
```yaml
# .github/workflows/accessibility.yml
name: Accessibility Tests
@@ -1033,198 +394,90 @@ on: [push, pull_request]
jobs:
a11y-tests:
runs-on: ubuntu-latest
-
+
steps:
- uses: actions/checkout@v3
-
+
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
-
- - name: Install dependencies
- run: npm ci
-
- - name: Build application
- run: npm run build
-
+
+ - name: Install and build
+ run: |
+ npm ci
+ npm run build
+
- name: Start server
run: |
npm start &
npx wait-on http://localhost:3000
-
- - name: Run axe accessibility tests
+
+ - name: Run axe tests
run: npm run test:a11y
-
- - name: Run pa11y tests
- run: |
- npx pa11y http://localhost:3000 \
- --reporter cli \
- --standard WCAG2AA \
- --threshold 0
-
- - name: Run Lighthouse CI
- run: |
- npm install -g @lhci/cli
- lhci autorun --config=lighthouserc.json
-
- - name: Upload accessibility report
+
+ - name: Run pa11y
+ run: npx pa11y http://localhost:3000 --standard WCAG2AA --threshold 0
+
+ - name: Upload report
uses: actions/upload-artifact@v3
if: always()
with:
- name: accessibility-report
- path: |
- a11y-report.html
- lighthouse-report.html
+ name: a11y-report
+ path: a11y-report.html
```
-**Pre-commit Hook**
-```bash
-#!/bin/bash
-# .husky/pre-commit
+### 8. Reporting
-# Run accessibility tests on changed components
-CHANGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(jsx?|tsx?)$')
-
-if [ -n "$CHANGED_FILES" ]; then
- echo "Running accessibility tests on changed files..."
- npm run test:a11y -- $CHANGED_FILES
-
- if [ $? -ne 0 ]; then
- echo "❌ Accessibility tests failed. Please fix issues before committing."
- exit 1
- fi
-fi
-```
-
-### 8. Accessibility Reporting
-
-Generate comprehensive reports:
-
-**Report Generator**
```javascript
-// accessibility-report-generator.js
+// report-generator.js
class AccessibilityReportGenerator {
generateHTMLReport(auditResults) {
- const html = `
+ return `
-
-
Accessibility Audit Report
+
Accessibility Audit
Accessibility Audit Report
Generated: ${new Date().toLocaleString()}
-
+
Summary
-
- Score: ${auditResults.summary.score}/100
-
-
WCAG ${auditResults.summary.wcagCompliance} Compliance
-
-
Violations by Impact
-
-
- | Impact |
- Count |
-
- ${Object.entries(auditResults.summary.violationsByImpact)
- .map(([impact, count]) => `
-
- | ${impact} |
- ${count} |
-
- `).join('')}
-
+
${auditResults.score}/100
+
Total Violations: ${auditResults.violations.length}
-
-
Detailed Violations
- ${auditResults.violations.map(violation => `
-
-
${violation.help}
-
Rule: ${violation.id}
-
Impact: ${violation.impact}
-
${violation.description}
-
-
Affected Elements (${violation.nodes.length})
- ${violation.nodes.map(node => `
-
- Element: ${this.escapeHtml(node.html)}
- Selector: ${node.target.join(' ')}
- Fix: ${node.failureSummary}
-
- `).join('')}
-
-
Learn more
+
+
Violations
+ ${auditResults.violations.map(v => `
+
+
${v.help}
+
Impact: ${v.impact}
+
${v.description}
+
Learn more
`).join('')}
-
-
Manual Testing Required
-
- - Test with screen readers (NVDA, JAWS, VoiceOver)
- - Test keyboard navigation thoroughly
- - Test with browser zoom at 200%
- - Test with Windows High Contrast mode
- - Review content for plain language
-
-
- `;
-
- return html;
- }
-
- generateJSONReport(auditResults) {
- return {
- metadata: {
- timestamp: new Date().toISOString(),
- url: auditResults.url,
- wcagVersion: '2.1',
- level: 'AA'
- },
- summary: auditResults.summary,
- violations: auditResults.violations.map(v => ({
- id: v.id,
- impact: v.impact,
- help: v.help,
- count: v.nodes.length,
- elements: v.nodes.map(n => ({
- target: n.target.join(' '),
- html: n.html
- }))
- })),
- passes: auditResults.passes,
- incomplete: auditResults.incomplete
- };
+