Barrierefreie Inhalte erstellen

Warum ist eine gute Struktur wichtig?

Eine gute Strukturierung deiner Website und barrierefreie Inhalte gehen Hand in Hand und spielen in verschiedenen Bereichen der Website-Optimierung eine entscheidende Rolle. Selbst jenseits der Barrierefreiheit sind klar strukturierte Inhalte ein technisch äußerst wichtiges Merkmal. Nicht nur bezüglich der Suchmaschinenoptimierung hat eine durchdachte Inhaltsstruktur der Website viele Vorteile. Auch was die Benutzererfahrung angeht, kann die Erstellung optimierter Inhalte einen Gewinn liefern. Die Website-Besucher werden durch sie bestmöglich angesprochen und Inhalte können präzise und effektiv vermittelt werden.

Eine klare und effektive Strukturierung erleichtert es den Nutzern erheblich, die Website visuell schnell zu erfassen und die bereitgestellten Informationen zu verstehen. Für sehende Nutzer ist die Struktur durchaus auch ein Entscheidungskriterium, ob der Nutzer tiefer in den Inhalt einsteigt, oder die Website nach einem kurzen Überfliegen direkt wieder schließt. Eine benutzerfreundliche Gestaltung kann also maßgeblich zur Verweildauer der Besucher auf der Website beitragen.

Noch wichtiger ist eine gute Struktur von Web-Inhalten, wenn es um die Barrierefreiheit geht. Insbesondere für Nutzer mit eingeschränkter Sehfähigkeit, die auf assistive Technologien wie Screenreader angewiesen sind. Für diese Zielgruppe ist eine klare und sinnvolle Struktur der Website von entscheidender Bedeutung, da sie sich nicht auf visuelle Elemente verlassen können. Für diese Websites müssen also barrierefreie Inhalte erstellt werden.

Hierfür ist es unerlässlich, dass der HTML-Code oder das Markup der Website bestimmten hierarchischen Regeln folgt. Darüber hinaus sollten spezielle HTML-Tags verwendet werden, die die Nutzung assistiver Technologien unterstützen. Dies gewährleistet, dass auch Menschen mit Sehbehinderungen die Inhalte problemlos wahrnehmen und verstehen können. Eine barrierefreie Website ermöglicht es allen Nutzern, gleichberechtigt auf die angebotenen Informationen zuzugreifen, unabhängig von ihren individuellen Fähigkeiten oder Einschränkungen.

Welche Auszeichnungen gibt es bei Textinhalten bezüglich der Barrierefreiheit?

Die verschiedenen Auszeichnungen für Textinhalte auf einer Website sind keineswegs neu und stehen seit jeher für die Strukturierung zur Verfügung. Im Folgenden gehen wir genauer auf die einzelnen Elemente ein.

Überschriften

Überschriften bilden das Kernstück eines hochwertigen Textes und funktionieren als Einführung in das jeweilige Thema, das in den nachfolgenden Absätzen behandelt werden soll. Zudem können sie einen umfangreichen Text in verständliche und überschaubare Abschnitte aufteilen und spezifische Unterthemen einleiten.

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. Auf jeder Unterseite der Website sollte es außerdem nur eine <h1> geben.

Aufeinander folgenden Überschriften sollten stets hierarchisch untergliedert sein. Auf eine <h1> folgen also eine oder mehrere <h2>, danach eine oder mehrere <h3> und so weiter. Im hierarchischen Verlauf sollte 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 Hierarchie zurück gehen. Auf eine <h3> kann also wieder eine <h2> folgen.

Die Bedeutung dieser Struktur für die Barrierefreiheit ist enorm, da sie es sehbehinderten und blinden Nutzern ermöglicht, sich anhand der Überschriften zu orientieren. Ähnlich einem Inhaltsverzeichnis können Sie sich außerdem mit einem Screenreader alle Überschriften der Seite ausgeben lassen, um gezielt zu einem bestimmten Inhaltsbereich zu springen. Dies erhöht die Zugänglichkeit und Navigierbarkeit der Website erheblich, indem es allen Nutzern, unabhängig von ihren individuellen Einschränkungen, eine effiziente und sinnvolle Nutzung der Informationen ermöglicht.

Beispiel:

<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

Ein umfangreicher Text sollte in mehrere Abschnitte unterteilt werden, um sowohl die Übersichtlichkeit als auch den Lesefluss zu verbessern. Diese Untergliederung erfolgt in der Regel mithilfe von Absätzen, die durch den HTML-Tag <p> gekennzeichnet werden. Jeder Absatz sollte dabei sinnvoll mit Inhalten gefüllt sein. Es ist also wichtig zu vermeiden, leere Absätze lediglich als visuelle Leerzeilen zu verwenden.

Beispiel:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Listen

Im Web bezieht sich die Liste auf eine einfache Aufzählung, die durch entsprechende Aufzählungszeichen gekennzeichnet ist. Hierbei wird zwischen ungeordneten und geordneten Listen unterschieden. Sowohl die Liste als Ganzes als auch die einzelnen Listenelemente werden entsprechend ausgezeichnet. Dies ist besonders wichtig für Nutzer von Screenreadern, da sie auf diese Weise wissen, dass eine Aufzählung folgt und sich entsprechend darauf einstellen oder die Aufzählung gegebenenfalls überspringen können.

