Mit der Tastatur navigierbare interaktive Diagramme
Ermöglichen Sie, Datenpunkte ohne Maus zu erkunden.
Mit der Tastatur navigierbare interaktive Diagramme ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Hover reicht nicht aus
Interaktive Diagramme zeigen Werte oft nur beim Hover. Nutzerinnen und Nutzer von Tastatur und Touch können nicht hovern, daher bleiben ihnen diese Daten verborgen.
Datenpunkte fokussierbar machen
Ermöglichen Sie es, jeden Datenpunkt oder jede Datenreihe per Tab zu erreichen, indem Sie tabindex="0" vergeben. So kann die Tastatur erreichen, was sonst die Maus beim Hovern anzeigt.
<circle tabindex="0" role="img" aria-label="March: 240 sales" />Jeder Punkt braucht einen Namen
Ein fokussierbarer Punkt, der nichts ansagt, ist nutzlos. Geben Sie jedem Punkt einen zugänglichen Namen mit Bezeichnung und Wert, etwa „März, 240 Verkäufe“.
Mit Pfeiltasten zwischen Punkten wechseln
Durch 100 Punkte zu tabben ist mühsam. Verwenden Sie Pfeiltasten, um von Punkt zu Punkt zu wechseln, und reservieren Sie Tab für den Ein- und Ausstieg aus dem Diagramm.
Das roving-tabindex-Muster
Belassen Sie einen Punkt auf tabindex 0 und setzen Sie die übrigen auf -1. Verschieben Sie die 0, wenn Pfeiltasten betätigt werden. Dieses roving tabindex hält die Anzahl der Tabstopps überschaubar.
Tooltips auch bei Fokus anzeigen
Was ein Tooltip beim Hovern anzeigt, sollte er auch bei Fokus anzeigen. Kombinieren Sie jeden mouseenter-Handler mit einem Fokus-Handler, damit beide Eingabemethoden dasselbe Ergebnis liefern.
point.addEventListener('focus', showTooltip);Einen sichtbaren Fokusring beibehalten
Heben Sie den aktuell fokussierten Punkt mit einem deutlichen outline oder Marker hervor. Ohne diese Kennzeichnung wissen Tastaturnutzer nicht, wo sie sich befinden.
Änderungen angemessen ansagen
Wenn der Fokus zu einem neuen Punkt wechselt, kann eine aria-live-Region dessen Wert ansagen. Das hilft, wenn die Beschriftung zwar visuell gerendert wird, aber nicht im DOM vorhanden ist.
<div aria-live="polite">March: 240 sales</div>Das Diagramm als Figure gruppieren
Schließen Sie das gesamte Diagramm in ein figure-Element mit einem Namen ein, damit Nutzerinnen und Nutzer es finden und nach der Erkundung als Einheit überspringen können.
<figure role="group" aria-label="Sales over time, interactive"> ... </figure>Die Ersatztabelle immer beibehalten
Interaktivität ist ein Zusatz, kein Ersatz. Behalten Sie immer die einfache Datentabelle bei, damit Nutzerinnen und Nutzer einen unkomplizierten Weg haben, wenn das Wechseln mit Pfeiltasten zu langsam ist.
Mit Tab und Pfeiltasten testen
Legen Sie die Maus weg und bedienen Sie das Diagramm ausschließlich mit Tab und Pfeiltasten. Wenn Sie nicht jeden Wert erreichen können, können Ihre Nutzerinnen und Nutzer das ebenfalls nicht. ⌨️
Kurze Überprüfung
Wie sollte eine Person, die die Tastatur verwendet, zwischen vielen Datenpunkten in einem Diagramm wechseln?
Zusammenfassung: Bedienbare Diagramme
Sie haben gelernt, Punkte fokussierbar und benannt zu machen, mithilfe eines roving tabindex per Pfeiltasten zu wechseln, das Hover-Verhalten bei Fokus abzubilden und immer eine Ersatztabelle bereitzustellen. 🚀
Häufig gestellte Fragen
Ist die Lektion „Mit der Tastatur navigierbare interaktive Diagramme“ kostenlos?
Ja — der vollständige Text von „Mit der Tastatur navigierbare interaktive Diagramme“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Mit der Tastatur navigierbare interaktive Diagramme“?
Ermöglichen Sie, Datenpunkte ohne Maus zu erkunden. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Mit der Tastatur navigierbare interaktive Diagramme“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Jedes Diagramm braucht eine Textalternative
- Die Datentabellen-Alternative
- Farbe, Muster und direkte Beschriftungen
- Mit der Tastatur navigierbare interaktive Diagramme