Upload
sylvia-egger
View
3.118
Download
1
Embed Size (px)
DESCRIPTION
Einführungs-Vortrag zur Barrierefreiheit in Köln - 18.05. 2010 - Themen: Surfen mit Screenreader und Braillezeile, Alternativtexte, Semantik am Beispiel Überschriften-Struktur. Optional Videooptimierung mit Untertitelung, Audiobeschreibung und Hörfilm, Tastaturbedienbarkeit als Barriere und PDF und Barrierefreiheit. Das PDF ist barrierefrei, nur die Umfliessen-Funktion ist nicht ganz rund. Wie immer ohne die üppigen Screencasts.
Citation preview
WAS IST BARRIEREFREIHEIT?
EIN KURZTEST
Sylvia Egger – sprungmarker .de – brainbits.net
Sylvia Egger - sprungmarker.de - brainbits.net
2
Sylvia Egger 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 W eiterentwicklung von Barrierefreiheit Barrierefreie Gesetzgebung (BITV , WCAG, BITV-Test) Mitglied im BIK-95-Plus-Kreis (W eiterentwicklung des barrierefreien Testverfahrens BITV-Test)
Webstandards
18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
Was ist Barrierefreiheit? 3
„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
18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
4
Barrierefreiheit = Seiten für alle
Blinde Menschen Sehbehinderte Menschen Gehörlose Menschen Stark hörgeschädigte Menschen Motorisch eingeschränkte Menschen Menschen mit Lernbehinderungen Ältere Menschen
18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
5
Barrieren im Internet in Zahlen
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)
18.05.2010
Wie blinde und sehbehinderte Menschen surfen? Eine akustische Reise mit Screenreader und Braillezeile Bildquellen: Braillezeile (links), Laptop mit Braillezeile (rechts oben), Braillezeile (rechts unten)
18.05.2010
6
Sylvia Egger - sprungmarker.de - brainbits.net
Sylvia Egger - sprungmarker.de - brainbits.net
Screencast Startseite wdr .de gelesen mit Screenreader JA WS
18.05.2010 7
Lesen mit den Fingerkuppen: die Braillezeile
18.05.2010
8
Sylvia Egger - sprungmarker.de - brainbits.net
Bildquelle: incobs
Sylvia Egger - sprungmarker.de - brainbits.net
9
Was ist eine Braillezeile? Sie kann, muss aber nicht zur PC-Tastatur kombiniertwerden. Sie gibt die Informationen eines PC-Bildschirms in der Blindenpunktschrift Braille aus. Sie dient nur der Ausgabe, nicht der Eingabe. Zur Eingabewird die PC-Tastatur genutzt. Wird mit einem Screenreader kombiniert (Brückensoftware). Häufig wird auch die Sprachausgabe des Screenreaders genutzt.
18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
Was ist eine Braillezeile? 10
Braillemodul: Durch 8 bewegliche Stifte werden etwaBuchstaben 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.
Quelle digitale-chancen.de
18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
Quelle: Computerbraille im Einsatz mit Braillezeile im Büro ( YouTube)
18.05.2010 11
Screenreader: der V orleser
18.05.2010
12
Sylvia Egger - sprungmarker.de - brainbits.net
Bildcollage: Screenreader Logos
Sylvia Egger - sprungmarker.de - brainbits.net
Was ist ein Screenreader? 13
„Screenreader machen (Windows)-Oberflächen für blindeComputernutzer zugänglich. Sie lesen den Bildschirminhalt ein undgeben die wichtigsten Informationen an die Sprachausgabe undBraillezeile weiter.“
Quelle: INCOBS
Hinweis: Screenreader gibt es mittlerweile nicht nur für Windows, auchfür Mac und Linux.
18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
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)
18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
Wie arbeitet ein Screenreader? 15
Liest den Bildschirminhalt ein 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
18.05.2010
Screenshot Überschriften-Fenster JA WS
Wie arbeitet ein Screenreader? Alles Visuelle auf dem Bildschirm 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
Sylvia Egger - sprungmarker.de - brainbits.net
16
Sprachwechsel im Text
Screenshot wdr .de – lineare Darstellung
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 V oiceOver (Mac)
18 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010
Der Alternativtext: eine wichtige Alternative Quelle: Screenshot Startseite wdr .de mit Alternativtexten
18.05.2010
19
Sylvia Egger - sprungmarker.de - brainbits.net
Sylvia Egger - sprungmarker.de - brainbits.net
Was ist ein Alternativtext? 20
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.
18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
21
Wann greift ein Alternativtext?
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 L ynx Bei langsamen V erbindungenWenn Bilder nicht geladen werden könn en
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 (JA WS)
29 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
30
Probleme Lösungen
Alternativtext
Alternativtext entspricht nicht dem Bild Alternativtext fehlt Alternativtext ist zu lang Alternativtext doppelt sich (Bsp.Teaser), Redundanzen (Bsp.Bildergalerie) Symbole/Icons haben keinenAlternativtext
Redaktionelle Pflege Kontext des Bildes wichtig Funktion des Bilder immer mit abwägen Verlinkte Bilder müssen das Ziel angeben (Bsp. Teaser)
Programmierung Wichtige Information immer in den
Vordergrund (Symbole, Buttons,Schriftgrafiken)
Auf Schriftgrafik verzichten Auf Vorder- und Hintergrund achten
(Problem: weiß auf weiß)
18.05.2010
Semantik: W arum Überschriften so wichtig sind Bildcollage: Screenshots wdr .de Überschriften-Struktur
18.05.2010
31
Sylvia Egger - sprungmarker.de - brainbits.net
Sylvia Egger - sprungmarker.de - brainbits.net
Was ist Semantik? 32
In Word arbeiten wir mit Hilfe von Formatvorlagen, im Internet ist das nicht anders. Wir können auch auf die gleichenFormatvorlagen 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).
18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
33
Semantik am Beispiel: Überschriften
Wer mit der Tastatur arbeitet und / oder einen Screenreader nutzt, kann mitHilfe 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).
18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
Überschriften: mit dem Screenreader 34
Mit der Taste H von Überschrift 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
18.05.2010
Quelle: Screenshot JA WS Überschriftenfenster
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
Sylvia Egger - sprungmarker.de - brainbits.net
37
Überschriften-Struktur: wdr.de
Strukturbruch (H2 vor H1) 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.
Screenshot: wdr.de Überschriften-Struktur (erstellt mit HeadingsMap)
18.05.2010
Screenshot stern.de Detailseite – Überschriften mit Ebenen hervorgehoben
38 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
Überschriften-Struktur: stern.de 39
Fehlende Ebene (H1 > H2 fehlt, H3 folgt) Nur der Artikelbereich ist mit Überschriften erfasst. Überschriften-Struktur sehr mangelhaft
Screenshot: stern.de Überschriften-Struktur (erstellt mit HeadingsMap)
18.05.2010
Screenshot obi.de Detailseite – Überschriften mit Ebenen hervorgehoben
40 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010
Sylvia Egger - sprungmarker.de - brainbits.net
41
Überschriften-Struktur: obi.de
Strukturbruch (H3 vor H1) 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.
Screenshot: obi.de Überschriften-Struktur (erstellt mit HeadingsMap)
18.05.2010
•••
Untertitelung (CC) Audiobeschreibung (AD) Hörfilm (EAD)
Screencast big-direkt.de Video
Noch mehr Barrieren? V ideos 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).
18.05.2010
42
Sylvia Egger - sprungmarker.de - brainbits.net
• für Nutzer von Screenreadern
• für Menschen mit motorischen Behinderungen
Screencast Startseite wdr .de bedient mit der Tastatur
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.
18.05.2010
43
Sylvia Egger - sprungmarker.de - brainbits.net
18.05.2010
44
Sylvia Egger - sprungmarker.de - brainbits.net
Screencast Startseite wdr.de bedient mit der Tastatur
• für Nutzer von Screenreadern • für Menschen mit motorischen Behinderungen
Noch mehr Barrieren? PDF-Dokumente Alle Inhalte auf W ebseiten müssen zugänglich sein, so auch PDF-Dokumente. Screenshot: getaggtes PDF-Dokument „Gestaltung barrierefreier PDF-Dokumente “ (Einfach für alle)
18.05.2010
45
Sylvia Egger - sprungmarker.de - brainbits.net
Was ist Barrierefreiheit? Einfach mehr ... BIENE - Wettbewerb der Aktion Mensch und der Stiftung Digitale Chancen für die besten barrierefreien W ebseiten – machen wir doch alle mit!
Sylvia Egger - sprungmarker.de - brainbits.net
46
Sylvia Egger – Senior W ebproducerinSie finden mich im Internet
Barrierefreiheit im Internet: sprungmarker.de In Twitter: @sprungmarkers Diese Präsentation finden Sie auf Slideshar e: http://www.slideshare.net/sprungmarker
Credits
Alle Bildquellen sind am jeweiligen Bild vermerkt Screencasts erstellt mit ScreenFlow
18.05.2010