Dass Seiten barrierefrei (= zugänglich für alle) sein sollen, ist allen bewusst, es wird zunehmend auch vom Gesetzgeber gefordert. Es gibt aber zahllose Dinge, oft Kleinigkeiten, die hier zusammenwirken müssen: Erst in der Summe machen sie eine Seite barrierefrei. Der größte Teil der Barrierefreiheit ist “undercover”. Er versteckt sich im Code und ist im Quelltext bzw. für assistive Technologien erkennbar und relevant, für diese jedoch unverzichtbar. Assistive Technologien, z.B. Screenreader, benötigen einen fehlerfreien Seitenaufbau. Nur dann können sie den Inhalt einer Seite ohne Verlust zugänglich machen.
Das Aussehen einer Joomla Seite wird vom Template bestimmt. Ob die Seite am Ende wirklich den Anforderungen von WCAG 2.1 für die “AA” Konformität entspricht, hängt auch von der Grundstruktur ab, die in der index.php des Templates festgelegt ist. Auf einem stabilen Gerüst kann ein Designer weiterbauen – leider auch alles zerstören. Aber das steht auf einem anderen Blatt.
Die Landkarte einer Seite: landmarks & roles
Barrierefreiheit ist viel mehr als nur starke Kontraste und Alt-Texte bei Bildern! Sehende erkennen die Struktur sofort beim Aufruf der Seite anhand von Formen, Farben und der Anordnung. Zeigen sie mit dem Finger auf eine Region und der Sehende erkennt: Es ist Deutschland auf der Karte von Europa. Für Blinde bzw. für Screenreader ist das nicht so. Sie brauchen eine Landkarte mit definierten Regionen. Die Region Europa muss benannt sein, und darin die Region Deutschland.
Direktes Ansteuern einer Region: Bypass Block
Ein Bypass Block ist eine Möglichkeit, gleich beim Aufruf der Seite zum Hauptinhalt oder zu besonders definierten Teilen der Seite zu springen.
Dies wird in den WCAG Richtlinien (Web Content Accessibility Guidelines) empfohlen, aber inzwischen wird es selten implementiert und hat gegenüber anderen Techniken an Bedeutung verloren. Auf der Seite https://webaim.org, die ich Ihnen sehr empfehle, ist ein Beispiel für einen ganz einfachen Bypass Block implementiert. Er erscheint, wenn Sie die Seite aufrufen und eine Tabulatortaste drücken.
Seitenstruktur: Landmarks und roles
Wenn sie eine Seite im Browser öffnen, erkennen Sehende sofort: Hier ist eine Navigation, hier ist eine Galerie im Header mit Logo und Header-Bild, dies ist der Hauptteil, hier ist eine rechte Spalte mit Zusatzinformation und so fort. Sie erkennen an den Farben und Linien und an der Anordnung, was zusammengehört und brauchen nicht lange überlegen, wie sie mit einem gezielten Klick den Cookie Hinweis erledigen oder wie sie das Impressum unten ansteuern könnten.
Blinde und Tastatur-Nutzer können das nicht so einfach sehen, aber man kann die Bereich für sie kennzeichnen. Betrachten Sie die Datei index.php des Joomla Standard Templates Protostar, als Beispiel.
Es gibt aber nur wenig Vorschriften für so eine Grundstruktur – jeder Designer kann seine eigene Struktur zusammenstellen. Man darf bei all dem das Ziel nicht aus den Augen verlieren: Benutzer sollen sich schnell durch die Seite bewegen können.
Semantische Auszeichnung mit HTML (Landmarks)
Kennzeichnen Sie die Bereiche der Website zunächst mit den großen Bereichen, die Sie auf jeder Seite gleich erkennen. Diese Bereiche gibt es maximal einmal pro Seite – nur main muss es immer geben.
Wo diese Bereiche dann für den Sehenden sichtbar sind, ist ganz egal. Ein <header> kann ebenso gut am linken Rand stehen. Entscheidend ist, dass in einem solchen Bereich bestimmte Informationen (z.B. die Suche) erwartet werden.
Die HTML-Definitionen für landmarks:
| <header> | Alles, was normalerweise über dem Hauptbereich steht: Suchformular, Navigation, Banner und Slogan, auch Module. Wenn der Screenreader diesen Teil überspringt, muss der Benutzer alle wichtige Information trotzdem bekommen. |
| <main> | Es muss einen main-Bereich geben. Der Benutzer muss in diesem Bereich die gesamte wesentliche Information finden. Bei Joomla können hier neben dem Komponenten-Inhalt auch Module und Navigationen enthalten sein. |
| <aside> | <aside> enthält Informationen, die vom Hauptinhalt unabhängig gesehen werden können.
Hier könnte z.B. Werbung stehen oder ein dekorativer Slider oder auch Linklisten. Nimmt man diesen Bereich weg, darf dem Besucher der Seite keine Information entgehen. Auch hier gilt: der Bereich muss keinesfalls neben dem Hauptbereich angeordnet sein. |
| <footer> | Enthält gewöhnlich Teile der Navigation oder zusätzliche Navigation, Module, zusätzliche Informationen, Linklisten. |
Andere Regionen können mehrmals vorkommen. Falls sie mehrfach auf der Seite auftreten, müssen diese jedoch einen eindeutigen Namen haben.
| <nav> | Navigation. Diese Regionen enthalten ein Navigationsmenü als <ul>. Es kann mehrere Navigationsmenüs auf einer Seite geben. Es kann isoliert als eigener Bereich oder innerhalb eines anderen Bereichs stehen. |
| <section> | Bereiche der Seite, die in sich geschlossene Informationsblöcke enthalten. Bei Joomla ist ein Modul ein typisches Beispiel. Sections können beliebig oft vorkommen, auch geschachtelt in allen anderen Bereichen. Dann müssen sie aber identifizierbar sein, entweder über eine id oder durch einen header-Tag im Inhalt. |
| <article> | Ein in sich abgeschlossener Beitrag. Kann geschachtelt sein. Beispiel: Blogbeitrag ist ein <article>. Er kann Kommentare enthalten, die ebenfalls <article> sind. |
| <form> | Auch ein Formular ist eine Region. Beim Aufbau eines Templates ist dies im Allgemeinen nicht relevant. |
Das ARIA Attribut “role”
Parallel und zusätzlich zu HTML Auszeichnungen gibt es das ARIA Attribut “role”. Es kann für alle Blöcke (<div>, <form> usw.) verwendet werden, um ihre Funktion näher zu beschreiben.
Folgende roles gibt es:
| banner | Hier zeigt die Seite Flagge. Dieser Bereich enthält Logo, Firmenname, Slogan.
Bereiche mit role=“banner“ sind gewöhnlich im <header> Bereich angesiedelt |
| navigation | Ein Bereich, der Menüs enthält. Im Joomla Standard Template Protostar z.B. sind Breadcrumbs von einem <div umfasst, das mit role=“navigation“ deklariert wurde. |
| main | Anstelle von role=“main“ soll besser direkt <main> verwendet werden. Diesen Bereich gibt es pro Seite nur einmal! |
| search | role=“search“ umfasst das Search-Formular: <form role=”search” …> |
| article | role=“article“ kann man verwenden, um einzelne Abschnitte zu markieren, zum Beispiel in einem Blog. |
| complementary | Bereiche außerhalb des main-Bereichs, die aber inhaltlich den Main Content ergänzen. In Joomla wäre das etwa „related articles”. |
| contentinfo | Dieser Bereich wird gewöhnlich für Links auf den Hauptinhalt verwendet und ist im <footer> zu finden. |
Quelle: https://w3c.github.io/aria-practices/examples/landmarks/region.html
Wenn Sie Ihr Template erweitern oder ein bestehendes umbauen, gibt es zwei eiserne Regeln ohne Ausnahmen:
- Es muss auf jeder Seite eine main Region geben.
- Alles muss innerhalb einer Region stehen. Wenn Sie neue Modulpositionen in ein Template einbauen, egal ob Landkarte, Videoclip, Megamenü.
Tipp:
- Erfüllen Sie die Erwartungen der Benutzer. Ein kreativ im Footer platziertes Search Formular verwirrt auch Sehende.
- Betreiben Sie keinen Overkill. Nur weil zwei Links nebeneinander stehen, muss noch keine <nav> Region definiert werden.
- Geben Sie HTML den Vorzug, verwenden Sie also <nav … statt <div role=”navigation” ..
- Mischen Sie die landmarks und roles nicht. <nav role =”navigation”> oder <main role=”main”> ist doppelt gemoppelt.
Headings: Das wichtigste Orientierungsmerkmal
Headings sind für die Benutzer assisitiver Technologien das wichtigste Merkmal, um sich auf der Seite zu bewegen. Die Regeln hierfür sind:
- Eine Seite muss mindestens eine Hauptüberschrift haben <H1>.
- Es kann mehrere <H1> Levels geben.
- <H1> .. <H6> sollen auf einer Webseite logisch und lückenlos sein.
Ein Kochrezept gibt es jedoch nicht. Entscheidend ist hier “Awareness” – der Designer muss immer im Hinterkopf haben, dass seine Entscheidungen auch Einfluss auch die Barrierefreiheit der Seite haben.
Joomla gibt eine gewisse Standardstruktur der Headings vor. Webdesigner können diese Struktur einfach übernehmen und sie wird meist korrekt sein. Jeder Template Programmierer kann sie aber absichtlich oder unabsichtlich verändern, daher ist es wichtig, sie zu testen.
Testtools für Seitenstrukturen
Es gibt zahlreiche Tools, die Sie beim Test der Seitenstruktur hinsichtlich ihrer Barrierefreiheit unterstützen. Viele sind einfach online nutzbar, ohne dass ein Add-On im Browser installiert werden muss. Es ist jedoch praktisch, sich eine Toolbar im Browser zu installieren.
Tools interpretieren durchaus nicht gleich. Einige Tools melden falsch positiv, andere melden weniger oder haben andere Schwerpunkte bei der Prüfung. Am besten verwendet man mehrere Tools.
Bedenken Sie aber immer:
- Die Prüfungen sind Momentaufnahmen. In einem CMS ändert sich der Inhalt ständig. Wenn neue Template Overrides oder andere Erweiterungen eingesetzt werden, ändert sich eventuell auch die Struktur der Seite.
- Automatisierte Test sind bei der Entwicklung unverzichtbar, aber sie ersetzen keine menschlichen Tester.
HTML Validierung
Fehler wie nicht geschlossene HTML Tags werden von den Browsern oft abgefangen. Sehende Besucher einer Webseite bemerken sie nicht. Dennoch ist fehlerfreies HTML eine der Voraussetzungen für Barrierefreiheit. Einen sehr peniblen Test erhält man mit dem NU Validator.
Web Developer Toolbar
In der Web Developer Toolbar, die jedem WebDesigner zu empfehlen ist, sehen Sie unter dem Menüpunkt „Barrierefreiheit“, welche Regionen gefunden wurden.
aXe zum Test der Struktur
Das Add-On aXe ist ein Prüftool für die Barrierefreiheit einer Seite. Testweise habe ich nun aus einem Template die Region main entfernt.
aXe meldet in diesem Fall einen Strukturfehler und gibt eine Anweisung, was zu korrigieren ist.
Nun zeigt aXe hier noch einen weiteren Fehler an und dieser bezieht sich auf die Struktur der Überschriften. Die <H1> .. <H6> Tags müssen auf einer Webseite logisch und lückenlos sein.
headingsMap – konsistente Headings
Um dies genauer zu untersuchen wurde hier ein Firefox Add-On namens HeadingsMap verwendet, und siehe da: Auf <H1> folgt unmittelbar <H3>.
In unserem Fall ist es klar: Es wurde eine Seite ohne Content aufgebaut, in dem normalerweise Überschriften mit <H2> zu finden sind. Wenn dies ein Normalfall ist (nicht immer will man den Hauptcontent zeigen), hilf Joomla mit Modul-Einstellungen.
Joomla: Module und ihre Einordnung in das Template
In Seiten, die mit Joomla aufgebaut sind, nehmen Module einen wichtigen Platz ein, oft wichtiger als der zentrale Content Bereich. Sie sind auf der gesamten Seite in allen Regionen einsetzbar.
Hier muss der Administrator darauf achten, dass die Header Level der Module korrekt gesetzt sind. Jedes Modul ist eine eigene Region. Sie können auch als <section> ausgezeichnet sein, brauchen dann aber auch eine identifizierende Bezeichnung.
Modul Header Level
Meist passt die in Joomla vorgegebene Standardeinstellung <h3> für Module, wer aber individuelle Seitenstrukturen aufbaut, muss die Struktur prüfen und gegebenenfalls Header Level passend setzen.
Modultitel
Vor allem, wenn ein Modul ohne Titel ausgegeben wird, ist es für Barrierefreiheit wichtig, eine eindeutige Bezeichnung des Moduls zu haben, die der Screenreader vorlesen kann. Angenommen, ein Modulname wird nicht ausgegeben oder heißt neckisch „Was haben wir denn da?“, kann ein Blinder nicht ahnen, dass sich darunter die Hauptnavigation der Seite verbirgt. In dem Fall hilft eine eindeutige und korrekte Bezeichnung z.B. „Hauptnavigation“.
Seitentitel
Einen Tipp möchte ich nun noch auf den Weg bringen: Überlegen Sie, welchen Seitentitel sie vergeben! Seitentitel, das ist der Name, den Sie oben im Browser-Tab sehen. In Joomla können Sie dafür in der Konfiguration gleich ganz am Anfang festlegen, dass der Name der Seite immer im Seitentitel genannt wird. Wenn Sie das nicht wünschen, dann müssen Sie bei jedem Menüpunkt einen sprechenden Seitentitel vergeben.
Für Menüpunkte vergeben Sie ebenfalls sprechende Seitentitel, falls sie nicht schon gut formuliert sind.
Warum ist das so wichtig? Der Seitentitel ist das erste, was ein blinder odre sehbehinderter Benutzer von Ihrer Seite vorgelesen bekommt. Stellen Sie sich vor, er hat auf seinem Browser 4 Tabs offen, und alle heißen “Aktuelles”. Dann ist es doch wesentlich aussagefähiger, wenn in Ihrem Titel nun steht „Joomla barrierefrei – Aktuelles”.
Barrierefrei: Joomla Templates mit landmarks und roles – Fazit
Sie sehen schon, Barrierefreiheit findet hauptsächlich im Verborgenen statt. Wenn das Template als Gerüst barrierefrei ist, können die Designer und Override Programmierer darauf aufsetzen und dann gilt die furchtbare Wahrheit: “Kaputtmachen geht immer”. Also immer wachsam bleiben und testen, testen testen..
Weiterlesen
- Zum Thema Barrierefreiheit gibt es unendlich viel zu wissen und unendlich viel Literatur. In dieser Arbeit wurde hauptsächlich Bezug genommen auf https://wave.webaim.org.
- Bypass-Empfehlung: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html
- Barrierefrei fängt bei der Struktur an: Joomla Templates mit landmarks & roles - 15. Oktober 2020
- Workflow in Joomla! v4 – der Workflow für strukturierte Prozesse - 7. September 2020
- Der Publishing Workflow in Joomla! v4 - 1. Juli 2019
