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

Was ist Barrierefreiheit? (18.05. 2010)

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

Page 1: Was ist Barrierefreiheit? (18.05. 2010)

WAS IST BARRIEREFREIHEIT?

EIN KURZTEST

Sylvia Egger – sprungmarker .de – brainbits.net

Page 2: Was ist Barrierefreiheit? (18.05. 2010)

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

Page 3: Was ist Barrierefreiheit? (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

Page 4: Was ist Barrierefreiheit? (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

Page 5: Was ist Barrierefreiheit? (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

Page 6: Was ist Barrierefreiheit? (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

Page 7: Was ist Barrierefreiheit? (18.05. 2010)

Sylvia Egger - sprungmarker.de - brainbits.net

Screencast Startseite wdr .de gelesen mit Screenreader JA WS

18.05.2010 7

Page 8: Was ist Barrierefreiheit? (18.05. 2010)

Lesen mit den Fingerkuppen: die Braillezeile

18.05.2010

8

Sylvia Egger - sprungmarker.de - brainbits.net

Bildquelle: incobs

Page 9: Was ist Barrierefreiheit? (18.05. 2010)

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

Page 10: Was ist Barrierefreiheit? (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

Page 11: Was ist Barrierefreiheit? (18.05. 2010)

Sylvia Egger - sprungmarker.de - brainbits.net

Quelle: Computerbraille im Einsatz mit Braillezeile im Büro ( YouTube)

18.05.2010 11

Page 12: Was ist Barrierefreiheit? (18.05. 2010)

Screenreader: der V orleser

18.05.2010

12

Sylvia Egger - sprungmarker.de - brainbits.net

Bildcollage: Screenreader Logos

Page 13: Was ist Barrierefreiheit? (18.05. 2010)

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

Page 14: Was ist Barrierefreiheit? (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

Page 15: Was ist Barrierefreiheit? (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

Page 16: Was ist Barrierefreiheit? (18.05. 2010)

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

Page 17: Was ist Barrierefreiheit? (18.05. 2010)

Screencast Seite Aktuelles rtl.de gelesen mit NVDA

17 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 18: Was ist Barrierefreiheit? (18.05. 2010)

Screencast Startseite von otto.de gelesen mit Screenreader V oiceOver (Mac)

18 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 19: Was ist Barrierefreiheit? (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

Page 20: Was ist Barrierefreiheit? (18.05. 2010)

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

Page 21: Was ist Barrierefreiheit? (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

Page 22: Was ist Barrierefreiheit? (18.05. 2010)

Screencast Startseite bild.de mit und ohne Bilder , Alternativtexte aktiviert

22 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 23: Was ist Barrierefreiheit? (18.05. 2010)

Screenshot: Startseite wdr .de mit Bildern

23 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 24: Was ist Barrierefreiheit? (18.05. 2010)

Screenshot: Startseite wdr .de mit Bildern und aktivierten Alternativtexten

24 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 25: Was ist Barrierefreiheit? (18.05. 2010)

Screenshot: Startseite stern.de mit Bildern

25 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 26: Was ist Barrierefreiheit? (18.05. 2010)

Screenshot: Startseite stern.de ohne Bilder und mit aktivierten Alternativtexten

26 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 27: Was ist Barrierefreiheit? (18.05. 2010)

Screenshot: Startseite neckermann.de mit Bildern

27 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 28: Was ist Barrierefreiheit? (18.05. 2010)

Screenshot: Startseite neckermann.de ohne Bilder und aktivierten Alternativtexten

28 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 29: Was ist Barrierefreiheit? (18.05. 2010)

Screencast stern.de Alternativtexte: Doppelungen und Redundanzen (JA WS)

29 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 30: Was ist Barrierefreiheit? (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

Page 31: Was ist Barrierefreiheit? (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

Page 32: Was ist Barrierefreiheit? (18.05. 2010)

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

Page 33: Was ist Barrierefreiheit? (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

Page 34: Was ist Barrierefreiheit? (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

Page 35: Was ist Barrierefreiheit? (18.05. 2010)

Screencast wdr .de gelesen und navigiert mit Window-Eyes: Überschriften

35 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 36: Was ist Barrierefreiheit? (18.05. 2010)

Screenshot wdr.de Detailseite – Überschriften mit Ebenen hervorgehoben

36 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 37: Was ist Barrierefreiheit? (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

Page 38: Was ist Barrierefreiheit? (18.05. 2010)

Screenshot stern.de Detailseite – Überschriften mit Ebenen hervorgehoben

38 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 39: Was ist Barrierefreiheit? (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

Page 40: Was ist Barrierefreiheit? (18.05. 2010)

Screenshot obi.de Detailseite – Überschriften mit Ebenen hervorgehoben

40 Sylvia Egger - sprungmarker.de - brainbits.net 18.05.2010

Page 41: Was ist Barrierefreiheit? (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

Page 42: Was ist Barrierefreiheit? (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

Page 43: Was ist Barrierefreiheit? (18.05. 2010)

 • 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

Page 44: Was ist Barrierefreiheit? (18.05. 2010)

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)

Page 45: Was ist Barrierefreiheit? (18.05. 2010)

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!

Page 46: Was ist Barrierefreiheit? (18.05. 2010)

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