was ist barrierefreiheit (12.05. 2010)
DESCRIPTION
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.TRANSCRIPT
Sylvia Egger – sprungmarker.de brainbits.net
Was ist Barrierefreiheit?
Ein Kurztest
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)
Sylvia Egger – sprungmarker.de brainbits.net
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
Sylvia Egger – sprungmarker.de brainbits.net
Sylvia Egger – sprungmarker.de brainbits.net
Was ist Barrierefreiheit?
Einfach mal ohne ...
Sylvia Egger – sprungmarker.de brainbits.net
Ohne Bilder? Alternativtext
für Screenreader-Nutzer für Nutzer von einfachen Textbrowsern wie Lynx für langsame Verbindungen wenn Grafiken nicht geladen werden
Sylvia Egger – sprungmarker.de brainbits.net
Ohne Bilder...
Ein kleines Rätsel
Welche Seite ist das? brainbits.net
Screenshot der Startseite von bild.de brainbits.net
Welche Seite ist das? brainbits.net
Screenshot der Startseite von stern.de brainbits.net
Welche Seite ist das? brainbits.net
Screenshot der Startseite von otto.de brainbits.net
Sylvia Egger – sprungmarker.de brainbits.net
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
Sylvia Egger – sprungmarker.de brainbits.net
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ß)
Sylvia Egger – sprungmarker.de brainbits.net
Was ist Barrierefreiheit?
Einfach mal mit ...
Sylvia Egger – sprungmarker.de brainbits.net
Screenreader...
Eine akustische Reise
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
Sylvia Egger – sprungmarker.de brainbits.net
Laptop mit Braillezeile (Quelle) brainbits.net
Braillezeile (Quelle) brainbits.net
Computerbraille im Einsatz mit Braillezeile im Büro (YouTube) brainbits.net
Welche Screenreader?
JAWS (Windows) NVDA (Windows, Open Source) VoiceOver (Mac) Window-Eyes (Windows) u.a.
Sylvia Egger – sprungmarker.de brainbits.net
Sylvia Egger – sprungmarker.de brainbits.net
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)
stern.de - gelesen mit Screenreader JAWS (Windows) brainbits.net
bild.de gelesen mit Screenreader NVDA (Windows) brainbits.net
Screencast otto.de gelesen mit VoiceOver (Mac)) brainbits.net
Sylvia Egger – sprungmarker.de brainbits.net
Was ist Barrierefreiheit?
Einfach mit ganz viel ...
Sylvia Egger – sprungmarker.de brainbits.net
Semantik
Sylvia Egger – sprungmarker.de brainbits.net
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
Screencast wdr.de mit JAWS: Überschriften und Listen brainbits.net
JAWS: Überschriftenliste (Quelle) brainbits.net
JAWS: Linkliste (Quelle) brainbits.net
wdr.de Liste der Überschriften mit HeadingsMap brainbits.net
wdr.de Liste der Überschriften mit HeadingsMap brainbits.net
Hierarchiebruch
Hier fehlt die H2
Rechte Spalte nicht Unterpunkt des Artikels
Links-Rubrik ohne Überschrift (strong!)
Keine versteckte Navigation (unhandlich)
wdr.de Listenelemente (u.a. Navigationen) brainbits.net
Topnavigation
Servicenavigation
Hauptnavigation
Metanavigation
Sonstige Listen
bild.de Liste der Überschriften mit HeadingsMap brainbits.net
stern.de Liste der Überschriften mit HeadingsMap brainbits.net
otto.de Liste der Überschriften mit HeadingsMap brainbits.net
Sylvia Egger – sprungmarker.de brainbits.net
Was ist Barrierefreiheit?
Einfach mehr ...
Vielen Dank fürs Zuhören!
Sylvia Egger
sprungmarker.de
Senior Webproducerin brainbits GmbH in Köln
brainbits.net
folgen Sie mir doch auf twitter: @sprungmarkers
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