Barrierefreiheit mit HTML5

In diesem Blogartikel erkläre ich welche Möglichkeiten HTML5 bietet um Webseiten barrierefrei zu entwickeln.

Was ist HTML?

HTML (HyperText Markup Language) ist eine plattformunabhängige Dokumentbeschreibungssprache, in der Web-Seiten geschrieben sind. Plattformunabhängig bedeutet das sie in jedem Betriebssystem (Windows, Android, IOS und Linux) verwendet werden kann.

Barrierefreiheit / Barrierefreies Webdesign – Definition

Barrierefreies Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie auch für Menschen mit körperlichen und geistigen Beeinträchtigungen wahrnehmbar ist. Es geht also darum dass Websites für alle Menschen wahrnehmbar und erfahrbar sind. Oft kommt auch der Begriff Barrierefreies Internet oder Barrierefreiheit Internet oder barrierefreie Webseiten / Websites / Internetseiten oder Accessibility (=Zugänglichkeit) bei Webauftritten oder behindertengerechtes Webdesign anstelle von barrierefreies Webdesign vor. Dies meint aber das Gleiche.

Barrierefreiheit bei HTML5

Für Personen, die lieber Video schauen, gibt es jetzt ein Youtube-Video von mir:

Bei HTML5 gibt es bezüglich der Barrierefreiheit einen Philosophiewechsel. Zusatzinformationen sollen nicht länger in unsichtbaren Attributen wie alt oder summary untergebracht, sondern vielmehr im normalen HTML-Body platziert werden. Denn diese Zusatzinformationen sind zum einen tendenziell für alle Zielgruppen interessant, und sie nötigen den Seitenbetreiber darüber hinaus zur konstanten Aktualisierung. Im Fokus stehen somit nicht unbedingt zahlreiche neue Funktionen, sondern vielmehr punktuelle Verbesserungen.
Eine der spektakulären Neuerungen in HTML5 ist die Forderung, dass Browser Video- und Audiomedien ohne zusätzliche Software, die so genannten Plug-ins, durch den Browser wiedergeben. Hierfür gibt es in HTML5 die beiden Elemente video und audio. Allein dies beseitigt letztlich die Barriere, zusätzliche Software installieren und korrekt zuordnen zu müssen. Beiden Elementen gemeinsam ist die grundsätzliche Auszeichnungsmethode, zwischen öffnendem und schließendem Tag die Quellen über das Element source anzugeben.
Leider führt die Beseitigung der einen Barriere direkt zu einer neuen: Denn die unterstützten Medienformate weichen zwischen den Browsern deutlich voneinander ab. Nicht jeder Hersteller möchte das populäre MP3-Format lizenzieren. So kann Chrome solche Dateien wiedergeben, Firefox dagegen nicht, weil Mozilla auf das offene OGG-Format setzt. Anbietern von Video- und Audiodateien auf Internetseiten bleibt dadurch nur, mehrere Quellen in unterschiedlichen Formaten anzubieten, um sicherzugehen, dass der Webseitenbesucher Zugang hierzu erhält.

Leider gibt es bei HTML5 keine Möglichkeit im Video-Blocks eine Beschreibung für das Video hinzuzufügen, damit der Screenreader das lesen kann. Zwar existiert das Attribut kind innerhalb des Elements track, über das man Untertitel einbinden kann, jedoch erfordern diese das Nachladen einer externen Datei.
Bei Audiodateien wäre es für Gehörlose wichtig, dass der Inhalt der Audiodatei als Textliche Beschreibung angeboten werden kann. Genau wie beim Videoelement findet sich aber in HTML5 kein Platz dafür. Der Aufbau ist im Wesentlichen gleich: Innerhalb des umschließenden Elements audio definieren Autoren die Quellen. Um sicherzugehen, dass die wichtigen Browser das Medium wiedergeben können, sollten sie wie beim Videoelement mehrere Dateiformate einstellen.

Bild mit Farbverlauf und Schrift: Barrierefreiheit mit HTML5
Bild mit Farbverlauf und Schrift: Barrierefreiheit mit HTML5

 

Neue und verbesserte Gliederungs-Tags

