Wie wird die Priorität für Bildschirmleseprogramme einiger HTML-Seitenparts festgelegt?
Ich möchte meine HTML-Seite für Screenreader geeignet machen.
Zurzeit hat die Seite 3 Hauptteile: Kopfzeile, Seitenleiste und Inhalt:
Screenreader lesen header zuerst, dann sidebar und schließlich Suchergebnisse .
Leider haben Benutzer, die Probleme mit der Sehkraft haben, lange Zeit zu warten, während das Programm den ganzen Seitenleisteninhalt liest (weil die Seitenleiste viele Filter enthält). Wie kann ich eine höhere Priorität für Suchergebnisse festlegen? Ursache Suchergebnisse sollten vor dem Inhalt der Seitenleiste gelesen werden.
Und es wird großartig sein, wenn jemand mir ein HTML-Tutorial zur Verfügung stellt, was ich tun kann, um die Barrierefreiheit von HTML-Seiten zu erhöhen:
- Wie kann ich einige DIV-Elemente ändern, die vom Bildschirmleseprogramm übersprungen werden sollen?
- Wie kann ich eine Abfolge beim Lesen von Seiteninhalt ändern?
- Wie kann ich nur Suchformulare und Suchergebnisse (und ein paar Links) lesbar machen?
3 Antworten
Versuchen Sie nicht, den Inhalt der Screenreader-Benutzer zu verbergen, sie werden Zugriff auf diesen Inhalt erhalten. Stattdessen können Sie Ihren Inhaltsbereichen Landmarken hinzufügen. Screenreader können dann direkt zu dem relevanten Teil der Seite springen, einschließlich der Ergebnisse, sind aber immer noch in der Lage, zu den anderen Steuerelementen zu gelangen, wenn sie sie brauchen.
Wenn Sie HTML5 verwenden können, verwenden Sie die Elemente <header> , <aside> oder <nav> und dann die Elemente <main> für Ihre Kopfzeile, Filter und Seitennavigation bzw. für die Suchergebnisse.
Wenn Sie HTML5 nicht verwenden können, fügen Sie den Umbruchelementen dieser Regionen role="banner", role="komplementär", role="navigation" und role="main" hinzu.
Als Best Practice sollten Sie dem Dokument auch eine Überschriftstruktur hinzufügen (Screenreader können auch durch diese navigieren) und einen Überspringen-Link (für sehende Nur-Tastatur-Benutzer)
Eine gängige Vorgehensweise ist der Link "Navigation überspringen", der eine Ankerreferenz darstellt, bis zu der der eigentliche Inhalt beginnt. Dadurch können Bildschirmleser überspringen.
%Vor%Wenn Sie möchten, können Sie es so formatieren, dass es immer noch von Bildschirmlesern aufgenommen wird, aber für normale Browser nicht sichtbar ist.
%Vor%Das Problem wurde mit "aria-live" behoben
Der Bildschirmleser liest das "aria-live" -Tag, nachdem sich der Inhalt geändert hat. Wenn der Benutzer also den Text im Suchformular ändert, liest der Bildschirmleser den Inhalt des "aria-live" -Tags mit Ajax-geladenen Suchergebnissen.
Getestet mit ChromeVox
Tags und Links html accessibility wai-aria screen-readers wcag2.0