Es ist also entscheidend, die angemessene Auszeichnung für Aufzählungen zu verwenden, anstatt rein visuelle Listen mit einfachen Bindestrichen oder anderen grafischen Elementen als Aufzählungspunkte zu erstellen. Solche visuellen Listen sind keine barrierefreie Praxis und sollten keinesfalls verwendet werden, da sie die Zugänglichkeit erheblich beeinträchtigen können.

Eine ungeordnete Liste als Ganzes wird mit einem <ul> ausgezeichnet, ein einzelner Listenpunkt mit einem <li>.

Beispiel:

<ul>
   <li>Punkt 1</li>
   <li>Punkt 2</li>
   <li>Punkt 3</li>
</ul>

Eine geordnete Liste stellt die Aufzählung automatisch mit einer fortlaufenden Nummerierung dar. Das Markup unterscheidet sich nur durch das Listenelement <ol>.

Beispiel:

<ol>
   <li>Punkt 1</li>
   <li>Punkt 2</li>
   <li>Punkt 3</li>
</ol>

Zitate

Damit eingeschränkte Nutzer auch verstehen, dass es sich bei einem Satz um ein Zitat handelt, muss dieser mit <blockquote> ausgezeichnet werden.

Beispiel:

<blockquote>Ich bin das Zitat einer berühmten Person.</blockquote>

Fremdsprachiger Text

Um die Barrierefreiheit auch hinsichtlich anderer Sprachen sicherzustellen, ist es erforderlich, Wörter oder Passagen in anderen Sprachen zusätzlich mit einem "lang"-Attribut zu kennzeichnen. Zum Beispiel sollte ein englischer Text mit dem Attribut lang="en" versehen werden. Eine Liste der Sprachcodes ist beispielsweise auf W3Schools verfügbar. Diese Maßnahme gewährleistet, dass Wörter oder Texte auch tatsächlich in der korrekten Sprache vorgelesen werden.

Beispiel:

<p lang="en">This paragraph will be read to you in English.</p>

Tabellen

Auch bei Tabellen spielt die Struktur für seheingeschränkte Website-Besucher eine entscheidende Rolle. Besonders große Tabellen, die eine Vielzahl von Zeilen und Spalten enthalten, müssen im Sinne der Barrierefreiheit für Benutzer, die nicht auf visuelle Hilfen zurückgreifen können, klar und präzise definiert sein.

In HTML werden Zeilen als table row mit dem Tag <tr> gekennzeichnet. Zeilen- oder Spaltenüberschriften, die table header, werden mit <th> gekennzeichnet, während Zellen als table data <td> ausgezeichnet werden. Dies ermöglicht es Nutzern von Screenreadern, die Verbindung zwischen Überschrift und Inhalt der Tabelle klar zu erkennen.

Grundsätzlich sollten Tabellen stets so einfach wie möglich gestaltet sein, um die Verständlichkeit und Benutzerfreundlichkeit zu fördern.

Beispiel:

<table>
   <tr>
      <th>Überschrift 1</th>
      <th>Überschrift 2</th>
   </tr>
   <tr>
      <td>Aenean eu leo quam.</td>
      <td>Nulla vitae elit libero, a pharetra augue.</td>
   </tr>
   <tr>
      <td>Curabitur blandit tempus porttitor.</td>
      <td>Donec id elit non mi porta gravida at eget metus.</td>
   </tr>
</table>

Abkürzungen und Akronyme

Abkürzungen und Akronyme sollten bei der ersten Verwendung erläutert werden. Allerdings empfiehlt es sich auch im weiteren Verlauf eines Textes, eine Erklärung anzubieten. Dafür existiert <abbr> als HTML-Tag. Für mehr Details zum Thema: Abkürzungen und Akronyme

Beispiel

<abbr title="zum Beispiel">z.B.</abbr>

Fazit

Es wird deutlich, dass die Struktur bei barrierefreien Inhalten von größter Bedeutung ist. Schon mit minimaler Anstrengung können durchaus strukturierte Website-Inhalte erstellt werden, die für Menschen mit Seheinschränkungen und assistiven Technologien leicht zugänglich sind.

Es ist ratsam, den Inhalt so einfach wie möglich zu halten und unnötige Verschachtelungen zu vermeiden. Selbst fernab der Barrierefreiheit gibt es dafür so gut wie nie einen Grund.

HTML hat sich mit allen Facetten über viele Jahre hinweg bewährt und bietet mit den vorhandenen Tags und Auszeichnungen sämtliche Werkzeuge, um eine klare und geordnete Struktur zu schaffen. Diese Möglichkeiten sollten genutzt werden.

Gleiches gilt auch in Verbindung mit CSS. Anstelle von visuellen Tricks, um beispielsweise aus einem einfachen Absatz per CSS eine Überschrift zu erstellen, sollte einfach das bereits vorhandene Markup für Überschriften genutzt werden. Schließlich fördert dies nicht nur die Barrierefreiheit, sondern trägt darüber hinaus auch zur leichteren Pflege und Wartung der Website bei.