Was ist Barrierefreiheit? (18.05. 2010)

WAS IST BARRIEREFREIHEIT? EIN KURZTEST Sylvia Egger – sprungmarker.de – brainbits.net

Sylvia Egger 2   Webentwicklerin in der Agentur brainbits   10 Jahre Agenturerfahrung, 7 Jahre Arbeit mit Barrierefreiheit   Blog zur Barrierefreiheit im Internet: sprungmarker.de   Spezialgebiete   Testen, Prüfen und Weiterentwicklung von Barrierefreiheit   Barrierefreie Gesetzgebung (BITV, WCAG, BITV-Test)   Mitglied im BIK-95-Plus-Kreis (Weiterentwicklung des barrierefreien Testverfahrens BITV-Test)   Webstandards Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

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: Barrierefreies Internet Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Barrierefreiheit = Seiten für alle 4   Blinde Menschen   Sehbehinderte Menschen   Gehörlose Menschen   Stark hörgeschädigte Menschen   Motorisch eingeschränkte Menschen   Menschen mit Lernbehinderungen   Ältere Menschen Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Barrieren im Internet in Zahlen 5   155.000 blinde Menschen   500.000 sehbehinderte Menschen   300.000 hörgeschädigte und gehörlose Menschen   Über 600.000 motorisch eingeschränkte Menschen   Über 260.000 Menschen mit Lernbehinderungen Quelle: Web for All (2007) Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

6 Wie blinde und sehbehinderte Menschen surfen? Eine akustische Reise mit Screenreader und Braillezeile Bildquellen: Braillezeile (links), Laptop mit Braillezeile (rechts oben), Braillezeile (rechts unten) Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screencast Startseite wdr.de gelesen mit Screenreader JAWS 7 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

8 Lesen mit den Fingerkuppen: die Braillezeile Bildquelle: incobs Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Was ist eine Braillezeile? 9   Sie kann, muss aber nicht zur PC-Tastatur kombiniert werden.   Sie gibt die Informationen eines PC-Bildschirms in der Blindenpunktschrift Braille aus.   Sie dient nur der Ausgabe, nicht der Eingabe. Zur Eingabe wird die PC-Tastatur genutzt.   Wird mit einem Screenreader kombiniert (Brückensoftware).   Häufig wird auch die Sprachausgabe des Screenreaders genutzt. Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Was ist eine Braillezeile? 10   Braillemodul: Durch 8   Quelle digitale-chancen.de bewegliche Stifte werden etwa Buchstaben und Zahlen dargestellt (40-80 Zeichen).   Weitere Bedienelemente:    Ist die Zeile länger, können Lese- oder Scrolltasten genutzt werden.   Funktionstasten lösen Funktionen wie ENTER, TAB, ESC aus.   Routingtasten steuern den Cursor. Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Quelle: Computerbraille im Einsatz mit Braillezeile im Büro (YouTube) 11 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

12 Screenreader: der Vorleser Bildcollage: Screenreader Logos Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

13 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 Hinweis: Screenreader gibt es mittlerweile nicht nur für Windows, auch für Mac und Linux. Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Welche Screenreader? 14   JAWS (Win – mit IE und Firefox)   NVDA (Win, Open Source – mit Firefox und IE)   Window-Eyes (Win – mit IE und Firefox)   Cobra (Win – mit IE und Firefox)   VoiceOver (Mac – mit Safari)   Orca (Linux, Open Source – mit Firefox) Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Wie arbeitet ein Screenreader? 15   Liest den Bildschirminhalt ein   Screenshot Überschriften-Fenster JAWS und gibt in aus:   an die Sprachausgabe   an die Braillezeile   Arbeitet die Bildschirminhalte linear nacheinander ab.   Lässt den Nutzer navigieren über:   Überschriften   Listen   Links Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Wie arbeitet ein Screenreader? 16   Alles Visuelle auf dem Bildschirm   Screenshot wdr.de – lineare Darstellung muss für den Screenreader mit einer Textalternative zugänglich gemacht werden z.B. :   Bilder > Alternativtexte   Videos > Audiobeschreibungen   Was durch Text alleine nicht verstehbar ist, muss extra formatiert werden (Semantik) u. a.:   Überschriften   Abkürzungen, Akronyme, Zitate   Sprachwechsel im Text Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screencast Seite Aktuelles rtl.de gelesen mit NVDA 17 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screencast Startseite von otto.de gelesen mit Screenreader VoiceOver (Mac) 18 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

