Die Durchführung eines einfachen Tastaturtests ist weder zeitaufwändig noch technisch anspruchsvoll. Es ist eine unkomplizierte Methode, um zu testen, ob deine Website für alle barrierefrei ist.
Wenn du das Greyd Theme verwendest, bist du schon sehr gut aufgestellt, denn bei der Entwicklung wurde hier Tastatur-Bedienbarkeit von Anfang an berücksichtigt. Es wird jedoch empfohlen, deine Website immer auf die Barrierefreiheit mit der Tastatur zu testen. Die Bedienbarkeit einer Seite über die Tastatur kann durch verschiedene Faktoren während des Erstellungsprozesses einer Website beeinflusst werden.
Wenn zum Beispiel Plugins von Drittanbietern oder individueller Code hinzugefügt werden oder du ein anderes Theme zusammen mit der Greyd.Suite einsetzt, ist es wichtig, deine Website auf diesen Aspekt hin zu testen, um Probleme mit der Barrierefreiheit wie fehlende Fokusindikatoren oder Tastaturfallen zu vermeiden.
Jeder kann die Tastatur Barrierefreiheit testen
Du musst kein Entwickler oder Designer sein, um diesen Test durchzuführen. Sobald du die Tastenkombinationen kennst und weißt, worauf du achten musst, bist du startklar. Im Video unten siehst du, was mit Tastaturnavigation gemeint ist:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Die Durchführung eines einfachen Tastaturtests ist weder zeitaufwändig noch technisch anspruchsvoll. Es ist eine unkomplizierte Methode, um zu testen, ob deine Website für alle zugänglich ist.
Bei der Unterstützung der Tastaturnavigation geht es um die Einhaltung rechtlicher Normen, die Verbesserung der Benutzerfreundlichkeit und somit um die Erweiterung des Publikums. Zugänglichkeitsrichtlinien wie WCAG betonen die Bedeutung von tastaturfreundlichen Websites, und viele Zugänglichkeitsgesetze schreiben dies vor. Abgesehen von der Einhaltung der Richtlinien bietet eine Website, die für Tastaturbenutzer konzipiert ist, oft ein besseres Erlebnis für alle, von Power-Usern bis hin zu Benutzern, die mit Hilfsmitteln navigieren.
Die Tastenkombinationen
Bevor du mit dem Testen beginnst, ist es gut, die folgenden Tastaturkombinationen zu kennen.
Tab
Sprint von einem interaktiven Element zum nächsten (z. B. Buttons, Links, Formularfelder).
Shift + Tab
Bewegt sich rückwärts durch interaktive Elemente.
Enter
Aktiviert einen Link oder Button oder schickt ein Formular ab.
Leertaste
Wird in der Regel verwendet, um ein Checkboxen zu aktivieren oder zu deaktivieren oder um einen Button zu klicken, wenn die Eingabetaste nicht funktioniert.
Esc
Schließt Menüs, Modals oder andere Popup-Elemente.
Verwendung der Pfeiltasten
Die Pfeiltasten sind in bestimmten Kontexten für eine feinere Navigation besonders nützlich:
Durch den Inhalt scrollen: Wenn sich der Fokus in einem scrollbaren Bereich befindet (z. B. in einem Textfeld oder einem Abschnitt mit Überlauf), kannst du mit den Pfeiltasten den Inhalt nach oben, unten, links oder rechts scrollen.
Interaktion mit Schiebereglern: Bei Schiebereglern oder Bereichseingaben kann der Wert mit den Pfeiltasten angepasst werden. Der linke Pfeil und der rechte Pfeil verringern bzw. erhöhen in der Regel den Wert.
Navigieren zwischen Radio Buttons: In einer Gruppe von Radio Buttons kannst du mit den Pfeiltasten verschiedene Optionen auswählen.
Navigieren zwischen Tabs in einem Tabs-Block.
Komplexe Widgets navigieren: In komplexen Widgets wie Datenrastern, Kalendern oder Baumansichten kannst du mit Pfeiltasten zwischen einzelnen Elementen navigieren oder Daten ändern.
Durchführen eines Tastaturtests:
Mit der Tabulatortaste navigieren
Lade die Seite neu (CMD + R auf dem Mac und CTRL + R bei Windows). Drücke dann die Tabulatortaste, um auf der Seite zu navigieren. Du solltest durch einen visuellen Indikator erkennen können, dass du auf einem fokussierbaren Element (z. B. einem Link, einem Button oder einem Formularfeld) gelandet bist. Während du mit der Tabulatortaste navigierst, sollte der Fokus logischerweise von einem interaktiven Element zum nächsten in einer vorhersehbaren Reihenfolge wandern.
Fokus-Sichtbarkeit prüfen
Stelle sicher, dass ein Element, wenn es fokussiert ist, deutlich erkennbar ist. Dies kann durch eine Farbänderung, einen Umriss (einen Rahmen) oder andere visuelle Hinweise geschehen. Dieser visuelle Indikator muss einen aufweisen.
Alle interaktiven Elemente testen
Alle interaktiven Elemente, wie Links, Buttons, Formularfelder und individuelle Steuerelemente müssen mit der Tastatur bedient werden können. Dazu gehört auch die Möglichkeit, diese Elemente zu aktivieren oder auszuwählen.
Fokussierbare Elemente in Blöcken prüfen
Wenn eine Funktion Blöcke mit fokussierbaren Elementen enthält, stelle sicher, dass jedes Element fokussiert und über die Tastatur bedient werden kann. Die Reihenfolge der Fokussierung sollte die visuelle Reihenfolge widerspiegeln.
Sicherstellen, dass keine Tastaturfallen vorhanden sind
Stelle sicher, dass es keine Punkte gibt, an denen ein Tastaturbenutzer in einer Schleife gefangen wird oder sich nicht vorwärts oder rückwärts bewegen kann. Ein berüchtigtes Beispiel für Drittanbieter-Plugins, die Tastaturfallen verursachen, sind Popups wie Cookie-Banner. Kannst du deine Optionen wählen und sie schließen? Oder verdeckt das Popup die Seite und du siehst den Inhalt vorbeifließen, während du mit der Tabulatortaste navigierst? Das ist ein klassisches Beispiel für eine Tastaturfalle.
Mit verschiedenen Browsern testen
Stelle sicher, dass du diese Tests in mehreren Browsern durchführst, z. B. Chrome, Safari, Edge und Firefox. Um die Tastaturnavigation in Safari zu aktivieren, musst du sie zunächst in den Systemeinstellungen aktivieren.
Vollständige Tastaturnavigation auf Safari einschalten
- Öffne Safari, und gehe auf Einstellungen ( ⌘ + , )
- Erweitert (die letzte Registerkarte)
- Barrierefreiheit
- Markiere das Kontrollkästchen „Tabulator drücken, um jedes Element auf einer Webseite zu markieren“.
Was kannst du tun, wenn dir ein Problem auffällt?
Wenn du Probleme mit der Barrierefreiheit für die Tastatur auf deiner Website entdeckst, gerate nicht in Panik. Es gibt Schritte, die du unternehmen kannst, um sie zu beheben. Wende dich zunächst an den Anbieter deines Themes oder Plugins. Viele Entwickler sind gerne bereit, bei der Lösung von Problemen mit der Barrierefreiheit zu helfen, da dies ein gutes Licht auf ihr Produkt wirft. Auch wir bei Greyd sind in dieser Hinsicht sehr aktiv und freuen uns immer über Feedback, wenn wir Barrierefreiheitsprobleme finden, damit wir sie schnell beheben können.
Wenn du mit der Programmierung vertraut bist, kannst du direkt Korrekturen vornehmen, z. B. sicherstellen, dass die Fokusindikatoren sichtbar sind oder die Fokusreihenfolge korrigieren. Verwende z. B. CSS, um eine klare Kontur für fokussierte Elemente zu definieren, oder JavaScript, um bei Bedarf den Tabindex anzupassen. Wenn Programmieren nicht deine Stärke ist, solltest du in Erwägung ziehen, einen Experten für Barrierefreiheit zu engagieren. Wenn du diese Probleme in Angriff nimmst, tust du nicht nur etwas dafür, dass deine Website den Barrierefreiheitsstandards entspricht, sondern du verbesserst auch die Benutzerfreundlichkeit deiner Website für alle.
Möchtest du Greyd.Suite einmal ausprobieren? Du kannst sie kostenlos testen!
