Be truly responsive & responsible! Why and how accessibility matters.
1 gefällt mir470 aufrufe
Das Dokument behandelt die Bedeutung von Barrierefreiheit im Webdesign und betont, dass Barrierefreiheit bereits in der Konzeptions- und Designphase berücksichtigt werden sollte, um mehraufwendige nachträgliche Anpassungen zu vermeiden. Es wird erklärt, dass Barrierefreiheit eine Kombination aus Inhalt, Design und Benutzererfahrung erfordert, und dass klare Strukturen sowie technische Implementierungen für alle Benutzer, einschließlich solcher, die Screenreader verwenden, entscheidend sind. Zudem werden verschiedene technische Aspekte und Best Practices zur Verbesserung der Zugänglichkeit aufgeführt.
Be truly responsive & responsible! Why and how accessibility matters.
- 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
- 16. Be truly responsive & responsible! Why and how accessibility matters. Jo Spelbrink / zensations (@joville) Sindre Wimberger / wien.at (@sindrewimberger)