Barrierefreiheit im Internet

Erreichen Sie Ihre Zielgruppe effizienter durch Quellcode-Optimierungen

Barrierefreiheit beschreibt im allgemeinen Sprachgebrauch die Einbindung von Menschen mit körperlichen oder geistigen Benachteiligungen in den Alltag. Im Kontext von Internetseiten wird der Begriff Barrierefreiheit weiter ausgedehnt. Barrierefreiheit im Internet bedeutet, dass alle Nutzer – unabhängig von deren technischen Equipment, sprachlichen Barrieren oder tatsächlichen, körperlichen Einschränkungen eine Webseite bedienen und deren Inhalte verstehen können. Nennenswerte Einschränkungen, die beachtet werden sollten, sind beispielsweise Blindheit, Sehschwäche, fehlendes Farbsehen, Gehörlosigkeit, Muttersprache des Nutzers und sprachliches Level der Zielgruppe.

Heutzutage schließt Barrierefreiheit im Internet aber auch ein, dass Webseiten auf 4K-Bildschirmen, Notebooks, Tablets, Smartphones und manchmal sogar Smartwatches angezeigt und bedient werden können. Außerdem sollten sowohl die Inhalte als auch der HTML-Code einer Webseite für gute Lesbarkeit und das Auslesen mit Textreader-Software optimiert sein.

Wieso Barrierefreiheit wichtig ist

Neben der Einbindung von Menschen mit Behinderungen, die ohne Frage wichtig ist, gibt es auch ganz praktische und wirtschaftliche Gründe, seinen Internetauftritt barrierefrei zu gestalten. Klickt beispielsweise ein User in seiner Facebook-App auf eine Werbeanzeige und wird auf eine Webseite weitergeleitet, die nicht für Smartphones optimiert ist, gehen wichtige Conversions (Umsätze und Interaktionen) verloren.

Grundstruktur und semantische Elemente in HTML5

Die semantischen Elemente, wie <header> oder <nav>, sind bereits seit 2004 Teil des HTML5-Standards, aber noch lange nicht in der Realität der Web-Programmierung angekommen. Sie helfen nicht nur bei der Suchmaschinenoptimierung, sondern sind auch wichtig für moderne Text-Reader-Softwares. Text-Reader sind Tools, mit denen sehgeschädigte Menschen die Inhalte einer Webseite von einem Programm vorlesen lassen können. Die Text-Reader werden aber auch bei Internet-Nutzern ohne Sehschwäche immer populärer, da sie bequem sind und Zeit sparen.

Verwenden Sie deshalb immer semantische Elemente, um wichtige Seiten-Elemente, wie die Hauptnavigation, den Hauptinhalt und den Fußbereich zu kennzeichnen.

Wichtige semantische Elemente:

<header>: Der Kopfbereich der Webseite, umschließt üblicherweise die Hauptnavigation und ein Titelbild

<nav>: Die Hauptnavigation der Webseite

<main>: Hauptinhalt der Webseite

<section>: Normaler Inhaltsbereich der Webseite

<article>: Unabhängiger Teilabschnitt, beispielsweise ein Blog-Posting oder News-Artikel

<footer>: Der Fußbereich der Webseite, üblicherweise mit Links auf Unternehmens-Partner, Impressum und Datenschutz

Intuitive Menüführung statt experimenteller Designs

Kreative und extravagante Designs sind verlockend und verleihen einem Internetauftritt eine individuelle Identität. Ein ausgefallenes Design darf aber nie auf Kosten der Usability gehen. Damit die Inhalte einer Seite barrierefrei aufgenommen werden können, muss sich ein Besucher schnell und einfach auf der Seite zurechtfinden. Um das zu gewährleisten, müssen vorhandene Erwartungsmuster der Besucher berücksichtigt werden.

Beispiele für solche Erwartungsmuster sind:

• Die Hauptnavigation befindet sich am oberen oder linken Seitenrand
• Der Warenkorb befindet sich im oberen, rechten Bereich des Online-Shops
• Über Klick auf das Unternehmenslogo kommt man zur Startseite
• Impressum, Datenschutz und Kontakt finden sich im Fußbereich

In Ausnahmefällen kann man aus solchen Konventionen durchaus ausbrechen. Es sollte aber immer gewährleistet sein, dass Grundfunktionen einer Webseite intuitiv bleiben. Ein Besucher sollte sich mit den Inhalten der Webseite beschäftigen, Käufe tätigen oder Interaktionen durchführen, aber nicht auf der Suche nach der Hauptnavigation genervt die Seite verlassen.

