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


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


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)


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)


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


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.


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.


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

12 Screenreader: der Vorleser
Bildcollage: Screenreader Logos


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.


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)


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


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


Screencast Seite Aktuelles rtl.de gelesen mit NVDA

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

19 Der Alternativtext: eine wichtige Alternative
Quelle: Screenshot Startseite wdr.de mit Alternativtexten


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.


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


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

Screenshot: Startseite wdr.de mit Bildern

Screenshot: Startseite wdr.de mit Bildern und aktivierten Alternativtexten

Screenshot: Startseite stern.de mit Bildern

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

Screenshot: Startseite neckermann.de mit Bildern

Screenshot: Startseite neckermann.de ohne Bilder und aktivierten Alternativtexten

Screencast stern.de Alternativtexte: Doppelungen und Redundanzen (JAWS)

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ß)

31 Semantik: Warum Überschriften so wichtig sind
Bildcollage: Screenshots wdr.de Überschriften-Struktur


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).


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).


Ü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


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

Screenshot wdr.de Detailseite – Überschriften mit Ebenen hervorgehoben

Ü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.


Screenshot stern.de Detailseite – Überschriften mit Ebenen hervorgehoben

Ü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


Screenshot obi.de Detailseite – Überschriften mit Ebenen hervorgehoben

Ü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.


•  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).


•  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.


•  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)


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 – 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


Was ist Barrierefreiheit? (18.05. 2010)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Empfohlen

Empfohlen (20)

Was ist Barrierefreiheit? (18.05. 2010)