Übung: Finden und Korrigieren von Inhalten für die Barrierefreiheit der Sprachausgabe

  • 10 Minuten

Bevor Sie versuchen, die Beispielwebseite mithilfe einer Sprachausgabe zu durchlaufen, finden und beheben Sie vorhandene Probleme mit der Barrierefreiheit.

Korrigieren von alternativen Bildtexten

  1. Führen Sie die Website und FastPass aus. Das letzte verbleibende Problem ist der fehlende alternative Text für das Bild auf der Seite.

    Screenshot of Accessibility Insights for Web that shows an error about missing alt text for an image.

  2. Dies ist ein rein dekoratives Bild, deshalb können Sie einfach eine leere alt-Beschreibung hinzufügen:

    <img alt="" width="120" src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.226 112L36.2.2c60 16 74 49 81 84z' fill='%23ea8'/%3e%3cpath d='M.197 112L31 14C84 29 96 57 103 88z' fill='%23fea' /%3e%3c/svg%3e">

  3. Führen Sie die Anwendung aus, und führen Sie eine letzte FastPass-Überprüfung durch. Nun sollten alle automatisierten Überprüfungen fehlerfrei ausgeführt werden.

Überprüfen von Tabstopps

  1. Nachdem Sie alle Fehler in den automatisierten Überprüfungen beseitigt haben, ist es an der Zeit, die Tabstopps zu überprüfen. Wählen Sie im linken Navigationsbereich von FastPass Tab stops (Tabstopps) aus.

    Screenshot of Accessibility Insights for Web with the second option of tab stops selected.

  2. Aktivieren Sie die Umschaltfläche Show tab stops (Tabstopps anzeigen) in FastPass.

  3. Wechseln Sie zur Webanwendung, und navigieren Sie mit der Tabulatortaste durch die Seite. Sie werden sehen, dass die Navigation vom oberen Rand der Seite durch das Formular und die Seitenlinks zu den Links in der Fußzeile verläuft.

    Screenshot of the pizza app that shows tab stops from top to bottom.

Testen mit einer Sprachausgabe

Es bleiben noch ein paar Probleme, die FastPass nicht erkennt. Sie finden diese im Tool „Assessment“, das eine vollständige Bewertung der Barrierefreiheit für die Seite durchführt. Aber das würde den Rahmen dieses Tutorials sprengen. Stattdessen werden wir uns mithilfe der Sprachausgabe durch die Seite bewegen, um das Benutzererlebnis nachzuvollziehen.

Aktivieren der Windows-Sprachausgabe

Windows verfügt über eine integrierte Sprachausgabe, mit deren Hilfe Benutzer gängige Aufgaben ohne Maus ausführen können. Es gibt zwei Möglichkeiten zum Aktivieren der Sprachausgabe:

  • Verwenden Sie die Tastenkombination WINDOWS-LOGO-TASTE+STRG+EINGABETASTE, um die Sprachausgabe zu starten. Drücken Sie diese Tastenkombination erneut, um die Sprachausgabe zu beenden. (In älteren Versionen von Windows lautete die Tastenkombination WINDOWS-LOGO-TASTE+EINGABETASTE.) Bei vielen Tastaturen befindet sich die WINDOWS-LOGO-TASTE in der untersten Tastenreihe links oder rechts neben der ALT-TASTE.

  • Drücken Sie WINDOWS-LOGO-TASTE+STRG+N, um die Einstellungen der Sprachausgabe zu öffnen, und aktivieren Sie dann die Umschaltfläche unter Sprachausgabe aktivieren.

Screenshot for turning on the toggle for enabling Narrator in Windows.

Es empfiehlt sich, das Tutorial für die Sprachausgabe durchzuarbeiten, das Sie auf dem Bildschirm mit den Sprachausgabeeinstellungen finden.

