Einführungs-Vortrag zur Barrierefreiheit in Köln - 12.05. 2010 - Themen: Surfen mit Screenreader und Braillezeile, Alternativtexte, Semantik am Beispiel Überschriften-Struktur. Das PDF ist noch nicht barrierefrei, aber ich arbeite dran. :) Wie immer ohne die üppigen Screencasts.

1. Was ist Barrierefreiheit?
Ein Kurztest
brainbits.net Sylvia Egger – sprungmarker.de

2. Sylvia Egger
 Frontendentwicklerin
 10 Jahre Agenturerfahrung
 7 Jahre Arbeit mit und für Barrierefreiheit
 Blog zur Barrierefreiheit: sprungmarker.de
 Spezialgebiet: Testen, Prüfen und Weiterentwicklung von Barrierefreiheit,
Gesetzgebung (WCAG2, BITV)
brainbits.net Sylvia Egger – sprungmarker.de

3. Was ist Barrierefreiheit?
„Barrierefreies Internet bezeichnet Web-Angebote, die von
allen Nutzern unabhängig von körperlichen oder
technischen Möglichkeiten uneingeschränkt (barrierefrei)
genutzt werden können“
Quelle: Wikipedia: Barrierfreies Internet
Oder ganz einfach formuliert:
Einfach für alle, Seiten für alle
brainbits.net Sylvia Egger – sprungmarker.de

4. Was ist Barrierefreiheit?
Einfach mal ohne ...
brainbits.net Sylvia Egger – sprungmarker.de

5. Ohne Bilder? Alternativtext
 für Screenreader-Nutzer
 für Nutzer von einfachen Textbrowsern wie Lynx
 für langsame Verbindungen
 wenn Grafiken nicht geladen werden
brainbits.net Sylvia Egger – sprungmarker.de

6. Ohne Bilder...
Ein kleines Rätsel
brainbits.net Sylvia Egger – sprungmarker.de

7. brainbits.net Welche Seite ist das?

8. brainbits.net Screenshot der Startseite von bild.de

9. brainbits.net Welche Seite ist das?

10. brainbits.net Screenshot der Startseite von stern.de

11. brainbits.net Welche Seite ist das?

12. brainbits.net Screenshot der Startseite von otto.de

13. Ohne Bilder? Alternativtext
Probleme
 Alternativtext trifft nicht den Bildinhalt
 Alternativtext lautet anders als Schriftgrafik
 Alternativtext fehlt
 Alternativtext doppelt die Überschrift (Bsp. Teaser)
 Wichtige Elemente verschwinden (Bsp. Suchfeld)
 Fehlendes Listensymbol macht Liste schwer erkennbar
 Symbole/Icons tragen Bedeutung, verschwinden jedoch
 Redundante Alternativtexte (Bsp. Bildergalerie)
 Text liegt auf gleichfarbigem Hintergrund (Bsp. weiß auf weiß)
 Zu lange Alternativtexte
brainbits.net Sylvia Egger – sprungmarker.de

14. Ohne Bilder? Alternativtext
Lösung
 redaktionelle Pflege
 immer den Kontext der Grafik mitberücksichtigen
 Verlinkte Grafiken: immer das Linkziel mit angeben (Bsp. Teaser)
 Doppelungen und Redundanzen vermeiden (Reduktion)
 Auf Schriftgrafiken verzichten
 Keine wichtige Information/Texte in den Hintergrund
 Auf Farbkombination Vorder- /Hintergrundachten achten
(Bsp: weiß auf weiß)
brainbits.net Sylvia Egger – sprungmarker.de

15. Was ist Barrierefreiheit?
Einfach mal mit ...
brainbits.net Sylvia Egger – sprungmarker.de

16. Screenreader...
Eine akustische Reise
brainbits.net Sylvia Egger – sprungmarker.de

17. Was ist ein Screenreader?
„Screenreader machen (Windows)-Oberflächen für blinde
Computernutzer zugänglich. Sie lesen den Bildschirminhalt
ein und geben die wichtigsten Informationen an die
Sprachausgabe und Braillezeile weiter.“
Quelle: INCOBS
brainbits.net Sylvia Egger – sprungmarker.de

