Barrierefreie Webseiten

Barrierefreiheit

bei Webseiten

Die Zielgruppe

● Personen mit einer Sehbehinderung

(hauptsächlich Farbenblindheit)

-> Konzept / Design

● Blinde Personen

-> Frontend Umsetzung

Problem

Blinde können nichts sehen!

● Unterschied Hauptnavigation /

Subnavigation

● Struktur des Inhalts

● Popups werden nicht erkannt

● Blinde benutzen keine Maus

● Hotspots werden nicht erkannt.

Grundsätzliches

Standard HTML ist semantisch (H1, a, button,

ul/li).

Mit rich content und jQuery dient die Semantik

oft nur noch als Basis für Styling. Auch ein <p>

kann eine Aktion auslösen.

-> Semantik wieder einführen und durchziehen

HTML 5 Semantik

HTML5 hat noch mehr Elemente als HTML4:

● <article>

● <input required type=”email”>

● <nav>

● <aside>

Zustände und Verhalten können aber nicht

dargestellt werden.

WAI-ARIA Roles<ul role="menubar">

<!-- Rule 2A: "File" label via aria-labelledby -->

<li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel">

<span id="fileLabel">File</span>

<ul role="menu">

<!-- Rule 2C: "New" label via Namefrom:contents -->

<li role="menuitem">New</li>

<li role="menuitem">Open…</li>

…

</ul>

</li>

…</ul>

Struktur

● Überschriften-Hierarchie muss eingehalten

werden.

● Versteckte Titel, welche Elementgruppen

benennen.<h2 class="reader-only" id="navigation">Hauptnavigation</h2>

● title und alt-Attribute verwenden.

Popups

Blinde erkennen nicht, wann sich ein Popup /

Menu / Tab öffnet.

● Aria Roles verwenden.

● Tastatur-Focus in das Popup (per

Javascript)

● Hintergrund-Element als unsichtbar markieren. (aria-hidden=”true”)

Tastaturnavigation

Die Komplette Webseite muss mit der Tastatur

navigierbar sein● tabindex verwenden. Damit wird die Reihenfolge gesteuert. Mit tabindex=0 bekommen

auch Elemente, die normalerweise keinen Focus erhalten (z.B. <p>) einen Focus.

● :focus State definieren, z.B. durch Unterstreichen.

● Komplexe Navigationen und Aufklapp-Elemente

besonders behandeln.

Hotspots

● Hotspots grundsätzlich mit Fokussierbaren

Elementen erstellen (button, a).

● Unwichtige Elemente aktiv aus der

Tastaturnavigation entfernen (tabindex=”-1”)