SlideShare ist ein Scribd-Unternehmen logo
1 von 17
Downloaden Sie, um offline zu lesen
Be truly responsive & responsible!
Why and how accessibility matters.
Jo Spelbrink / zensations (@joville)
Sindre Wimberger / wien.at Online (@sindrewimberger)
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.
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).
AX = Content + Design + UX
Daher: Der Accessibility Pro (Konzepter/Designer/Developer)
ist wie ein Filmregisseur, der in jede Situation (Rolle)
hineindenkt.
(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: -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
Tastaturbedienung
fokussierbare und tastaturtaugliche Bedienelemente
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
Tastatur Fokus Styling
Orientierung, wo sich der Cursor gerade befindet•
Nicht nur :• hover auch :focus, :active verwenden
Achtung vor outline:• 0;
Testen
• Ohne CSS
• Ohne JS
• Ohne Bilder
• Textvergrößerung
• Tastaturbedienung (Tab)
• Farbkontraste (Browser Plugin)
• Überschriftenhirarchie (Outline)
• iOS Voiceover – Android Talkback
A-TAG
der Accessibility Event
http://atag.accessiblemedia.at/
Be truly responsive & responsible!
Why and how accessibility matters.
Jo Spelbrink / zensations (@joville)
Sindre Wimberger / wien.at (@sindrewimberger)
Be truly responsive & responsible! Why and how accessibility matters.

Weitere ähnliche Inhalte

Andere mochten auch

Coordinated Multipoint Transmission and Reception in LTE-Advanced (1)
Coordinated Multipoint Transmission and Reception in LTE-Advanced (1)Coordinated Multipoint Transmission and Reception in LTE-Advanced (1)
Coordinated Multipoint Transmission and Reception in LTE-Advanced (1)Mariem NAIJA
 
Digitalisaatio ja valtioneuvosto
Digitalisaatio ja valtioneuvostoDigitalisaatio ja valtioneuvosto
Digitalisaatio ja valtioneuvostoJyrki Kasvi
 
Leadgeneratie via social media in kennisintensieve B2B-organisaties
Leadgeneratie via social media in kennisintensieve B2B-organisatiesLeadgeneratie via social media in kennisintensieve B2B-organisaties
Leadgeneratie via social media in kennisintensieve B2B-organisatiesJochem Koole
 

Andere mochten auch (6)

How to Outline Speeches
How to Outline SpeechesHow to Outline Speeches
How to Outline Speeches
 
TRA presentation
TRA presentationTRA presentation
TRA presentation
 
Coordinated Multipoint Transmission and Reception in LTE-Advanced (1)
Coordinated Multipoint Transmission and Reception in LTE-Advanced (1)Coordinated Multipoint Transmission and Reception in LTE-Advanced (1)
Coordinated Multipoint Transmission and Reception in LTE-Advanced (1)
 
Digitalisaatio ja valtioneuvosto
Digitalisaatio ja valtioneuvostoDigitalisaatio ja valtioneuvosto
Digitalisaatio ja valtioneuvosto
 
Leadgeneratie via social media in kennisintensieve B2B-organisaties
Leadgeneratie via social media in kennisintensieve B2B-organisatiesLeadgeneratie via social media in kennisintensieve B2B-organisaties
Leadgeneratie via social media in kennisintensieve B2B-organisaties
 
Kong
KongKong
Kong
 

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

Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Paul Bakaus
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0thoemmes
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web designHenning Schmidt
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend DeveloperChristoph Hautzinger
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)Nicolai Schwarz
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapGregor Biswanger
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices Peter Rozek
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden BlendMartin Hey
 
Barrierefreie Webseiten
Barrierefreie WebseitenBarrierefreie Webseiten
Barrierefreie Webseitendrubb
 
Worst and Best Practices in der Barrierefreiheit
Worst and Best Practices in der BarrierefreiheitWorst and Best Practices in der Barrierefreiheit
Worst and Best Practices in der BarrierefreiheitKerstin Probiesch
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft AG
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...usability.de
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Christoph Mühlbauer
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 

Ähnlich wie Be truly responsive & responsible! Why and how accessibility matters. (17)

Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
Barrierefreie Webseiten
Barrierefreie WebseitenBarrierefreie Webseiten
Barrierefreie Webseiten
 
Worst and Best Practices in der Barrierefreiheit
Worst and Best Practices in der BarrierefreiheitWorst and Best Practices in der Barrierefreiheit
Worst and Best Practices in der Barrierefreiheit
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der Zukunft
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 

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
  • 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)