Web AccessibilityWCAG Standards

Die Web Content Accessibility Guidelines (WCAG) 2.1 definieren drei Konformitätsstufen:

Die vier WCAG-Prinzipien:

Alternative Texte für Bilder:

<!-- Informatives Bild -->
<img src="chart.png" alt="Verkaufszahlen stiegen um 25% im letzten Quartal" />

<!-- Dekoratives Bild -->
<img src="decoration.png" alt="" role="presentation" />

<!-- Komplexe Grafiken -->
<img src="complex-chart.png" alt="Detaillierte Beschreibung siehe Text unten" />
<div id="chart-description">
  <h3>Detailbeschreibung des Diagramms</h3>
  <p>Das Balkendiagramm zeigt...</p>
</div>

<!-- SVG Icons -->
<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">Benutzer-Profil öffnen</title>
  <path d="..."/>
</svg>

<!-- Background Images mit wichtigen Inhalten -->
<div class="hero-banner" role="img" aria-label="Team arbeitet zusammen im modernen Büro">
  <h1>Unsere Vision</h1>
</div>

Farbkontrast und visuelle Gestaltung:

/* WCAG AA Kontrast-Anforderungen */
/* Normal text: 4.5:1 */
/* Large text (18pt+ or 14pt+ bold): 3:1 */

:root {
  /* Gute Kontraste */
  --text-primary: #000000;     /* 21:1 auf weißem Hintergrund */
  --text-secondary: #424242;   /* 12.6:1 auf weißem Hintergrund */
  --link-color: #0066cc;       /* 7.7:1 auf weißem Hintergrund */
  
  /* Fehler-Farben mit ausreichend Kontrast */
  --error-color: #d32f2f;      /* 5.4:1 auf weißem Hintergrund */
  --success-color: #2e7d32;    /* 4.7:1 auf weißem Hintergrund */
}

/* Niemals nur Farbe zur Informationsvermittlung nutzen */
.error-message {
  color: var(--error-color);
  position: relative;
}

.error-message::before {
  content: "⚠️ ";
  margin-right: 0.5rem;
}

/* Focus States müssen sichtbar sein */
button:focus,
a:focus,
input:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* Custom Focus für bessere Sichtbarkeit */
.custom-focus:focus {
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
  outline: none;
}

/* Prefers-reduced-motion berücksichtigen */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Responsive Text und Zoom:

/* Text muss bis 200% Zoom lesbar bleiben */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Relative Einheiten verwenden */
.content {
  font-size: 1rem;
  padding: 1em;
  margin: 1em 0;
}

/* Minimale Touch-Target-Größe: 44x44px */
button,
a,
input[type="checkbox"],
input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
}

/* Text-Spacing für bessere Lesbarkeit */
p {
  margin-bottom: 1em;
  word-spacing: 0.16em;
  letter-spacing: 0.12em;
}

Keyboard Navigation:

<!-- Alle interaktiven Elemente müssen mit Keyboard erreichbar sein -->
<nav aria-label="Hauptnavigation">
  <ul>
    <li><a href="/home" tabindex="0">Home</a></li>
    <li><a href="/about" tabindex="0">Über uns</a></li>
    <li>
      <button 
        aria-expanded="false" 
        aria-haspopup="true"
        aria-controls="dropdown-menu"
        tabindex="0"
      >
        Services
      </button>
      <ul id="dropdown-menu" aria-hidden="true">
        <li><a href="/service1" tabindex="-1">Service 1</a></li>
        <li><a href="/service2" tabindex="-1">Service 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

<!-- Skip Links für bessere Navigation -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<!-- Modal mit Keyboard Trap -->
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Modal Title</h2>
  <button aria-label="Modal schließen" onclick="closeModal()">×</button>
  <div class="modal-content">
    <!-- Modal Inhalt -->
  </div>
</div>

JavaScript für Accessibility:

// Focus Management
function manageFocus() {
  const modal = document.getElementById('modal');
  const focusableElements = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  
  const firstFocusable = focusableElements[0];
  const lastFocusable = focusableElements[focusableElements.length - 1];
  
  // Focus auf erstes Element setzen
  firstFocusable.focus();
  
  // Keyboard Trap implementieren
  modal.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey) {
        if (document.activeElement === firstFocusable) {
          lastFocusable.focus();
          e.preventDefault();
        }
      } else {
        if (document.activeElement === lastFocusable) {
          firstFocusable.focus();
          e.preventDefault();
        }
      }
    }
    
    if (e.key === 'Escape') {
      closeModal();
    }
  });
}

// ARIA Live Regions für dynamische Inhalte
function announceMessage(message, priority = 'polite') {
  const announcer = document.getElementById('live-announcer');
  announcer.setAttribute('aria-live', priority);
  announcer.textContent = message;
  
  // Nach kurzer Zeit leeren
  setTimeout(() => {
    announcer.textContent = '';
  }, 1000);
}

// Form Validation mit Screen Reader Support
function validateForm(form) {
  const errors = [];
  const inputs = form.querySelectorAll('input[required]');
  
  inputs.forEach(input => {
    if (!input.value.trim()) {
      const label = form.querySelector(`label[for="${input.id}"]`);
      const fieldName = label ? label.textContent : input.name;
      errors.push(`${fieldName} ist erforderlich`);
      
      input.setAttribute('aria-invalid', 'true');
      input.setAttribute('aria-describedby', `${input.id}-error`);
    } else {
      input.removeAttribute('aria-invalid');
      input.removeAttribute('aria-describedby');
    }
  });
  
  if (errors.length > 0) {
    announceMessage(`${errors.length} Fehler gefunden: ${errors.join(', ')}`, 'assertive');
    return false;
  }
  
  return true;
}

CSS für bessere Bedienbarkeit:

/* Skip Link Styling */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

/* Focus Indikatoren dürfen nicht entfernt werden */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* Hover und Focus States zusammen */
button:hover,
button:focus {
  background-color: #0056b3;
  color: white;
}

/* Reduced Motion berücksichtigen */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
  }
}

Semantisches HTML:

<!-- Korrekte Heading-Hierarchie -->
<h1>Haupttitel der Seite</h1>
  <h2>Hauptabschnitt</h2>
    <h3>Unterabschnitt</h3>
    <h3>Weiterer Unterabschnitt</h3>
  <h2>Weiterer Hauptabschnitt</h2>

<!-- Landmarks für bessere Navigation -->
<header role="banner">
  <nav aria-label="Hauptnavigation">
    <!-- Navigation -->
  </nav>
</header>

<main role="main">
  <article>
    <h1>Artikeltitel</h1>
    <!-- Artikelinhalt -->
  </article>
  
  <aside role="complementary" aria-label="Verwandte Links">
    <!-- Sidebar Inhalt -->
  </aside>
</main>

<footer role="contentinfo">
  <!-- Footer Inhalt -->
</footer>

<!-- Listen für verwandte Inhalte -->
<ul>
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
</ul>

<!-- Tabellen mit korrekten Headers -->
<table>
  <caption>Verkaufszahlen nach Quartal</caption>
  <thead>
    <tr>
      <th scope="col">Quartal</th>
      <th scope="col">Verkäufe</th>
      <th scope="col">Gewinn</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1 2024</th>
      <td>€50,000</td>
      <td>€10,000</td>
    </tr>
  </tbody>
</table>

Formulare und Labels:

