Barrierefreiheit pragmatisch

—   Einfache Fahrt   —

Erreichen Sie Menschen mit und ohne Handicap und verbessern Sie dabei die Usability Ihrer Website

Manchmal fehlt die Zeit, um eine Seite barrierefrei nach den Standards BITV oder WCAG zu programmieren. Besonders, wenn die Seite nachträglich barrierefrei gemacht werden soll, kann das sehr aufwändig werden.

Hier eine kurze und unvollständige Liste von Techniken, mit denen man zwar nicht durch den BITV-Test der BIK kommt, aber die Benutzbarkeit beispielsweise für Menschen mit Sehbehinderungen, Blinde und Menschen mit spastischen Behinderungen deutlich erhöht.

To-Do-Liste

  • jede Seite sollte einen eindeutigen <title> haben.
  • Durchgängige Überschriften-Hierarchie ohne Lücken (also nicht <h1> und direkt darauf folgend <h3> unter Auslassung von <h2>) verwenden.
  • Auf ausreichenden Kontrast zwischen Text und Hintergrund achten und vor allem für Fließtext gut erkennbare Schriftarten verwenden.
  • Links in Navigationselementen in eine Liste <ul><li> ... </li></ul> packen. Zur komfortableren Navigation per Tastatur vielleicht Sprunglinks (Synonym Skip Links) anbieten.
  • Links sollten auch dann an der Farbe erkennbar sein, wenn Nutzer farbenblind sind. Das erreicht man durch eine deutlich vom Fließtext abweichende Helligkeit des Links und / oder eine Unterstreichung. Bei Links sollte man das title-Attribut belegen und hier das Ziel des Links erklären, also z.B. <a ... title="zur Startseite" ...>.
  • Bei Grafiken das alt-Attribut verwenden. Falls die Grafik nur ziert oder zum Erzeugen von Abständen dient, bleibt das alt-Attribut leer, also <img ... alt="" ... />. Bei Grafiken, die Informationen enthalten, füllt man das alt-Attribut mit einer Beschreibung des Bildes.
  • Falls Informationen oder Bezüge zwischen Elementen durch Farben, Formen, Positionen vermittelt werden: Texte außerhalb des sichtbaren Bereichs können diese Informationen auch Blinden in Worten vermitteln.
  • HTML-Elemente semantisch sinnvoll nutzen: <table> nur für tabellarische Daten nicht zu Layout-Zwecken, Aufzählungen als <ul>, Nummerierungen als <ol>, Absätze als <p> … </p> und nicht als <br /><br /> usw.
  • Für XHTML und HTML4 die Bereiche der Seite soweit möglich mit dem Attribut role versehen. Auch wenn dieses in HTML4 und XHTML nicht valide ist, alle modernen Browser interpretieren es korrekt. In HTML5 semantisch passende Elemente wie <nav> oder <header> und zusätzlich für nicht ganz aktuelle Browser role verwenden, also <nav role="navigation">.
    Eine kurze Einführung in das role-Attribut bietet z. B. Jan Hellbusch
  • Beim Einbinden von Videos das <video>-Tag nutzen. Das ist zwar HTML5, wird von den Browsern aber auch in XHTML und HTML4 korrekt dargestellt. Im Gegensatz zu den meisten anderen Lösungen können die Steuerelemente auch per Tastatur bedient werden.
  • Seiten validieren. Fehler wenn möglich beseitigen. Oft werfen ungültige Attribute bei der Einbindung von JavaScript- oder CSS-Bibliotheken Fehler, werden aber von modernen Browsern und Screenreadern korrekt interpretiert. Dies ist beispielsweise bei der Einbindung des Bootstrap-Frameworks über ein CDN der Fall.
  • Prüfwerkzeuge einsetzen. Erste Anhaltspunkte, wie es um Überschriften-Hierarchie, alt-Attribute und Kontraste auf einer Website bestellt ist, bietet beispielsweise der Online-Checker WAVE Web Accessibility Tool
  • Web-Frameworks mit Bedacht einsetzen. Die Komponenten des Bootstrap-Frameworks sind mittlerweile zum großen Teil barrierefrei. Im Zweifel einem Test mit Screenreader und Tastatur unterziehen.

Nützliche Quellen und Werkzeuge

  1. Validator des W3C
  2. SelfHTML Wiki und Referenz
  3. Kostenloser, quelloffener Screenreader NVDA
  4. Jan Hellbusch Barrierefreies Webdesign
  5. Jan Hellbusch Accessibility-Blog und mehr
  6. WAVE Web Accessibility Tool