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.

Abbildung1 - Barrierefrei - Joomla-Templates mit landmarks und roles

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.

Zum 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.

Abbildung 2 - Barrierefrei - Joomla-Templates mit landmarks und roles - Web Developer Toolbar

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.

Abbildung 3 - Barrierefrei - Joomla-Templates mit landmarks und roles - aXe zum Test der Struktur

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>.

Abbildung 4 - Barrierefrei - Joomla-Templates mit landmarks und roles

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.

Abbildung 5 - Barrierefrei - Joomla-Templates mit landmarks und roles

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.

Abbildung 6 - Barrierefrei - Joomla-Templates mit landmarks und roles

Für Menüpunkte vergeben Sie ebenfalls sprechende Seitentitel, falls sie nicht schon gut formuliert sind.

Abbildung 7 - Barrierefrei - Joomla-Templates mit landmarks und roles

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

 

Christiane Maier Stadtherr

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Die von Ihnen hier erhobenen Daten werden von der Host Europe GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.hosteurope.de/AGB/Datenschutzerklaerung/