Klare Hierarchien und kurze, prägnante Überschriften

Die Inhalte der Webseite sollten klar strukturiert sein. Durch eindeutige Hierarchien in Überschriften und eine übersichtliche Struktur kann der Inhalt der Seite schnell und einfach erfasst werden. Die HTML-Elemente <h1> bis <h6> definieren Überschriften und geben Ihnen eine Hierarchie. Die Überschriften werden relevanter in Absteiger Reihenfolge. Die <h1> repräsentiert dabei das Hauptthema der Seite und sollte nur einmal verwendet werden. Ebenso die <h2> Überschrift. Dementsprechend prägnant und aussagekräftig müssen die Überschriften sein.

Die optimale Länge einer Überschrift sollte 5 Wörter nicht übersteigen und mindestens ein Schlüsselwort enthalten, an dem das Kernthema des folgenden Absatzes erkennbar ist. Das erleichtert das Überfliegen des Textes und ermöglicht es dem Besucher, die Informationen oder Produkte zu finden, die er sucht.

Eine sinnvolle Gliederung könnte beispielsweise so aussehen:

<h1>Hauptüberschrift (Themenname)</h1>

<h2>Unterüberschrift (Kurzbeschreibung des Themas)</h2>

<p>Einleitungstext</p>

<h3>Absatzüberschrift zu Teilthema</h3>

<p>Artikeltext</p>

Optimierung für Mobilgeräte

Tablets und Smartphones gehören nun schon länger zum Alltag der meisten Zielgruppen. Neue Endgeräte sind Smartwatches und hochauflösende 4K-Monitore. All diese Geräte benötigen in der Regel spezielle Template-Optimierungen, damit eine Webseite auch auf diesen Geräten bedient und deren Inhalte wie gewünscht kommuniziert werden können.

Für die Optimierung für Mobilgeräte werden in der CSS-Datei Media Queries (Abschnitte im CSS, welcher der Optimierung einer speziellen Bildschirmauflösung dienen) mit festen Pixelwerten definiert, ab diesen sich das Layout der Webseite auf die entsprechenden Endgeräte anpasst. In der Regel werden dafür die Werte der Standard-Bildschirmauflösungen von modernen Desktop-PCs, Notebook, Tablets, Smartphones und Smartwatches verwendet: 1920px, 1024px, 768px, 480px, 320px.

Innerhalb dieser Media Queries kann man die Komplexität des Webseiten-Layouts schrittweise reduzieren. Das ist wichtig, weil ein Besucher auf seinem Desktop-PC ganz andere Wünsche und Ansprüche hat, wie jemand der mit seinem Smartphone (möglicherweise unter Zeitdruck) eine Webseite besucht. Inhalte und Funktionen, die in der Desktop-Variante einer Webseite sinnvoll sind, können auf Mobilgeräten zu einem Störfaktor werden.

Slider-Funktionen und große Bildergalerien haben in einer mobilen Webseite beispielsweise nichts zu suchen. Auch die Komplexität und die Bedienung von Menüs, insbesondere der Hauptnavigation, sollte gezielt reduziert werden.

Um eine saubere Struktur im CSS-Code zu gewährleisten, sollten sinnvolle Abschnitte definiert werden. Styles, welche zu einem bestimmten Teil der Webseite gehören, können unter einer passenden Überschrift zusammengefasst werden. Außerdem sollte man darauf achten, dass die Optimierungen der einzelnen Bildschirmauflösungen in absteigender oder aufsteigender Reihenfolge vorgenommen werden und nicht wild durcheinander. Innerhalb der Media Queries sollte ebenfalls auf eine sinnvolle Gliederung geachtet werden. Das macht die CSS-Datei nicht nur übersichtlicher, sondern spart auch Arbeitszeit und erleichtert Anpassungen zu einem späteren Zeitpunkt.

Eine Serie an Media Queries im CSS könnte wie folgt aussehen:

/* Desktop-Styling */
[Desktop-Styles]

/* Tablet Querformat */
@media (max-width:1024px) {
[Tablet-Styling]
}

/* Tablet Hochformat */
@media (max-width:768px) {
[Smartphone-Styling]
}