18. brainbits.net Laptop mit Braillezeile (Quelle)

19. brainbits.net Braillezeile (Quelle)

20. brainbits.net Computerbraille im Einsatz mit Braillezeile im Büro (YouTube)

21. Welche Screenreader?
 JAWS (Windows)
 NVDA (Windows, Open Source)
 VoiceOver (Mac)
 Window-Eyes (Windows) u.a.
brainbits.net Sylvia Egger – sprungmarker.de

22. Mit Screenreader
 Seiten werden für blinde und stark sehbehinderte Nutzer zugänglich
 verschiedene Ausspielwege: Sprache, Blindenschrift (Braille)
 arbeitet Inhalte linear ab
 Gute Semantik macht einen wirklichen Unterschied
Navigationsmöglichkeiten und klarere Inhalte
 Überschriften
 Listen
 Alternativtexte
 Semantische Auszeichnungen wie fett, kursiv, Zitate, Abkürzungen
Akronyme, Sprachwechsel
 Unterschiede in Interpretation und Unterstützung (Web 2.0, AJAX, HTML 5)
brainbits.net Sylvia Egger – sprungmarker.de

23. brainbits.net stern.de - gelesen mit Screenreader JAWS (Windows)

24. brainbits.net bild.de gelesen mit Screenreader NVDA (Windows)

25. brainbits.net Screencast otto.de gelesen mit VoiceOver (Mac))

26. Was ist Barrierefreiheit?
Einfach mit ganz viel ...
brainbits.net Sylvia Egger – sprungmarker.de

27. Semantik
brainbits.net Sylvia Egger – sprungmarker.de

28. Semantik an Beispielen
Überschriften
 Screenreader- und Tastaturnutzer arbeiten mit Überschriften
 Versteckte Überschriften helfen beiden Nutzern
Listen
 Screenreader-Nutzer arbeiten mit Listen
 Semantisch bilden sie eine Einheit (Aufzählung, Navigationen)
Links
 Screenreader-Nutzer werten Linklisten aus
 Tastaturnutzer springen von Link zu Link
 Sprungmarken sind wichtig
brainbits.net Sylvia Egger – sprungmarker.de

29. brainbits.net Screencast wdr.de mit JAWS: Überschriften und Listen

30. brainbits.net JAWS: Überschriftenliste (Quelle)

31. brainbits.net JAWS: Linkliste (Quelle)

32. brainbits.net wdr.de Liste der Überschriften mit HeadingsMap

33.  Hierarchiebruch
 Hier fehlt die H2
 Rechte Spalte nicht Unterpunkt des
Artikels
 Keine versteckte Navigation
(unhandlich)
 Links-Rubrik ohne Überschrift
(strong!)
brainbits.net wdr.de Liste der Überschriften mit HeadingsMap

34.  Topnavigation
 Servicenavigation
 Sonstige Listen
 Hauptnavigation
 Metanavigation
brainbits.net wdr.de Listenelemente (u.a. Navigationen)

35. brainbits.net bild.de Liste der Überschriften mit HeadingsMap

36. brainbits.net stern.de Liste der Überschriften mit HeadingsMap

37. brainbits.net otto.de Liste der Überschriften mit HeadingsMap

38. Was ist Barrierefreiheit?
Einfach mehr ...
brainbits.net Sylvia Egger – sprungmarker.de

39. Sylvia Egger
sprungmarker.de
Senior Webproducerin
brainbits GmbH in Köln
brainbits.net Vielen Dank fürs Zuhören! 

40. Credits
Screencasts erstellt mit ScreenFlow
Ablaufbilder mit Screensteps
Alle Bildquellen sind am jeweiligen Bild vermerkt
Diese Präsentation auf Slideshare:
http://www.slideshare.net/sprungmarker
brainbits.net folgen Sie mir doch auf twitter: @sprungmarkers