Accessibility im Web Teil 1: Erstellen einer Webanwendung
Seite 2: Der Kopfbereich
Inhaltsverzeichnis
Im Kopfbereich einer Webseite, der mit <head> beziehungsweise </head> umschlossen ist, ist per <title>-Tag ein sinnvoller und leicht verständlicher Titel anzugeben. Dadurch ist sie beim Wechsel zwischen geöffneten Browser-Fenstern leichter zu finden.
Weiterlesen nach der Anzeige
Ein allgemeiner Titel wie der Name des Unternehmens reicht hierfür nicht aus. Der Titel soll sich auf den Hauptzweck der jeweiligen Webseite beziehen. So genügt es beispielsweise nicht, den Titel "Crimson Assurance" zu vergeben. Für die Login-Seite ist etwa "Crimson Assurance – Login" ein geeigneter, deutlicher Titel. Der Unternehmensname selbst sollte stets Bestandteil des Titels sein.
Bei häufig wechselndem interaktivem Inhalt auf verschiedenen Seiten einer Webanwendung mit unterschiedlichen Zielsetzungen kann es sinnvoll sein, die Hauptaktivität an den Anfang des Titels zu setzen. Bei rein informativen Webseiten kann das Hauptthema der jeweiligen Webseite auch hinter dem Unternehmensnamen stehen.
Sinnvolle Titel für Crimson Assurance sind: "Login – Crimson Assurance", "Kundenübersicht – Crimson Assurance" und "Nachrichten – Crimson Assurance".
Landmarken
Die Kundenübersichtsseite enthält verschiedene Landmarken.
Mithilfe der Landmarken, die HTML5 eingeführt hat, lässt sich eine Webseite nicht nur gut strukturieren. Sie sorgen auch dafür, dass sich die wichtigsten Bereiche einer Webseite schnell anspringen und identifizieren lassen. Folgende Landmarken sollten immer verwendet werden:
<header> fĂĽr den Seitenkopf
<main> fĂĽr den Hauptbereich
<nav> fĂĽr einen Navigationsbereich
<footer> fĂĽr die FuĂźleiste
Weiterlesen nach der Anzeige
DarĂĽber hinaus lassen sich zwei weitere Landmarken sinnvoll einsetzen:
<section> fĂĽr wichtige Regionen innerhalb einer der genannten Landmarken fĂĽr die Hauptstrukturierung
<aside> fĂĽr Bereiche ohne Hauptinhalt, aber zu dessen Anpassung, wie beispielsweise eine Seitenleiste
Einige Landmarken lassen sich seit HTML5 nativ setzen. Weitere Landmarken stehen mit Hilfe von ARIA per role-Attribut innerhalb eines HTML-Tags zur Verfügung. ARIA steht für Accessible Rich Internet Applications und stellt eine Ergänzung zu HTML dar, um UI-Elemente semantisch auszuzeichnen. ARIA soll nur dann zum Einsatz kommen, wenn HTML nicht bereits nativ die benötigte semantische Information bereitstellt.
Tabelle 1 zeigt die nativen HTML-Landmarken, deren ARIA-Rollen-Entsprechungen und die Ausgaben bei Verwendung einer Sprachsynthese. Die Ausgaben unterscheiden sich von Screenreader zu Screenreader. Die angegebenen Ausgaben beziehen sich auf den Screenreader, mit dem die Autoren die Accessibility der Demoanwendung überprüft haben. Die Ausgabe "Sprungmarke" ist nicht zu verwechseln mit den später beschriebenen "Sprunglinks".
HTML
ARIA-Rolle
Ausgabe
<header>
banner
Banner-Sprungmarke
<main>
main
Hauptsprungmarke
<nav>
navigation
Navigationssprungmarke
<form>
form
Formular
<aside>
complementary
Ergänzung
<footer>
contentinfo
Inhaltsangabe
<section>
region
Region
Tabelle 1: Landmarken mit ihren HTML-Elementen, ARIA-Rollen und Ausgaben bei Verwendung einer Sprachsynthese.
Die Landmarken lassen sich per aria-label bezeichnen. Diese Bezeichnungen werden ausschließlich an Hilfstechnologien übermittelt und erscheinen nicht visuell. Per Screenreader kann ein Nutzer durch einen einzigen Tastendruck von Landmarke zu Landmarke springen. Ohne eine Landmarkenbezeichnung per aria-label erfolgt nach einem Sprung keine Angabe, auf welcher Landmarke man sich befindet. Das gilt auch für native HTML5-Landmarken. In diesem Fall ermöglicht nur eine Navigation in die nächste Zeile eine Orientierung.
Bei Crimson Assurance befindet sich im Header, der die Landmarke <header> erhalten hat, eine <nav>-Landmarke. Diese markiert ein Navigationsmenü, wie es in einem Webseiten-Header üblicherweise vorkommt. Um zu verdeutlichen, dass es sich um die Hauptnavigation handelt, erhält die <nav>-Landmarke per aria-label die Bezeichnung "Hauptnavigation". Auf einer Webseite könnte es auch mehrere Navigationslandmarken geben, beispielsweise für eine Breadcrumb-Navigation oder als Navigation durch paginierten Inhalt.
Vollständig lautet die <nav>-Landmarke im Header bei Crimson Assurance:
Die Navigationslandmarke ist mit dem aria-label "Hauptnavigation" bezeichnet.
Ein barrierefreies NavigationsmenĂĽ verzichtet auf ausklappbare Elemente und tiefe Verschachtelungen. Native ungeordnete HTML-Listen per <ul>-Tag sind zu bevorzugen. Jede Liste muss dabei per aria-label bezeichnet werden.
Crimson Assurance bindet die gesamte Kopfleiste in ein <nav>-Tag ein, das per aria-label-Attribut mit "Hauptnavigation" bezeichnet ist. aria-label weist Objekten Bezeichnungen zu, die nicht visuell erscheinen, sich aber durch Hilfstechnologien auslesen lassen. Die Hauptnavigation ist in zwei Navigationsbereiche aufgeteilt, die inhaltlich getrennt sind nach HauptmenĂĽ mit den generellen Hauptbereichen der Website und BenutzermenĂĽ mit individuellen Benachrichtigungen und Einstellungen fĂĽr den jeweiligen Nutzer. Entsprechend sind die beiden MenĂĽs per aria-label mit HauptmenĂĽ und BenutzermenĂĽ bezeichnet.
Ein Screenreader erkennt die Bezeichnung einer Liste und gibt sie aus, sobald eine Nutzerin eine Liste fokussiert, sie also anspringt oder den Cursor auf ein Listenelement bewegt. Da es sich um zwei semantisch getrennte Listen zur Navigation handelt, ist es sinnvoll, sie zusätzlich jeweils als eigenen Bereich auszuzeichnen. Über jeder Liste der Navigation steht daher <section> mit der gleichen Bezeichnung wie die jeweilige Liste selbst.
Der Hintergrund für diese redundante Bezeichnung ist, dass sowohl eine <section>-Landmarke als auch eine Liste angesprungen werden. Bei dem Sprung auf eine Landmarke gibt der Screenreader nur den ihr zugewiesenen Text aus. Gleiches gilt für den Sprung in eine Liste, bei dem also die Landmarke und deren Bezeichnung nicht ausgegeben werden. Je nachdem, welches Element ein Nutzer ansteuert, soll er erfahren, wo er sich befindet. Durch die Bezeichnung der <section> und der entsprechenden Liste gibt ein Screenreader aus: "Hauptmenü Region Hauptmenü Liste mit 1 Einträgen". "Hauptmenü Region" ist dabei die Ausgabe der Bezeichnung von <section>, "Hauptmenü Liste" die Bezeichnung der Liste. Nutzerinnen erfahren also, dass sie sich in der Liste "Hauptmenü" in der Region "Hauptmenü" befinden und wie viele Einträge die Liste umfasst.
Die gleiche Bezeichnung der Liste und der Region ist nicht zwingend nötig, aber erleichtert die Orientierung, wenn eine Region nur ein Element enthält. Hätte dieses Element eine von der Region abweichende Bezeichnung, könnten Nutzer verwirrt sein und nach dem Element suchen, das der Bezeichnung der Region entspricht.
Die Syntax der Region mit dem HauptmenĂĽ lautet bei Crimson Assurance:
Die Hauptnavigation ist in die zwei inhaltlich/semantisch unterschiedlichen Regionen "HauptmenĂĽ" und "BenutzermenĂĽ" unterteilt.
Positionsmarker
Zur Markierung der aktuellen Seite kommt aria-current="page" zum Einsatz.
Ein Navigationsmenü zeigt normalerweise an, bei welchem Navigationspunkt man sich aktuell befindet. Diese Angabe erfolgt meist rein visuell durch eine bestimmte Farbgebung, eine Unterstreichung oder ein Icon, manchmal auch durch eine spitze Klammer > vor dem Menüeintrag. All diese Markierungen sind nicht barrierefrei. aria-current="page" vermittelt Nutzern von Hilfstechnologien, welcher Navigationspunkt gerade ausgewählt ist. Visuell hat diese Angabe keinerlei Auswirkung. Die Angabe von aria-current="page" bewirkt die Meldung "Aktuelle Seite" an den Nutzer, gefolgt von dem Navigationspunkt. Eine Alternative dazu bietet aria-current="true", womit die Ausgabe "Aktuell" erfolgt. Bei der Angabe einer aktuell angesteuerten Webseite ist also aria-current="page" sinnvoll, bei der Angabe eines aktuell gewählten Elements auf einer Seite ist aria-current="true" zu bevorzugen.
Bei Crimson Assurance lautet die Syntax zur Meldung der aktuellen Seite:
Das Crimson-Assurance-Logo besitzt den Alternativtext "Zur Crimson-Startseite".
Ăśblicherweise befindet sich in der Kopfzeile einer Webseite neben dem NavigationsmenĂĽ auch das Logo des Seitenbetreibers und ein Klick darauf fĂĽhrt zur Startseite des Webauftritts, was eine entsprechende Beschriftung ĂĽberflĂĽssig macht. Nutzer von Hilfstechnologien profitieren allerdings immer von der Angabe des Ziels eines Links.
Beim Browsen durch das Internet öffnen sich schnell einige Fenster, Tabs, Dokumente, Anwendungen oder der E-Mail-Client oder eine Nutzerin weiß nach einer Pause nicht mehr, welche Seiten sie besucht hat und welches Fenster gerade ausgewählt ist. Das Logo ist meist das erste UI-Element, auf das ein Besucher einer Website trifft, auch bei dem Wechsel zwischen Tabs. Eine Angabe der Funktion des Logos – üblicherweise das Aufsuchen der Startseite – erleichtert Nutzern von Hilfstechnologie die Orientierung auf der Website. Wichtig ist hierbei – analog zu dem Seitentitel –, auch den Namen des Seitenbetreibers zu nennen. Der Alternativtext der Logo-Grafik sollte durch die Verwendung des alt-Attributs ihre Funktion beschreiben.
Die oft anzutreffende Beschreibung "zur Startseite" ist allerdings nicht ausreichend informativ. Das Logo von Crimson Assurance verfügt über den Alternativtext "Zur Crimson-Startseite". Das Wort Logo und eine Beschreibung des Aussehens des Logos sind hier nicht nötig, sofern ein Logo keine Emotionen vermitteln soll – wie beispielsweise ein springendes Pferd – oder bedeutungstragende, bekannte Objekte zeigt – wie einen stilisierten angebissenen Apfel.
Hier die Syntax fĂĽr das Crimson-Assurance-Logo mit Alternativtext:
