Accessible Responsive Design

Vortrag im Rahmen des Webkongress Erlangen 2014 (WKE 2014). http://www.webkongress.uni-erlangen.de

Dieser Vortrag ist auch als Audio- und Video-Mitschnitt verfügbar: http://www.video.uni-erlangen.de/course/id/263.html

Transcript

1. Accessible Responsive Design Stefan Farnetani |
2. Stefan Farnetani ist Geschäftsführer der mindscreen GmbH und konzipiert und programmiert barrierefreie Schnittstellen für Neue Medien. mindscreen setzt CMS-basierte Websites und E-Commerce-Systeme um, gewann 2010 zwei BIENE Awards und berät internationale Unternehmen in den Bereichen Accessibility und Mobile Accessibility. Zudem ist er Mitglied bei der German UPA e.V., dem Berufsverband der Deutschen Usability und User Experience Professionals.
3. Accessible Responisve Design Accessible Responsive Design?
4. Accessible Responisve Design Blinde und Touchscreens? Geht doch nicht! Im Gegenteil!
5. Mit dem Finger lesen
6. VoiceOver ist für Blinde eine genauso große Revolution wie der Touchscreen für alle sehenden Benutzer
7. VoiceOver ist für Blinde eine genauso große Revolution wie der Touchscreen für alle sehenden Benutzer »Ich bekam hier ein glasklares Gefühl dafür, wie der Bildschirm aufgebaut ist.« — Marco Zehe, „Erstes Anfühlen von VoiceOver auf dem iPhone“
8. Linear ist nicht out
9. Sehbehinderte und Touchscreen!? Barrierefreiheit? Davon ist meine Zielgruppe nicht betroffen. Vorführung des Arbeitskreises Barrierefreiheit Freitag 12:45 -13:15 Uhr, am UPA-Stand
10. Accessible Responisve Design Aus Maus und Tastatur werden jetzt »Explore by touch« und »Swipe« Sonst ändert sich nix.
11. Accessible Responisve Design Aus Maus und Tastatur werden jetzt »Explore by touch« und »Swipe« Sonst ändert sich fast nix.
12. Accessible Responisve Design Das Spar-Menü: Der Hamburger 
14. x
15. Es könnte alles so einfach sein ... <div id="mobile-menu-toggle"> <span class="icon fa-bars"></span> </div> <div id="menu" style="display: none;"> ... </div>
16. Und so kann eine gute Lösung aussehen <button id="mobile-menu-toggle" aria-controls="menu" aria-expanded=“false“> <span class="icon fa-bars"></span> <span class="visuallyhidden">Navigation</span> </button> <div id="menu" style="display: none;"> ... </div>
17. Accessible Responisve Design Breadcrumb reloaded.
18. Orientierung auf großen Bildschirmen
19. Orientierung auf kleinen Bildschirmen ?
20. Seite 2 Seite 1 Seite 2 Startseite Seite 1 Startseite
21. Accessible Responisve Design Alles fließt! Lineare Inhalte unter erschwerten Bedingungen
22. Fluide Layouts – wie wir sie kennen 1 3 2 Inhaltsreihenfolge 1 3 2 Desktop Header/ Hauptnavigation 1 Hauptinhalt 3 Bereichsnavigation 2
23. Off-Canvas – schon etwas schwieriger 2 1 3 2 Inhaltsreihenfolge Off-Canvas 1 3 2 Desktop Header/ Hauptnavigation 1 Hauptinhalt 3 Bereichsnavigation 2 3 1
24. Inhalte Spazieren tragen
25. Auf kleinen Geräten tauschen Breadcrumb und Bereichsnavigation die Plätze
26. 2 4 3 1 1 4 3 2 1 Bereichsnavigation 2 Breadcrumb 3 Hauptinhalt 4 Teaser (Sidebar) Variante Desktop zum Vergleich Mobile 1 Bereichsnavigation 2 Breadcrumb 3 Hauptinhalt 4 Teaser (Sidebar)
27. Code doppelt im HTML - Oft einfacher - Spart Client-Ressourcen Größere DOM-Umbauten können ältere Mobilgeräte und Featurephones stark beanspruchen - SEO? Code dynamisch erzeugen/ verändern über JavaScript - Spart Bandbreite - Eleganter und eher im Sinne von Progressive Enhancement - SEO? <>
28. Wo landet das generierte Element?
29. Accessible Responisve Design Das Potential von Navigationen wird nicht ausgereizt  
30. Wireframes & Prototypen
33. Accessible Responisve Design RD & A11y Ein ungleiches Paar
34. Gemeinsame Grundprinzipien - Eine Website für alle - Fluide Layouts um sich an Monitorgrößen anzupassen - Bewusstsein für Inhaltsreihenfolge - Liebe zu Web-Standards
35. Kann eine Website responsive, aber nicht barrierefrei sein?
36. Kann eine Website barrierefrei, aber nicht responsive sein?
37. Accessible Responisve Design Fragen?
38. Accessible Responisve Design Frameworks & Barrierefreiheit
39. Accessible Responisve Design Accessible Responsive Design & Workflows