<!-- Korrekte Label-Zuordnung -->
<form>
  <div class="form-group">
    <label for="email">E-Mail-Adresse *</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      required
      aria-describedby="email-help email-error"
      aria-invalid="false"
    />
    <div id="email-help" class="help-text">
      Wir verwenden Ihre E-Mail nur für wichtige Updates
    </div>
    <div id="email-error" class="error-text" aria-live="polite">
      <!-- Fehlermeldungen werden hier eingefügt -->
    </div>
  </div>

  <!-- Gruppierte Formularfelder -->
  <fieldset>
    <legend>Bevorzugte Kontaktmethode</legend>
    <div>
      <input type="radio" id="contact-email" name="contact" value="email" />
      <label for="contact-email">E-Mail</label>
    </div>
    <div>
      <input type="radio" id="contact-phone" name="contact" value="phone" />
      <label for="contact-phone">Telefon</label>
    </div>
  </fieldset>

  <!-- Submit Button mit aussagekräftigem Text -->
  <button type="submit" aria-describedby="submit-help">
    Anmeldung abschicken
  </button>
  <div id="submit-help" class="help-text">
    Nach dem Absenden erhalten Sie eine Bestätigungs-E-Mail
  </div>
</form>

ARIA Labels und Descriptions:

<!-- ARIA Labels für zusätzlichen Kontext -->
<button aria-label="Profil-Menü öffnen">
  <img src="avatar.jpg" alt="Benutzer Avatar" />
</button>

<!-- ARIA Describedby für zusätzliche Informationen -->
<input 
  type="password" 
  aria-label="Neues Passwort"
  aria-describedby="password-requirements"
/>
<div id="password-requirements">
  Passwort muss mindestens 8 Zeichen lang sein und Zahlen enthalten
</div>

<!-- Live Regions für dynamische Inhalte -->
<div aria-live="polite" aria-atomic="true" id="status-message">
  <!-- Status-Updates werden hier eingefügt -->
</div>

<!-- Progress Indicators -->
<div role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100" aria-label="Upload-Fortschritt">
  <div class="progress-bar" style="width: 32%"></div>
</div>

<!-- Expandable Content -->
<button 
  aria-expanded="false" 
  aria-controls="collapsible-content"
  aria-label="Zusätzliche Informationen anzeigen"
>
  Mehr Details
</button>
<div id="collapsible-content" aria-hidden="true">
  <!-- Erweiterbarer Inhalt -->
</div>

Valides HTML und ARIA:

<!-- Korrektes HTML5 Dokument -->
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Seitentitel - Firmenname</title>
</head>
<body>
  <!-- Valide HTML-Struktur -->
  <main>
    <!-- ARIA Roles nur wenn nötig -->
    <section aria-labelledby="section-title">
      <h2 id="section-title">Abschnittstitel</h2>
      <!-- Inhalt -->
    </section>
  </main>
</body>
</html>

<!-- Custom Components mit korrekten ARIA Attributen -->
<div 
  role="button" 
  tabindex="0"
  aria-pressed="false"
  onkeydown="handleKeyDown(event)"
  onclick="toggleButton()"
>
  Toggle Button
</div>

<!-- Screen Reader only Content -->
<span class="sr-only">
  Zusätzlicher Kontext nur für Screen Reader
</span>

JavaScript für Robustheit:

// Feature Detection statt Browser Detection
if ('IntersectionObserver' in window) {
  // Moderne Intersection Observer API verwenden
} else {
  // Fallback für ältere Browser
}

// Graceful Degradation
function enhanceWithJS() {
  if (!document.querySelector || !document.addEventListener) {
    return; // Basis-HTML funktioniert ohne JS
  }
  
  // Progressive Enhancement
  const buttons = document.querySelectorAll('[data-toggle]');
  buttons.forEach(button => {
    button.addEventListener('click', handleToggle);
    button.addEventListener('keydown', handleKeyDown);
  });
}

// Error Handling für bessere Robustheit
try {
  enhanceWithJS();
} catch (error) {
  console.error('Enhancement failed:', error);
  // Fallback auf Basis-Funktionalität
}

