Überprüfen Sie die Tastaturunterstützung mithilfe der Tab- und Eingabetasten

Nicht alle Benutzer verfügen über ein Zeiger- oder Touchgerät, und nicht alle Benutzer können die von uns erstellten Webprojekte sehen. Aus diesem Grund ist es wichtig, dass die Benutzeroberfläche mindestens mit einer Tastatur funktioniert. 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 den Enter Schlüssel zum Übermitteln von Formularen verwenden können.

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

  • Mithilfe der Tastatur, insbesondere der Tasten und der TabTastenShift``Tab+Enter. Dieser Ansatz wird in diesem Artikel beschrieben.
  • Überprüfen Sie die Tastaturunterstützung für ein einzelnes Element mithilfe des Inspect-Tools . Die Informationsüberlagerung des Inspect-Tools enthält einen Abschnitt "Barrierefreiheit ", der eine Zeile mit fokussierbarem Tastaturzugriff enthält.
  • Überprüfen Sie den Abschnitt "Barrierefreiheit" des Berichts "Probleme" auf Probleme mit der Tastaturunterstützung.

So überprüfen Sie die Demoseite auf Barrierefreiheitsprobleme mithilfe einer Tastatur anstelle einer Maus:

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

  2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite, und wählen Sie dann "Überprüfen" aus. Oder drücken Sie F12. DevTools wird neben der Webseite geöffnet.

  3. Verwenden Sie eine Tastatur, um im Demodokument zu navigieren, und verwenden Sie die Tab Tasten Shift+Tab , um von Element zu Element zu springen. Auf der Demowebseite verschiebt die Taste zuerst den Tab Fokus auf das Suchformular im header Abschnitt.

  4. Drücken Sie Tab , um den Fokus auf eine Schaltfläche zu setzen, und drücken Sie Enter dann, um auf die Schaltfläche mit Relevanz zu klicken. Drücken Sie Tab beispielsweise auf der Demoseite, um den Fokus auf das Suchfeld zu setzen, und drücken Sie Enter dann, um die Suche zu übermitteln. Dieser Ansatz erzeugt dasselbe Ergebnis wie das Auswählen der Schaltfläche " Los ". Die Auswahl Enter zum Senden des Suchformulars funktioniert ordnungsgemäß.

  5. Drücken Sie Tab erneut. Das nächste Element, auf das Sie den Fokus setzen, ist der erste Link "Mehr " im content Abschnitt der Webseite, wie durch eine Gliederung angegeben.

    Navigieren im Dokument mithilfe der Tastatur und der TAB-TASTE. Der Fokus wird auf einem Link im Dokument angezeigt.

  6. Drücken Sie Tab mehrmals, bis Sie den letzten Link "Weitere " übergeben. Die Seite scrollt nach oben, und Sie scheinen sich in einem Element der Seite zu befinden, aber es gibt keine Möglichkeit, zu erkennen, um welches Element es sich handelt.

  7. Beachten Sie die URL unten links. Wenn Sie unten links auf dem Bildschirm nachschauen (oder 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 verweist (#cats).

    Fehlender Fokusstil macht es unmöglich zu wissen, wo sie sich derzeit im Dokument befinden. Der einzige Hinweis ist die Anzeige des Linkziels in der unteren linken Ecke des Bildschirms.

  8. Drücken Sie Tab erneut, um zum Eingabefeld im Spendenformular zu gelangen. Sie können jedoch die Schaltflächen über dem Textfeld nicht erreichen, indem Sie die Schaltfläche auswählen Tab. 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. Außerdem übermittelt die Auswahl Enter nicht das Spendenformular.

    Das einzige tastaturfreundliche Element im Spendenformular ist das Texteingabefeld.

  9. Durch die erneute Tab Auswahl wird der Fokus auf die obere Navigationsleiste der Seite gesetzt, mit Menüschaltflächen für "Start", " Adopt a Pet", "Donate", "Jobs" und "About Us". Drücken Tab oder Shift+Tab setzen Sie den Fokus auf eine Menüschaltfläche, wie durch eine Fokusgliederung angegeben. Drücken Sie Enter dann, um auf diesen Abschnitt der Webseite zuzugreifen.

    Das Hauptmenü verfügt über eine Hervorhebung und eine Fokusgliederung und ist somit über die Tastatur zugänglich.

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

Weitere Informationen