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