Einführung in das Thema Web Barrierefreiheit. Semantik - Tastatursteuerung - Alternativtexte

1. Be truly responsive & responsible!
Why and how accessibility matters.
Jo Spelbrink / zensations (@joville)
Sindre Wimberger / wien.at Online (@sindrewimberger)

2. Accessibility im Web ist die Kunst, eine gut
durchdachte Balance für alle Sinneskanäle
(außer Riechen) mit sauberer Markupstruktur,
robuster Darstellung und klaren Interaktionen
(Input & Output) zu ermöglichen.

3. Eine gute Accessibility
beginnt bereits mit dem
Konzept, Design und
Storytelling.
Der vermeintliche Mehraufwand basiert auf Unwissen und
mangelnden Verständnis.
Änderungen im Nachhinein sind immer ein Mehraufwand
(Accessibility ist kein Add-on).

4. AX = Content + Design + UX
Daher: Der Accessibility Pro (Konzepter/Designer/Developer)
ist wie ein Filmregisseur, der in jede Situation (Rolle)
hineindenkt.

5. (Fast) Immer mehrere
Lösungswege
Auf bewährte und vertraute Lösungen aufbauen
(Innovation vs. Disruption).

6. Technisch nicht möglich
abzufragen ob ein Zugriff
über Screenreader erfolgt.
Und das ist auch gut so.

7. Klare Trennung zwischen
Inhalt und Design
z.B. Bild im HTML, als Hintergrundbild im CSS oder als SVG?

8. Semantik
Design vs. Markup - Hierarchie – Reihenfolge - Bedeutung

9. Textersatz für
visuelle Inhalte
klare, eindeutige und ausreichende Information

10. Inhalte richtig ausblenden
• CSS: display: none; auch für Screenreader versteckt!
• CSS: .hideme {
position: absolute;
top: -32768px;
left: -32768px;
}
außerhalb des Sichtbereichs, aber für Screenreader
zugänglich
• HTML: aria-visible: false; nur für Screenreader
versteckt
• CSS Content: Der Screenreader liest es (noch) immer
vor

11. Tastaturbedienung
fokussierbare und tastaturtaugliche Bedienelemente

12. Tastatur Fokus
• Natürliche HTML Reihenfolge nur in Ausnahmen
verändern
• Links <a>, Button <button> und Formularfelder
• tabindex für jedes andere HTML Element
• -1 nicht mit Tastatur ansteuerbar - aber im JS
• 0 mit Tastatur ansteuerbar
• > 0 führt zu einen Priorisierung der Reihenfolge –
gefährlich!
• Bei JS Funktion oft notwendig Fokus aktiv zu setzen
• z.B. Lightbox schließen – zurück zum Ursprungslink

13. Tastatur Fokus Styling
Orientierung, wo sich der Cursor gerade befindet•
Nicht nur :• hover auch :focus, :active verwenden
Achtung vor outline:• 0;

14. Testen
• Ohne CSS
• Ohne JS
• Ohne Bilder
• Textvergrößerung
• Tastaturbedienung (Tab)
• Farbkontraste (Browser Plugin)
• Überschriftenhirarchie (Outline)
• iOS Voiceover – Android Talkback

15. A-TAG
der Accessibility Event
http://atag.accessiblemedia.at/

16. Be truly responsive & responsible!
Why and how accessibility matters.
Jo Spelbrink / zensations (@joville)
Sindre Wimberger / wien.at (@sindrewimberger)