HTML5 bietet eine Vielzahl von neuen Elementen beispielsweise zur Gliederung einer Seite in Regionen:

  • <article> ist für Teilinhalte, die für sich stehen können („unabhängige Inhalte“ wie z.B. ein Blog-Post, ein Kommentar oder ein Zeitungsartikel).
  • <aside> ist für Inhalte, die unabhängig vom Inhalt für sich stehen könnten, wie Sidebars.
  • <footer> ist für ergänzende Angaben zu einer Region, z.B. Autor oder weiterführende Links zu einem Artikel.
  • <header> ist für den Kopfbereich einer Seite, z.B. Logo/Banner, und für den Kopfbereich anderer Regionen.
  • <nav> ist für Navigationsleisten.
  • <section> ist für generische Inhalte (z.B. Abschnitt eines längeren Textes). Üblicherweise sollten <article> oder <div> genutzt werden.

Barrierefreiheit bei Formulare

Eine deutliche Verbesserung steckt in den neuen Formularmöglichkeiten von HTML5. Das Attribut autofocus sorgt dafür dass ein festgelegtes Element nach dem Laden der Seite zuerst den Fokus bekommt, sprich aktiv ist.  Das ist der Grund warum dieser Blogartikel nach dem öffnen runter springt. Ich habe im nachstehenden Formular den autofocus gesetzt.   Ein weiteres neues Attribut heißt placeholder. Es bewirkt Musterdaten in Eingabefelder und verringert Irrtümer bezüglich des Formats angeforderter Daten.
Diese beiden Neuerungen in Kombination mit dem seit HTML 4 bestehenden tabindex-Attribut – hiermit ist die Reihenfolge der Formularelemente beim Anspringen per Tabulatortaste gezielt steuerbar – ist vor allem bei komplexen Formularen mit einer hohen Anzahl von Elementen die Bedienbarkeit per Tastatur stark vereinfachbar.

Neue Attribute in HTML5 für Formulare

Code-Beispiel:


<form action="#" method="post">
<input tabindex="2" name="a" type="text" />
<input tabindex="3" name="vorwahl" type="text" placeholder="07121" autofocus />
</form>

So sieht das Formular auf der Webseite dann aus

Name:
Vorwahl:

Ups! Sie haben den Artikel geöffnet und sind hier gelandet? Ja, das Eingabefeld „Vorwahl“ hat den autofokus. Bitte hochscrollen und den Artikel von oben an lesen 🙂

Bestimmte Attribute für Bedeutungen

Verschiedene Textarten wie zum Beispiel Fließtext, Kontaktdaten oder Kalenderinformationen konnten bisher nicht ausgezeichnet werden. Zur identifizierbaren Auszeichnung von typischen Daten auf einer Internetseite stehen mit HTML5 die sogenannten Mikrodaten zur Verfügung.
Das bezüglich Barrierefreiheit oft erwähnte Attribut accesskey erfährt mit HTML5 eine wesentliche Aufwertung. Mit dem Attribut accesskey kann man nun jedes HTML-Element valide ausgezeichnet werden. Über dieses Attribut ist ein direktes Ansteuern per Tastaturkürzel definierbar, was Sehbehinderten und motorisch eingeschränkten (Tastatur-)Benutzern zumindest teilweise zugute kommt.

Die Webseite HTML5 Accessibility

Es gibt eine englischsprachige Webseite von Steve Faulkner. Er ist HTML5 Spezifikations-Editor und spezialisiert auf Barrierefreiheit. Von ihm ist die Webseite HTML5 Accessibility  .
Auf dieser Webseite finden Sie folgende Informationen:

  • Eine Übersicht welcher Browser zu wie viel Prozent HTML5 unterstützt
  • Eine vollständige Auflistung aller HTML5 Elemente nach Themen sortiert, welche die Barrierefreiheit unterstützen

HTML5 und WAI-ARIA

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) ist ein empfohlener Webstandard des W3C. Er soll Webseiten für behinderte Menschen besser zugänglich machen, insbesondere für blinde Anwender, die Screenreader (Vorleseprogramme) verwenden.
Zum Schluss noch eine Video. Ein Vortrag von Marco Zehe über „HTML5 und WAI-ARIA, richtig modern barrierefrei entwickeln“

Schlussbemerkung Barrierefreiheit mit HTML5

HTML5 ist die erste HTML-Version die barrierefreies Webdesign von Haus aus unterstützt. Alle diejenigen Web-Entwickler, die sich auf barrierefreies Webdesign spezialisiert haben, sollten sich mit HTML5 beschäftigen.

Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Appentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java, C# und Python, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS.

Schreibe einen Kommentar