Überprüfen der Tastaturunterstützung mithilfe der TAB- und EINGABETASTE

Es ist wichtig, dass die Benutzeroberfläche einer Webseite funktioniert, wenn nur eine Tastatur verwendet wird, da nicht alle Benutzer über einen Zeiger oder ein Touchgerät verfügen und nicht alle Benutzer Webseiten sehen können. Stellen Sie sicher, dass Sie die TAB-TASTE verwenden können, um den Fokus auf jedes Formularsteuerelement auf einer Webseite zu verschieben, und stellen Sie sicher, dass Sie die EINGABETASTE zum Übermitteln von Formularen verwenden können.

Möglichkeiten zum Testen der Tastaturunterstützung

Sie können die Benutzerfreundlichkeit einer Webseite für Tastaturbenutzer auf verschiedene Arten testen:

• Mithilfe der Tastatur, insbesondere der TAB-, UMSCHALT+TAB- und EINGABETASTE-TASTEN . Dieser Ansatz wird in diesem Artikel beschrieben.

• Überprüfen Sie mithilfe des Inspect-Tools , ob tastaturunterstützung für ein einzelnes Element vorhanden ist. Die Informationsüberlagerung des Tools "Überprüfen " enthält einen Abschnitt "Barrierefreiheit ", der eine Zeile mit Tastaturfokus enthält. Weitere Informationen finden Sie unter Verwenden des Inspect-Tools, um Barrierefreiheitsprobleme zu erkennen, indem Sie mit dem Mauszeiger auf die Webseite zeigen.

• Überprüfen Sie den Abschnitt Barrierefreiheit des Berichts probleme mit der Tastaturunterstützung. Weitere Informationen finden Sie unter Automatisches Testen einer Webseite auf Barrierefreiheitsprobleme.

Überprüfen einer Webseite auf Barrierefreiheitsprobleme mit der Tastatur

So überprüfen Sie die Demowebseite für Barrierefreiheitstests auf Barrierefreiheitsprobleme, indem Sie eine Tastatur anstelle einer Maus verwenden:

1. Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

2. Verwenden Sie eine Tastatur, um im Demodokument zu navigieren, indem Sie die TAB - oder UMSCHALT+TAB-TASTE verwenden, um von Element zu Element zu springen. Auf der Demo-Webseite verschiebt die TAB-TASTE zuerst den Fokus auf das Suchformular im header Abschnitt.

3. Drücken Sie die TAB-TASTE , um den Fokus auf eine Schaltfläche zu setzen, und drücken Sie dann die EINGABETASTE , um auf die Schaltfläche mit dem Fokus zu klicken. Drücken Sie beispielsweise auf der Demoseite die TAB-TASTE , um den Fokus auf das Suchfeld zu setzen, und drücken Sie dann die EINGABETASTE , um die Suche zu übermitteln. Dieser Ansatz führt zu demselben Ergebnis wie das Auswählen der Schaltfläche "Los ". Wenn Sie die EINGABETASTE drücken, um das Suchformular zu senden, funktioniert dies ordnungsgemäß.

4. Drücken Sie erneut die TAB-TASTE . Das nächste Element, auf das Sie sich konzentrieren, ist der erste Weitere-Link im content Abschnitt der Webseite, wie durch eine Gliederung angegeben:

   

5. Drücken Sie mehrmals die TAB-TASTE , bis Sie den letzten Link Mehr übergeben. Die Seite scrollt nach oben, und Sie scheinen sich auf einem Element der Seite zu befinden, aber es gibt keine Möglichkeit zu erkennen, um welches Element es sich handelt.

6. Beachten Sie die URL unten links. Wenn Sie unten links auf dem Bildschirm schauen (oder wenn Sie eine Sprachausgabe verwenden), stellen Sie fest, dass Sie sich im Navigationsmenü der Randleiste mit blauen Links befinden, da der Browser die URL anzeigt, auf die der Katzenlink zeigt (#cats).

   

7. Drücken Sie erneut die TAB-TASTE , um zum Eingabefeld im Spendenformular zu gelangen. Sie können die Schaltflächen über dem Textfeld jedoch nicht erreichen, indem Sie TAB auswählen. Sie können die Tastatur nicht verwenden, um den Fokus auf die Schaltflächen 50, 100 oder 200 zu setzen und sie dann auszuwählen. Wenn Sie die EINGABETASTE auswählen, wird das Spendenformular nicht übermittelt.

   

8. Wenn Sie TAB auswählen, wird der Fokus erneut auf die obere Navigationsleiste der Seite mit Menüschaltflächen für Home, Adopt a Pet, Donate, Jobs und About Us (Über uns) angezeigt. Drücken Sie TAB oder UMSCHALT+TAB , um den Fokus auf eine Menüschaltfläche zu setzen, wie durch eine Fokusgliederung angegeben. Drücken Sie dann die EINGABETASTE , um auf diesen Abschnitt der Webseite zuzugreifen.

   

Gefundene Probleme, die behoben werden müssen

Basierend auf der obigen exemplarischen Vorgehensweise haben wir die folgenden Probleme gefunden, die behoben werden müssen:

• Wenn Sie eine Tastatur verwenden, geben die blauen Links des Navigationsmenüs der Seitenleiste nicht visuell an, welcher Link den Fokus hat. Weitere Informationen finden Sie unter Analysieren der fehlenden Anzeige des Tastaturfokus.

• Im Spendenformular funktionieren die Schaltflächen "Betrag" und die Schaltfläche "Spenden " nicht mit einer Tastatur. Weitere Informationen finden Sie unter Analysieren der fehlenden Tastaturunterstützung in einem Formular.

• Die Reihenfolge des Tastaturzugriffs über Abschnitte der Seite ist nicht korrekt. Sie navigieren durch alle Links Weitere im Dokument, bevor Sie zum Navigationsmenü der Seitenleiste gelangen. Wenn die TAB-TASTE den Fokus auf das Navigationsmenü der Seitenleiste setzt, haben Sie bereits den gesamten Seiteninhalt durchlaufen. Das Navigationsmenü der Seitenleiste sollte einen einfachen Zugriff auf den Seiteninhalt ermöglichen.

  Weitere Informationen zum Beheben dieses Problems finden Sie unter Testen der Tastaturunterstützung mithilfe des Quellcodereihenfolge-Viewers.