Durchlaufen der Seite mithilfe der Sprachausgabe

  1. Sofern nicht bereits geschehen, öffnen Sie die Sprachausgabe über die Tastenkombination WINDOWS-LOGO-TASTE+STRG+EINGABETASTE.
  2. Wechseln Sie bei ausgeführter Sprachausgabe zur Pizzawebseite. (Sie können dazu den Browser auswählen oder ALT+TAB verwenden.)
  3. Drücken Sie die Taste 1, um die Überschriften der obersten Ebene aufzulisten. „Welcome“ (Willkommen) sollte vorgelesen werden.
  4. Betätigen Sie erneut die Taste 1. Sie hören die Ansage „Join our mailing list“ (Tragen Sie sich in unsere Mailingliste ein). Dies ist nicht richtig, denn es sollte nur ein <h1>-Element auf einer Seite vorhanden sein.
  5. Betätigen Sie erneut die Taste 1. Die Sprachausgabe meldet, dass keine weiteren <h1>-Elemente vorhanden sind.
  6. Drücken Sie die Taste 2. Die Sprachausgabe meldet, dass keine <h2>-Elemente vorhanden sind.
  7. Drücken Sie die Taste 3. Die Sprachausgabe meldet, dass keine <h3>-Elemente vorhanden sind. Bei den verbleibenden Überschriften auf der Seite ist eindeutig etwas falsch.
  8. Drücken Sie wiederholt die TAB-TASTE, um das Formular und die Schaltfläche Submit (Übermitteln) zu durchlaufen. Dies funktioniert gut, wie man es aufgrund der vorherigen Tabstoppüberprüfung erwarten würde.
  9. Betätigen Sie erneut die TAB-TASTE. Sie hören, dass ein Link vorgelesen wird: „Link: click here“ (Link: Klicken Sie hier). Diese Anweisung ist unklar. Auf welchen Link sollen wir klicken?
  10. Beenden Sie die Sprachausgabe über die Tastenkombination WINDOWS-LOGO-TASTE+STRG+EINGABETASTE.

Beheben der anhand des Sprachausgabetests ermittelten Probleme

Auf dieser Seite müssen noch einige Elemente korrigiert werden: Überschriften und der mysteriöse Link „Click here“.

Korrigieren von Überschriften

  1. Stufen Sie die Überschrift „Join our mailing list“ von <h1> auf <h2> herab. Es darf nur ein <h1>-Element vorhanden sein, und der Text „Welcome“ oben auf der Seite war zuerst da.

    <h2>Join our mailing list</h2>

  2. Die Anzeige des HTML-Codes für die Überschrift „All about our wonderful pizza!“ (Alles über unsere großartige Pizza!) zeigt, warum die Sprachausgabe sie nicht gefunden hat – es ist gar keine Überschrift!

    <p style="font-size: 30px"><b>All about our wonderful pizza!</b></p>

    Dieser Text ist fett und in einer großen Schriftart formatiert, aber es wird kein Überschriftenelement verwendet. Ändern Sie dieses Tag in <h2>:

    <h2>All about our wonderful pizza!</h2>

  3. Da Sie nun wissen, worauf Sie achten müssen, sehen Sie, dass in den übrigen Überschriften weiter unten auf der Seite das gleiche Problem vorliegt. Ändern Sie die Überschrift „We take your privacy seriously!“ (Wir nehmen den Schutz Ihrer Daten ernst!) so, dass <h2> verwendet wird:

    <h2>We take your privacy seriously!</h2>

  4. Ändern Sie die Überschrift „Delivery options“ (Lieferoptionen) in <h2>:

    <h2>Delivery options</h2>

Ändern von „Click here“

Suchen Sie die Zeile mit dem wenig hilfreichen Text „Click here“:

Want to know more? <a href="/Privacy">Click here.</a>

Ändern Sie ihn folgendermaßen ab:

View our <a href="/Privacy">privacy policy</a> for more information.

Abschließende Überprüfung mit der Sprachausgabe

  1. Öffnen Sie die Sprachausgabe über die Tastenkombination WINDOWS-LOGO-TASTE+STRG+EINGABETASTE.
  2. Wechseln Sie bei ausgeführter Sprachausgabe zur Pizzawebseite.
  3. Drücken Sie wiederholt die TAB-TASTE aus, um die Links auf der Seite zu durchlaufen. Dieses Mal hören Sie nicht „Link: Click here“, sondern „Link: Privacy policy“ (Link: Datenschutzrichtlinie). Das ist behoben.
  4. Drücken Sie die Taste 1, um die Überschriften der obersten Ebene aufzulisten. „Welcome“ (Willkommen) sollte vorgelesen werden.
  5. Betätigen Sie erneut die Taste 1. Die Sprachausgabe meldet, dass keine weiteren Überschriften der obersten Ebene vorhanden sind. Der Vorgang war erfolgreich.
  6. Drücken Sie wiederholt die Taste 2, um die Überschriften der Ebene 2 zu durchlaufen. Die Sprachausgabe liest alle vor.
  7. Beenden Sie die Sprachausgabe über die Tastenkombination WINDOWS-LOGO-TASTE+STRG+EINGABETASTE.