Be truly responsive & responsible!
Why and how accessibility matters.
Jo Spelbrink / zensations (@joville)
Sindre Wimberge...
Accessibility im Web ist die Kunst, eine gut
durchdachte Balance für alle Sinneskanäle
(außer Riechen) mit sauberer Markup...
Eine gute Accessibility
beginnt bereits mit dem
Konzept, Design und
Storytelling.
Der vermeintliche Mehraufwand basiert au...
AX = Content + Design + UX
Daher: Der Accessibility Pro (Konzepter/Designer/Developer)
ist wie ein Filmregisseur, der in j...
(Fast) Immer mehrere
Lösungswege
Auf bewährte und vertraute Lösungen aufbauen
(Innovation vs. Disruption).
Technisch nicht möglich
abzufragen ob ein Zugriff
über Screenreader erfolgt.
Und das ist auch gut so.
Klare Trennung zwischen
Inhalt und Design
z.B. Bild im HTML, als Hintergrundbild im CSS oder als SVG?
Semantik
Design vs. Markup - Hierarchie – Reihenfolge - Bedeutung
Textersatz für
visuelle Inhalte
klare, eindeutige und ausreichende Information
Inhalte richtig ausblenden
• CSS: display: none; auch für Screenreader versteckt!
• CSS: .hideme {
position: absolute;
top...
Tastaturbedienung
fokussierbare und tastaturtaugliche Bedienelemente
Tastatur Fokus
• Natürliche HTML Reihenfolge nur in Ausnahmen
verändern
• Links <a>, Button <button> und Formularfelder
• ...
Tastatur Fokus Styling
Orientierung, wo sich der Cursor gerade befindet•
Nicht nur :• hover auch :focus, :active verwenden...
Testen
• Ohne CSS
• Ohne JS
• Ohne Bilder
• Textvergrößerung
• Tastaturbedienung (Tab)
• Farbkontraste (Browser Plugin)
• ...
A-TAG
der Accessibility Event
http://atag.accessiblemedia.at/
Be truly responsive & responsible!
Why and how accessibility matters.
Jo Spelbrink / zensations (@joville)
Sindre Wimberge...
Be truly responsive & responsible! Why and how accessibility matters.
Nächste SlideShare
Wird geladen in …5
×

Be truly responsive & responsible! Why and how accessibility matters.

256 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
256
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Be truly responsive & responsible! Why and how accessibility matters.

  1. 1. Be truly responsive & responsible! Why and how accessibility matters. Jo Spelbrink / zensations (@joville) Sindre Wimberger / wien.at Online (@sindrewimberger)
  2. 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. 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. 4. AX = Content + Design + UX Daher: Der Accessibility Pro (Konzepter/Designer/Developer) ist wie ein Filmregisseur, der in jede Situation (Rolle) hineindenkt.
  5. 5. (Fast) Immer mehrere Lösungswege Auf bewährte und vertraute Lösungen aufbauen (Innovation vs. Disruption).
  6. 6. Technisch nicht möglich abzufragen ob ein Zugriff über Screenreader erfolgt. Und das ist auch gut so.
  7. 7. Klare Trennung zwischen Inhalt und Design z.B. Bild im HTML, als Hintergrundbild im CSS oder als SVG?
  8. 8. Semantik Design vs. Markup - Hierarchie – Reihenfolge - Bedeutung
  9. 9. Textersatz für visuelle Inhalte klare, eindeutige und ausreichende Information
  10. 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. 11. Tastaturbedienung fokussierbare und tastaturtaugliche Bedienelemente
  12. 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. 13. Tastatur Fokus Styling Orientierung, wo sich der Cursor gerade befindet• Nicht nur :• hover auch :focus, :active verwenden Achtung vor outline:• 0;
  14. 14. Testen • Ohne CSS • Ohne JS • Ohne Bilder • Textvergrößerung • Tastaturbedienung (Tab) • Farbkontraste (Browser Plugin) • Überschriftenhirarchie (Outline) • iOS Voiceover – Android Talkback
  15. 15. A-TAG der Accessibility Event http://atag.accessiblemedia.at/
  16. 16. Be truly responsive & responsible! Why and how accessibility matters. Jo Spelbrink / zensations (@joville) Sindre Wimberger / wien.at (@sindrewimberger)

×