// Screen Reader Announcements
function announceToScreenReader(message) {
  const announcement = document.createElement('div');
  announcement.setAttribute('aria-live', 'assertive');
  announcement.setAttribute('aria-atomic', 'true');
  announcement.className = 'sr-only';
  announcement.textContent = message;
  
  document.body.appendChild(announcement);
  
  setTimeout(() => {
    document.body.removeChild(announcement);
  }, 1000);
}

Automatisierte Testing Tools:

Testing mit Jest und Testing Library:

// Accessibility Tests mit @testing-library/jest-dom
import { render, screen } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

describe('Button Component Accessibility', () => {
  test('should not have accessibility violations', async () => {
    const { container } = render(
      <Button aria-label="Save document">Save</Button>
    );
    
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  test('should have correct ARIA attributes', () => {
    render(
      <Button aria-pressed="false" role="button">
        Toggle
      </Button>
    );
    
    const button = screen.getByRole('button');
    expect(button).toHaveAttribute('aria-pressed', 'false');
  });

  test('should be accessible via keyboard', () => {
    render(<Button>Click me</Button>);
    
    const button = screen.getByRole('button');
    expect(button).toBeInTheDocument();
    expect(button).not.toHaveAttribute('tabindex', '-1');
  });
});

// Screen Reader Testing Simulation
test('should announce changes to screen readers', async () => {
  render(<NotificationComponent />);
  
  const liveRegion = screen.getByRole('status');
  expect(liveRegion).toHaveAttribute('aria-live', 'polite');
});

Manuelle Testing Checkliste:

• ✅ Navigation nur mit Tastatur möglich
• ✅ Alle Inhalte bei 200% Zoom sichtbar
• ✅ Screen Reader Test (NVDA, JAWS, VoiceOver)
• ✅ Kontrast-Verhältnisse überprüft
• ✅ Formulare vollständig beschriftet
• ✅ Fehlerbehandlung accessible
• ✅ Videos haben Untertitel
• ✅ Keine Epilepsie-auslösenden Inhalte

React Accessibility Hook:

// useAccessibility.ts
import { useEffect, useRef } from 'react';

export function useAccessibility() {
  const announceMessage = (message: string, priority: 'polite' | 'assertive' = 'polite') => {
    const announcement = document.createElement('div');
    announcement.setAttribute('aria-live', priority);
    announcement.setAttribute('aria-atomic', 'true');
    announcement.className = 'sr-only';
    announcement.textContent = message;
    
    document.body.appendChild(announcement);
    
    setTimeout(() => {
      if (document.body.contains(announcement)) {
        document.body.removeChild(announcement);
      }
    }, 1000);
  };

  const manageFocus = (elementId: string) => {
    const element = document.getElementById(elementId);
    if (element) {
      element.focus();
      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  };

  return { announceMessage, manageFocus };
}

// Accessible Modal Component
interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}

export function AccessibleModal({ isOpen, onClose, title, children }: ModalProps) {
  const modalRef = useRef<HTMLDivElement>(null);
  const { manageFocus } = useAccessibility();

  useEffect(() => {
    if (isOpen) {
      // Focus auf Modal setzen
      manageFocus('modal-content');
      
      // Keyboard Event Listener
      const handleKeyDown = (e: KeyboardEvent) => {
        if (e.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleKeyDown);
      return () => document.removeEventListener('keydown', handleKeyDown);
    }
  }, [isOpen, onClose, manageFocus]);

  if (!isOpen) return null;

  return (
    <div 
      className="modal-backdrop" 
      role="dialog" 
      aria-modal="true"
      aria-labelledby="modal-title"
      ref={modalRef}
    >
      <div id="modal-content" className="modal-content" tabIndex={-1}>
        <header className="modal-header">
          <h2 id="modal-title">{title}</h2>
          <button 
            onClick={onClose}
            aria-label={`${title} schließen`}
            className="close-button"
          >
            ×
          </button>
        </header>
        <div className="modal-body">
          {children}
        </div>
      </div>
    </div>
  );
}