`-Elementen, die so formatiert sind, dass sie wie eine Tabelle aussehen.

Richtig:

<table>
  <caption>Kalender für Oktober 2024</caption>
  <thead>
    <tr>
      <th scope="col">So</th>
      <th scope="col">Mo</th>
      <th scope="col">Di</th>
      <th scope="col">Mi</th>
      <th scope="col">Do</th>
      <th scope="col">Fr</th>
      <th scope="col">Sa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <!-- Weitere Zeilen -->
  </tbody>
</table>

2. ARIA-Attribute

ARIA-Attribute (Accessible Rich Internet Applications) stellen assistiven Technologien zusätzliche semantische Informationen zur Verfügung und verbessern so deren Verständnis interaktiver Elemente. Verwenden Sie ARIA-Attribute, um:

• Rollen definieren: Geben Sie den Zweck von Elementen an, z. B. `role="grid"` für das Kalenderraster und `role="gridcell"` für jede Datumszelle.
• Beschriftungen bereitstellen: Verwenden Sie `aria-label` oder `aria-labelledby`, um beschreibende Beschriftungen für Elemente bereitzustellen, insbesondere wenn die visuelle Beschriftung nicht ausreicht.
• Zustand angeben: Verwenden Sie Attribute wie `aria-selected`, um das ausgewählte Datum anzugeben, und `aria-disabled`, um deaktivierte Daten anzugeben.
• Beschreibungen bereitstellen: Verwenden Sie `aria-describedby`, um einem Element zusätzliche Informationen zuzuordnen, z. B. eine Beschreibung des Datumsformats.

Beispiel:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">Wählen Sie ein Datum aus</caption>
  <thead>
    <tr>
      <th scope="col">So</th>
      <th scope="col">Mo</th>
      <th scope="col">Di</th>
      <th scope="col">Mi</th>
      <th scope="col">Do</th>
      <th scope="col">Fr</th>
      <th scope="col">Sa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">29</td>
      <td role="gridcell" aria-disabled="true">30</td>
      <td role="gridcell"><button aria-label="1. Oktober 2024">1</button></td>
      <td role="gridcell"><button aria-label="2. Oktober 2024">2</button></td>
      <td role="gridcell"><button aria-label="3. Oktober 2024">3</button></td>
      <td role="gridcell"><button aria-label="4. Oktober 2024">4</button></td>
      <td role="gridcell"><button aria-label="5. Oktober 2024">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="6. Oktober 2024">6</button></td>
      <td role="gridcell"><button aria-label="7. Oktober 2024">7</button></td>
      <td role="gridcell"><button aria-label="8. Oktober 2024">8</button></td>
      <td role="gridcell"><button aria-label="9. Oktober 2024">9</button></td>
      <td role="gridcell"><button aria-label="10. Oktober 2024">10</button></td>
      <td role="gridcell"><button aria-label="11. Oktober 2024">11</button></td>
      <td role="gridcell"><button aria-label="12. Oktober 2024">12</button></td>
    </tr>
    <!-- Weitere Zeilen -->
  </tbody>
</table>

Hinweis: Testen Sie immer mit echten Bildschirmleseprogrammen, um sicherzustellen, dass die ARIA-Attribute korrekt interpretiert werden.

3. Tastaturnavigation

Die Tastaturnavigation ist für Benutzer unerlässlich, die keine Maus oder andere Zeigegeräte verwenden können. Stellen Sie sicher, dass alle interaktiven Elemente innerhalb der Datumsauswahl über die Tastatur zugänglich sind.

• Fokusverwaltung: Verwenden Sie das Attribut `tabindex`, um die Fokusreihenfolge zu steuern. Stellen Sie sicher, dass sich der Fokus logisch durch die Datumsauswahl bewegt. Verwenden Sie JavaScript, um den Fokus zu verwalten, wenn der Benutzer mit dem Widget interagiert.
• Pfeiltasten: Implementieren Sie die Tastaturnavigation mithilfe der Pfeiltasten, um sich zwischen den Daten zu bewegen. Die linke und rechte Pfeiltaste sollten zum vorherigen bzw. nächsten Tag wechseln. Die Pfeiltasten nach oben und unten sollten zum gleichen Tag in der vorherigen bzw. nächsten Woche wechseln.
• Tasten "Pos1" und "Ende": Die Taste "Pos1" sollte zum ersten Tag der aktuellen Woche und die Taste "Ende" zum letzten Tag der aktuellen Woche wechseln.
• Tasten "Bild auf" und "Bild ab": Die Taste "Bild auf" sollte zum vorherigen Monat und die Taste "Bild ab" zum nächsten Monat wechseln.
• Eingabetaste: Die Eingabetaste sollte das fokussierte Datum auswählen.
• Escape-Taste: Die Escape-Taste sollte die Datumsauswahl schliessen und den Fokus auf das Eingabefeld oder die Schaltfläche zurücksetzen, die sie ausgelöst hat.

Beispiel (JavaScript):

// Beispiel für die Handhabung der Tastaturnavigation
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // Fokus auf den vorherigen Tag setzen
      break;
    case 'ArrowRight':
      // Fokus auf den nächsten Tag setzen
      break;
    case 'ArrowUp':
      // Fokus auf den gleichen Tag in der vorherigen Woche setzen
      break;
    case 'ArrowDown':
      // Fokus auf den gleichen Tag in der nächsten Woche setzen
      break;
    case 'Enter':
      // Das fokussierte Datum auswählen
      break;
    case 'Escape':
      // Die Datumsauswahl schliessen
      break;
  }
});

4. Kompatibilität mit Bildschirmleseprogrammen

Bildschirmleseprogramme verlassen sich auf semantisches HTML und ARIA-Attribute, um Benutzern Informationen bereitzustellen. Stellen Sie sicher, dass Ihre Datumsauswahl mit gängigen Bildschirmleseprogrammen wie NVDA, JAWS und VoiceOver kompatibel ist.

• Beschreibende Beschriftungen: Stellen Sie klare und prägnante Beschriftungen für alle interaktiven Elemente bereit. Verwenden Sie `aria-label` oder `aria-labelledby`, um zusätzlichen Kontext bereitzustellen.
• Zustandsankündigungen: Verwenden Sie ARIA-Attribute, um den Zustand von Elementen anzugeben, z. B. `aria-selected` für das ausgewählte Datum und `aria-disabled` für deaktivierte Daten. Bildschirmleseprogramme geben diese Zustände an den Benutzer weiter.
• Live-Regionen: Verwenden Sie ARIA-Live-Regionen (z. B. `aria-live="polite"`), um dynamische Änderungen an der Datumsauswahl anzukündigen, z. B. wenn der Benutzer zu einem anderen Monat navigiert. Auf diese Weise können Bildschirmleseprogramme den Benutzer über die Änderung informieren, ohne seinen Workflow zu unterbrechen.
• Fehlerbehandlung: Wenn Fehler oder Validierungsprobleme auftreten, stellen Sie klare und informative Fehlermeldungen bereit, die für Bildschirmleseprogramme zugänglich sind. Verwenden Sie `aria-describedby`, um die Fehlermeldung dem relevanten Eingabefeld zuzuordnen.

Beispiel:

<div aria-live="polite">
  <!-- Dynamischer Inhalt, wie z. B. Monatsnavigation -->
</div>

5. Visuelles Design

Auch das visuelle Design der Datumsauswahl sollte barrierefrei sein. Berücksichtigen Sie Folgendes:

• Farbkontrast: Stellen Sie sicher, dass ein ausreichender Farbkontrast zwischen dem Text und den Hintergrundfarben besteht, um die WCAG-Standards (Web Content Accessibility Guidelines) 2.1 Level AA zu erfüllen. Verwenden Sie ein Tool zur Überprüfung des Farbkontrasts, um das Kontrastverhältnis zu überprüfen.
• Fokusindikatoren: Stellen Sie einen klaren und sichtbaren Fokusindikator für alle interaktiven Elemente bereit. Der Fokusindikator sollte sich deutlich von den umgebenden Elementen unterscheiden und nicht von anderen Elementen verdeckt werden.
• Schriftgrösse und Abstand: Verwenden Sie eine lesbare Schriftgrösse und ausreichend Abstand zwischen den Elementen, um die Lesbarkeit und Benutzerfreundlichkeit zu verbessern.
• Vermeiden Sie es, sich ausschliesslich auf Farben zu verlassen: Verlassen Sie sich nicht ausschliesslich auf Farben, um Informationen zu vermitteln. Verwenden Sie andere visuelle Hinweise, wie z. B. Symbole oder Text, um die Farbcodierung zu ergänzen.

6. Lokalisierung und Internationalisierung

Datumsformate, Kalendersysteme und Sprachkonventionen sind in verschiedenen Kulturen und Regionen unterschiedlich. Stellen Sie sicher, dass Ihre Datumsauswahl ordnungsgemäss lokalisiert und internationalisiert ist, um ein globales Publikum zu unterstützen.

• Datumsformate: Verwenden Sie eine flexible Bibliothek zur Datumsformatierung, die verschiedene Datumsformate unterstützt, z. B. TT/MM/JJJJ (in Europa und Teilen Asiens üblich) und MM/TT/JJJJ (in Nordamerika üblich). Ermöglichen Sie Benutzern, das Datumsformat nach ihren Vorlieben anzupassen.
• Kalendersysteme: Unterstützen Sie verschiedene Kalendersysteme, wie z. B. den gregorianischen Kalender (den am weitesten verbreiteten Kalender) und den islamischen Kalender (der in vielen islamischen Ländern verwendet wird).
• Sprachunterstützung: Stellen Sie Übersetzungen für alle Textelemente in der Datumsauswahl bereit, einschliesslich Monatsnamen, Tagesnamen und Beschriftungen.
• Unterstützung für Rechts-nach-Links (RTL): Stellen Sie sicher, dass die Datumsauswahl in RTL-Sprachen, wie z. B. Arabisch und Hebräisch, korrekt angezeigt wird. Dies kann eine Anpassung des Layouts und der Formatierung des Widgets erfordern.
• Zeitzonen: Berücksichtigen Sie die Auswirkungen von Zeitzonen bei der Handhabung von Daten. Speichern Sie Daten in einer konsistenten Zeitzone (z. B. UTC) und konvertieren Sie sie in die lokale Zeitzone des Benutzers, wenn Sie sie anzeigen.

Beispiel: Verwenden Sie eine JavaScript-Bibliothek wie `moment.js` oder `date-fns`, um die Datumsformatierung und -lokalisierung zu verarbeiten.

7. Mobile Barrierefreiheit

Angesichts der zunehmenden Nutzung mobiler Geräte ist es unerlässlich, dass Ihre Datumsauswahl auf mobilen Plattformen barrierefrei ist. Berücksichtigen Sie Folgendes:

• Touch-Ziele: Stellen Sie sicher, dass alle interaktiven Elemente ausreichend grosse Touch-Ziele haben, um auf mobilen Geräten leicht angetippt werden zu können. Apple empfiehlt eine Mindestgrösse für Touch-Ziele von 44x44 Pixeln.
• Responsive Design: Verwenden Sie Responsive-Design-Techniken, um sicherzustellen, dass sich die Datumsauswahl an verschiedene Bildschirmgrössen und -ausrichtungen anpasst.
• Tastatureingabe: Wenn die Datumsauswahl eine Tastatureingabe erfordert, stellen Sie eine mobilfreundliche Tastatur bereit, die für die Datumseingabe optimiert ist.
• Gesten: Verlassen Sie sich nicht ausschliesslich auf Gesten, die für Benutzer mit motorischen Beeinträchtigungen schwierig sein können. Stellen Sie alternative Eingabemethoden bereit, wie z. B. Tastaturnavigation oder Sprachsteuerung.

Testen und Validierung

Gründliche Tests sind entscheidend, um die Barrierefreiheit Ihrer Datumsauswahl sicherzustellen. Verwenden Sie eine Kombination aus automatisierten und manuellen Testmethoden:

• Automatisierte Tests: Verwenden Sie Tools zum Testen der Barrierefreiheit, wie z. B. Axe oder WAVE, um häufige Probleme mit der Barrierefreiheit zu identifizieren.
• Manuelle Tests: Testen Sie die Datumsauswahl manuell mit einem Bildschirmleseprogramm und der Tastaturnavigation, um zu überprüfen, ob sie von Menschen mit Behinderungen verwendet werden kann.
• Benutzertests: Führen Sie Benutzertests mit Menschen mit Behinderungen durch, um Feedback zu sammeln und Bereiche mit Verbesserungspotenzial zu identifizieren.
• WCAG-Konformität: Stellen Sie sicher, dass Ihre Datumsauswahl die Anforderungen von WCAG 2.1 Level AA erfüllt.

Beispiele für barrierefreie Datumsauswahlen

Mehrere Open-Source- und kommerzielle Datumsauswahlbibliotheken bieten eine gute Unterstützung für die Barrierefreiheit. Einige Beispiele sind:

• React Datepicker: Eine beliebte React-Komponente mit ARIA-Unterstützung und Tastaturnavigation.
• Air Datepicker: Eine leichtgewichtige und anpassbare Datumsauswahl mit guten Barrierefreiheitsfunktionen.
• FullCalendar: Eine voll ausgestattete Kalenderkomponente mit umfassender Unterstützung für die Barrierefreiheit.

Wenn Sie eine Datumsauswahlbibliothek auswählen, bewerten Sie sorgfältig ihre Barrierefreiheitsfunktionen und stellen Sie sicher, dass sie Ihren spezifischen Anforderungen entspricht.

Best Practices für die Erstellung barrierefreier Datumsauswahlen

Hier ist eine Zusammenfassung der Best Practices für die Erstellung barrierefreier Datumsauswahlen:

• Verwenden Sie semantisches HTML, um die Datumsauswahl zu strukturieren.
• Verwenden Sie ARIA-Attribute, um zusätzliche semantische Informationen bereitzustellen.
• Stellen Sie sicher, dass die Tastaturnavigation vollständig implementiert ist.
• Testen Sie mit Bildschirmleseprogrammen, um die Kompatibilität zu überprüfen.
• Sorgen Sie für ausreichend Farbkontrast und klare Fokusindikatoren.
• Lokalisieren und internationalisieren Sie die Datumsauswahl für globale Benutzer.
• Optimieren Sie die Datumsauswahl für mobile Geräte.
• Führen Sie gründliche Tests und Validierungen durch.

Schlussfolgerung

Die Erstellung barrierefreier Datumsauswahlen ist eine komplexe, aber wesentliche Aufgabe. Indem Sie die in diesem Leitfaden beschriebenen Richtlinien und Best Practices befolgen, können Sie inklusive Kalender-Widgets erstellen, die auf Benutzer aller Fähigkeiten zugeschnitten sind, und zwar in verschiedenen kulturellen und technologischen Umgebungen. Denken Sie daran, dass Barrierefreiheit ein fortlaufender Prozess ist und kontinuierliche Tests und Verbesserungen entscheidend sind, um sicherzustellen, dass Ihre Datumsauswahlen im Laufe der Zeit barrierefrei bleiben. Indem Sie der Barrierefreiheit Priorität einräumen, können Sie ein inklusiveres und benutzerfreundlicheres Web-Erlebnis für alle schaffen.

Weitere Ressourcen

• WAI-ARIA Authoring Practices Guide (APG) - Calendar
• Web Content Accessibility Guidelines (WCAG) 2.1
• Deque University