Was ist Barrierefreiheit? Ein Kurztest

Sylvia Egger – sprungmarker.de

WAS IST BARRIEREFREIHEIT?

EIN KURZTEST

Sylvia Egger

17.11.2010 Sylvia Egger - sprungmarker.de

2

  Senior Frontend-Entwicklerin   Seit 7 Jahren Arbeit mit Barrierefreiheit im Internet   Barrierefreiheit im Internet: sprungmarker.de   Spezialgebiete

  Testen, Prüfen und Weiterentwicklung von Barrierefreiheit   Barrierefreie Gesetzgebung (BITV, WCAG2, BITV-Test)   Mitglied im BIK-95-Plus-Kreis (Weiterentwicklung des

barrierefreien Testverfahrens BITV-Test)   Vorträge und Schulungen zur 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

Was ist Barrierefreiheit?

17.11.2010

3

Sylvia Egger - sprungmarker.de

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)

Eine akustische Reise mit Screenreader und Braillezeile Bildquellen: Braillezeile (links), Laptop mit Braillezeile (rechts oben), Braillezeile (rechts unten)

Wie blinde und sehbehinderte Menschen surfen?

17.11.2010

6


17.11.2010 Sylvia Egger - sprungmarker.de 7

Screencast Startseite wdr.de gelesen mit Screenreader JAWS

Bildquelle: incobs

Lesen mit den Fingerkuppen: die Braillezeile

17.11.2010

8


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?   Braillemodul: Durch 8

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 digitale-chancen.de

17.11.2010

10



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

Bildcollage: Screenreader Logos

Screenreader: der Vorleser

17.11.2010

12


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

Was ist ein Screenreader?

17.11.2010

13


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, iPhone, iPad, iPod)   Orca (Linux, Open Source – mit Firefox)

Wie arbeitet ein Screenreader?   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

  Screenshot Überschriften-Fenster JAWS

17.11.2010

15


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   Sprachwechsel im Text

  Screenshot wdr.de – lineare Darstellung

17.11.2010

16



Screencast Fernsehsender Startseiten gelesen mit JAWS

Quelle: Screenshot Startseite wdr.de mit Alternativtexten

Der Alternativtext: eine wichtige Alternative

17.11.2010

18


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.

Was ist ein Alternativtext?

17.11.2010

19


Wann greift ein Alternativtext?


20

  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


Screenshot: Startseite wdr.de mit Bildern


Screenshot: Startseite wdr.de ohne Bilder


Screenshot: Startseite sat1.de mit Bildern


Screenshot: Startseite sat1.de ohne Bilder


Screenshot: Startseite kabeleins.de mit Bildern


Screenshot: Startseite kabeleins.de ohne Bilder

Alternativtext

  Alternativtext fehlt   Alternativtext entspricht

nicht dem Bild   Alternativtext ist zu lang

  Redaktionelle Pflege   Kontext des Bildes wichtig   Funktion des Bilder immer mit

abwägen   Programmierung

  Wichtige Information immer in den Vordergrund (Symbole, Buttons, Schriftgrafiken)

  Auf Schriftgrafik verzichten   Auf Vorder- und Hintergrund

achten (Problem: weiß auf weiß)

17.11.2010

27


Probleme Lösungen

Bildcollage: Screenshots wdr.de Überschriften-Struktur

Semantik: Warum Überschriften so wichtig sind

17.11.2010

28


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

Was ist Semantik?

17.11.2010

29


Semantik am Beispiel: Überschriften   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).


30

Überschriften: mit dem Screenreader   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

  Quelle: Screenshot JAWS Überschriftenfenster

17.11.2010

31


Screenshot wdr.de – Überschriften mit Ebenen hervorgehoben


Überschriften-Struktur: wdr.de   Strukturbruch (H2 vor H1,

Startseite: H1 > H3)   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 (Stichwort: strukturelle Navigation)

  Screenshot: wdr.de Überschriften-Struktur (erstellt mit HeadingsMap)

17.11.2010

33


Screenshot kabeleins.de – Überschriften mit Ebenen hervorgehoben


Überschriften-Struktur: kabeleins.de   kabeleins scheint nur H1 zu

nutzen   Keine Hierarchie, alles auf einer

Ebene   Willkürliche Zuordnung   Liefert keinen Überblick über den

Inhalt der Seite   Nicht alle Bereiche der Seite sind

mit Überschriften erfasst.

  Screenshot: kabeleins.de Überschriften-Struktur (erstellt mit HeadingsMap)

17.11.2010

35


Screenshot sat.1.de Detailseite – Überschriften mit Ebenen hervorgehoben


Überschriften-Struktur: sat1.de   Fehlende Ebenen – keine

wirkliche Hierarchie   Willkürliche Zuordnung   Liefert keinen Überblick über den

Inhalt der Seite   Nicht alle Bereiche der Seite sind

mit Überschriften erfasst.   Stichwort: Kraut & Rüben

Screenshot: sat1.de Überschriften (erstellt mit HeadingsMap)

37


Screencast wdr.de : Überschriften mit JAWS/Beispiel JAWS Fenster Überschriften


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

Noch mehr Barrieren? Videos

17.11.2010

39


Beispiel: Barrierefreies Video Player "Framework"

•  Untertitelung (CC) •  Audiobeschreibung (AD) •  Transkript

Barrierefrei bedeutet auch geräteunabhängig sein. Eine Seite darf nicht nur mit Maus, sie muss auch mit der Tastatur vollständig bedienbar sein.

Noch mehr Barrieren? Tastaturbedienbarkeit

17.11.2010

40


Screencast Startseiten Fernsehsender mit Tastatur bedient

•  für Nutzer von Screenreadern •  für Menschen mit motorischen Behinderungen

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)

Noch mehr Barrieren? PDF-Dokumente

17.11.2010

41


Screencast Startseite wdr.de bedient mit der Tastatur

•  für Nutzer von Screenreadern •  für Menschen mit motorischen Behinderungen

BIENE - Wettbewerb der Aktion Mensch und der Stiftung Digitale Chancen für die besten barrierefreien Webseiten – machen wir doch alle mit!

Was ist Barrierefreiheit? Einfach mehr ...

17.11.2010

42


Sylvia Egger – Senior Frontend-Entwicklerin

  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


43

Technology

Was ist Barrierefreiheit? Ein Kurztest