19 Der Alternativtext: eine wichtige Alternative Quelle: Screenshot Startseite wdr.de mit Alternativtexten Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

20 Was ist ein Alternativtext? Wenn etwa ein Bild nicht angezeigt oder nicht genutzt werden kann, wird alternativ ein Text für das Bild angezeigt. Der Alternativtext soll das Bild dann inhaltlich ersetzen. Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Wann greift ein Alternativtext? 21   Screenreader:   Wer einen Screenreader nutzt, ist bei Bildern auf den Alternativtext angewiesen.  Ist kein Alternativtext vorhanden, wird der Name der Datei   vorgelesen.   Wenn Grafiken nicht angezeigt werden können:   Textbasierte Oberflächen wie Lynx   Bei langsamen Verbindungen   Wenn Bilder nicht geladen werden können Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screencast Startseite bild.de mit und ohne Bilder, Alternativtexte aktiviert 22 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screenshot: Startseite wdr.de mit Bildern 23 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screenshot: Startseite wdr.de mit Bildern und aktivierten Alternativtexten 24 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screenshot: Startseite stern.de mit Bildern 25 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screenshot: Startseite stern.de ohne Bilder und mit aktivierten Alternativtexten 26 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screenshot: Startseite neckermann.de mit Bildern 27 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screenshot: Startseite neckermann.de ohne Bilder und aktivierten Alternativtexten 28 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screencast stern.de Alternativtexte: Doppelungen und Redundanzen (JAWS) 29 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Alternativtext 30 Probleme Lösungen   Alternativtext entspricht nicht dem   Redaktionelle Pflege Bild   Kontext des Bildes wichtig   Alternativtext fehlt   Funktion des Bilder immer mit abwägen   Alternativtext ist zu lang   Verlinkte Bilder müssen das Ziel   Alternativtext doppelt sich (Bsp. angeben (Bsp. Teaser) Teaser), Redundanzen (Bsp.   Programmierung Bildergalerie)    Wichtige Information immer in den   Symbole/Icons haben keinen Vordergrund (Symbole, Buttons, Schriftgrafiken) Alternativtext    Auf Schriftgrafik verzichten    Auf Vorder- und Hintergrund achten (Problem: weiß auf weiß) Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

31 Semantik: Warum Überschriften so wichtig sind Bildcollage: Screenshots wdr.de Überschriften-Struktur Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

32 Was ist Semantik? In Word arbeiten wir mit Hilfe von Formatvorlagen, im Internet ist das nicht anders. Wir können auch auf die gleichen Formatvorlagen zugreifen wie Überschriften, Absätze, Listen, Links und Formatierungen wie fett oder kursiv. Das nennt sich dann semantische Auszeichnung. Der Vorteil: Semantik kann immer genutzt und verstanden werden (z.B. Browser, Screenreader). Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Semantik am Beispiel: Überschriften 33   Wer mit der Tastatur arbeitet und / oder einen Screenreader nutzt, kann mit Hilfe von Überschriften navigieren und sich orientieren.   Eine verständliche Überschriften-Struktur ist wichtig   Überschriften nach Wichtigkeit und Ebenen (H1-H6)   Für die Orientierung schwierig sind   Strukturbrüche (H2 vor H1)   Fehlende Ebenen (H1 > H2 fehlt > H3 folgt)   Alle wichtigen Bereiche der Webseite sollen erfasst werden   Eine strukturelle Navigation beschleunigt das Navigieren (Direkter Einstieg zum Inhalt durch Sprungmarken, Überschriften über allen Hauptbereichen). Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Überschriften: mit dem Screenreader 34   Mit der Taste H von Überschrift   Quelle: Screenshot JAWS Überschriftenfenster zu Überschrift springen   Fenster mit Liste aller Überschriften (JAWS, Window- Eyes) nutzen:    Sortierbar   nach der Seitenreihenfolge   alphabetisch   Filterbar nach Ebenen (H1-H6)   Direkt zur Überschrift springen Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screencast wdr.de gelesen und navigiert mit Window-Eyes: Überschriften 35 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screenshot wdr.de Detailseite – Überschriften mit Ebenen hervorgehoben 36 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Überschriften-Struktur: wdr.de 37   Strukturbruch (H2 vor H1)   Screenshot: wdr.de Überschriften-Struktur (erstellt mit HeadingsMap)   Fehlende Ebene (H1 > H2 fehlt, H3 folgt)   Überschriften der rechten Spalte sind unterhalb des Artikels angeordnet (ab H2 Mediathek)   Nicht alle Bereiche der Seite sind mit Überschriften erfasst.   Bereich „Link“ im Artikel hat keine Überschrift. Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screenshot stern.de Detailseite – Überschriften mit Ebenen hervorgehoben 38 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Überschriften-Struktur: stern.de 39   Fehlende Ebene (H1 > H2 fehlt,   Screenshot: stern.de Überschriften- Struktur (erstellt mit HeadingsMap) H3 folgt)   Nur der Artikelbereich ist mit Überschriften erfasst.   Überschriften-Struktur sehr mangelhaft Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Screenshot obi.de Detailseite – Überschriften mit Ebenen hervorgehoben 40 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Überschriften-Struktur: obi.de 41   Strukturbruch (H3 vor H1)   Screenshot: obi.de Überschriften-Struktur (erstellt mit HeadingsMap)   Fehlende Ebene (H1 > H2 fehlt, H3 folgt)   Überschriften-Struktur sehr mangelhaft.   Falsche Verwendung    Nicht der Produktname wird als Überschrift gekennzeichnet.    Der redundante Linkhinweis „Alle Angebote“ pro Produkt wird zur Überschrift. Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

•  Untertitelung (CC) •  Audiobeschreibung (AD) •  Hörfilm (EAD) Screencast big-direkt.de Video 42 Noch mehr Barrieren? Videos Videos untertiteln für gehörlose und stark hörgeschädigte Menschen, mit einer Audiobeschreibung versehen für blinde und sehbehinderte Menschen (AD und EAD). Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

•  für Nutzer von Screenreadern •  für Menschen mit motorischen Behinderungen Screencast Startseite wdr.de bedient mit der Tastatur 43 Noch mehr Barrieren? Tastaturbedienbarkeit Barrierefrei bedeutet auch geräteunabhängig sein. Eine Seite darf nicht nur mit Maus, sie muss auch mit der Tastatur vollständig bedienbar sein. Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

•  für Nutzer von Screenreadern •  für Menschen mit motorischen Behinderungen Screencast Startseite wdr.de bedient mit der Tastatur 44 Noch mehr Barrieren? PDF-Dokumente Alle Inhalte auf Webseiten müssen zugänglich sein, so auch PDF-Dokumente. Screenshot: getaggtes PDF-Dokument „Gestaltung barrierefreier PDF-Dokumente“ (Einfach für alle) Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

45 Was ist Barrierefreiheit? Einfach mehr ... BIENE - Wettbewerb der Aktion Mensch und der Stiftung Digitale Chancen für die besten barrierefreien Webseiten – machen wir doch alle mit!  Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Sylvia Egger – Senior Webproducerin 46   Sie finden mich im Internet   Barrierefreiheit im Internet: sprungmarker.de   In Twitter: @sprungmarkers   Diese Präsentation finden Sie auf Slideshare: http://www.slideshare.net/sprungmarker   Credits   Alle Bildquellen sind am jeweiligen Bild vermerkt   Screencasts erstellt mit ScreenFlow Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

http://sprungmarker.de	170
http://www.netz-barrierefrei.de	151
http://feeds2.feedburner.com	94
http://www.slideshare.net	19
http://feeds.feedburner.com	19
http://barrierefrei-studieren.wikispaces.com	6
http://localhost	1

Was ist Barrierefreiheit? (18.05. 2010)

by Sylvia Egger

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 460

Statistics

Was ist Barrierefreiheit? (18.05. 2010) Presentation Transcript