Warum und wie man Webseiten für sehbehinderte und blinde Besucher optimieren kann.

1. Barrierefreiheit
bei Webseiten

2. Die Zielgruppe
● Personen mit einer Sehbehinderung
(hauptsächlich Farbenblindheit)
-> Konzept / Design
● Blinde Personen
-> Frontend Umsetzung

3. Problem
Blinde können nichts sehen!
● Unterschied Hauptnavigation /
Subnavigation
● Struktur des Inhalts
● Popups werden nicht erkannt
● Blinde benutzen keine Maus
● Hotspots werden nicht erkannt.

4. 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

5. 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.

6. 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>

7. Struktur
● Überschriften-Hierarchie muss eingehalten
werden.
● Versteckte Titel, welche Elementgruppen
benennen.<h2 class="reader-only" id="navigation">Hauptnavigation</h2>
● title und alt-Attribute verwenden.

8. 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”)

9. 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.

10. Hotspots
● Hotspots grundsätzlich mit Fokussierbaren
Elementen erstellen (button, a).
● Unwichtige Elemente aktiv aus der
Tastaturnavigation entfernen
(tabindex=”-1”)