CLICKSPORTSEine gute Strukturierung der Inhalte einer Website ist stets ein sehr wichtiges Merkmal. Nicht nur für die Suchmaschinenoptimierung hat eine durchdachte Inhaltsstruktur viele Vorteile. Im Zuge eines guten Nutzererlebnisses ist die Struktur von Texten ein äußerst wichtiger Punkt. Schließlich ist eine schnelle visuelle Erfassung der Website und der auf ihr bereitgestellten Informationen für sehende Nutzer ein großes Entscheidungskriterium wenn es darum geht, tiefer in den Inhalt einzusteigen oder den Browser-Tab gleich wieder zu schließen. Noch wichtiger ist die Struktur allerdings im Zuge der Barrierefreiheit, besonders für eingeschränkte Nutzer mit assistiven Technologien wie einem Screenreader.
Wer sich auf Websites nicht visuell orientieren kann, ist auf eine andere Navigationsstruktur angewiesen. Der HTML-Code, oder auch das Markup, sollte in diesem Fall einigen hierarchischen Grundregeln folgen und außerdem mit speziellen HTML-Tags für die Nutzung assistiver Technologien ausgestattet sein.
Welche Unterschiede gibt es bei Textinhalten bezüglich der Barrierefreiheit?
Die verschiedenen Textinhalte sind keineswegs neu und stehen seit jeher für die Strukturierung zur Verfügung.
Überschriften
Sie sind nahezu das Herzstück eines guten Textes und stehen als ein kleiner Anreißer für das in den folgenden Absätzen behandelte Thema. Sie können einen langen Text und seine Absätze zudem in verschiedene Unterthemen unterteilen.
Eine Überschrift wird als heading <h> ausgezeichnet. Bis zu 6 Stufen sind für eine Überschrift möglich, wobei eine <h1> die erste und wichtigste Überschrift sein sollte. Es sollte auf jeder Unterseite der Website außerdem nur eine <h1> geben.
Alle aufeinander folgenden Überschriften sollten hierarchisch untergliedert sein. Auf die <h1> folgen also eine oder mehrere <h2>, danach eine oder mehrere <h3> und so weiter. Es sollte im hierarchischen Verlauf keine Überschriftenebene übersprungen werden, was bedeutet, dass auf eine <h2> keine <h4> folgen sollte. Am Ende eines hierarchischen Abschnitts kann es allerdings auch wieder einen Schritt in der Ebene zurück gehen. Auf eine <h3> kann also wieder eine <h2> folgen.
Dies alles ist für die Barrierefreiheit äußerst wichtig, da seheingeschränkte und blinde Nutzer sich anhand der Überschriftenstruktur orientieren können. Ähnlich einem Inhaltsverzeichnis können Sie sich mit einem Screenreader alle Überschriften der Seite ausgeben lassen, um gezielt zu einem bestimmten Inhaltsbereich zu springen.
<h1>Der Titel der Seite</h1> Donec ullamcorper nulla non metus auctor fringilla. <h2>Eine Zwischenüberschrift auf Ebene 2</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <h3>Eine Zwischenüberschrift auf Ebene 3</h3> Cras mattis consectetur purus sit amet fermentum. <h2>Eine neue Zwischenüberschrift auf Ebene 2</h2> Sed posuere consectetur est at lobortis.
Absätze
<p> ausgezeichnet werden. Ein Absatz sollte stets mit Inhalt gefüllt sein. Es ist also zu vermeiden, leere Absätze als rein visuelle Leerzeilen einzubinden. <p>Maecenas faucibus mollis interdum. Donec sed odio dui.</p>
Listen
Bei der Liste, womit im Web eine einfache Aufzählung mit entsprechenden Aufzählungszeichen gemeint ist, wird zwischen ungeordneter und geordneter Liste unterschieden. Ausgezeichnet wird einerseits die Liste selbst, als auch die einzelnen Listenpunkte. Der Screenreader-Nutzer weiß damit, dass im Anschluss eine Aufzählung folgt und kann sich entsprechend darauf einstellen oder die Aufzählung auch überspringen. Für eine Aufzählung sollte also stets die entsprechende Auszeichnung verwendet werden. Rein visuelle Listen, beispielsweise mit einfachen Bindestrichen als Listenpunkte, sind keine guten Maßnahmen für die Barrierefreiheit und sollten keinesfalls Verwendung finden.
Die ungeordnete Liste als Ganzes wird mit einem <ul> ausgezeichnet, ein einzelner Listenpunkt mit einem <li>.
<ul> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> </ul>
Die geordnete Liste stellt die Aufzählung automatisch mit einer fortlaufenden Nummerierung dar. Das Markup unterscheidet sich nur durch sein Listenelement <ol>.
<ol> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> </ol>
Zitate
<blockquote> ausgezeichnet werden. <blockquote>Ich bin das Zitat einer berühmten Person.</blockquote>
Fremdsprachiger Text
Wörter oder Passagen in anderen Sprachen müssen für die Barrierefreiheit zusätzlich mit einem lang-Attribut ausgezeichnet werden. Beispielsweise wird ein englischer Text mit dem Attribut lang=„en“ ausgezeichnet. Eine Auflistung der Sprach-Codes ist bei W3Schools zu finden. Nur so lässt sich sicherstellen, dass das Wort oder der Text in der richtigen Sprache vorgelesen wird.
<p lang=„en“>This paragraph will be read in English.</p>
Tabellen
Auch bei Tabellen spielt die Struktur für seheingeschränkte Website-Besucher eine tragende Rolle. Besonders große Tabellen, die eine Vielzahl von Zeilen und Spalten beinhalten, müssen im Zuge der Barrierefreiheit für Benutzer, die nicht auf visuelle Hilfen zurückgreifen können, klar definiert sein.
Zeilen werden als table row <tr> definiert. Zeilen- oder Spaltenüberschriften, die table header, werden mit <th> gekennzeichnet, während Zellen als table data <td> ausgezeichnet werden. Dadurch kann die Verbindung von Überschrift und Inhalt für den Nutzer eines Screenreaders ersichtlich werden.
Prinzipiell sollten Tabellen so einfach wie möglich gestaltet sein.
<table>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
</tr>
<tr>
<td>Quam Tellus Ligula Ultricies Ridiculus</td>
<td>Quam Porta Sem Ligula Aenean</td>
</tr>
<tr>
<td>Consectetur Fringilla Euismod Fermentum Nullam</td>
<td>Magna Inceptos Consectetur Condimentum Sit</td>
</tr>
</table>
Fazit
Man sieht, Struktur ist alles bei barrierefreien Inhalten. Schon mit sehr wenig Aufwand lässt sich für seheingeschränkte Menschen mit assistiven Technologien ein gut erfassbarer Website-Inhalt erstellen.
- So einfach wie möglich. In keinem Fall sollten Inhalte unnötig verschachtelt angelegt werden. Auch fernab der Barrierefreiheit gibt es dafür so gut wie nie einen Grund.
- HTML hat sich mit all seinen Facetten über viele Jahre etabliert und stellt mit den existierenden Tags und Auszeichnungen alle Werkzeuge für eine geordnete Struktur bereit. Nutzen Sie diese!
- Gleiches gilt in Verbindung mit CSS. Nutzen Sie beispielsweise für Überschriften das existierende Markup statt aus einem Absatz nur visuell mit CSS eine Überschrift zu machen.
Julian Uebe
Soll deine Seite barrierefrei werden?
Ich helfe gerne weiter. Lass dich kostenlos beraten!