Was ist Barrierefreiheit?

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

Sylvia Egger
17.11.2010Sylvia 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.2010Sylvia Egger - sprungmarker.de7
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 Tastatur kombiniert werden.
  Sie gibt die Informationen eines Bildschirms in der
Blindenpunktschrift Braille aus.
  Sie dient nur der Ausgabe, nicht der Eingabe. Zur Eingabe
wird die PC-Tastatur genutzt (Es gibt auch Kombi-Geräte)
  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

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
14

Screencast Fernsehsender Startseiten gelesen mit JAWS

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

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
17

Wann greift ein Alternativtext?
18
  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 arte.tv mit Bildern

Screenshot: Startseite arte.tv ohne Bilder

Screenshot: Startseite 3sat.de mit Bildern

Screenshot: Startseite 3sat.de ohne Bilder

Alternativtext
  Alternativtext fehlt
  Alternativtext entspricht
nicht dem Bild
  Alternativtext ist zu lang
  Redaktionelle Pflege
  Alternativtext so
  Genau wie möglich
  So knapp wie möglich
17.11.2010
25
Probleme Lösungen

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

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
27

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 (H1 – H6)
  Eine strukturelle Navigation beschleunigt das Navigieren (Direkter Einstieg
zum Inhalt durch Sprungmarken, Überschriften über allen Hauptbereichen).
28

Überschriften: mit dem Screenreader
  Mit der Taste H von Überschrift
zu Überschrift springen
  Fenster mit Liste aller
Überschriften (JAWS, Window-
Eyes) nutzen
  Quelle: Screenshot JAWS Überschriftenfenster
17.11.2010
29

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
Startseite
17.11.2010
32

Screenshot arte.tv – Überschriften mit Ebenen hervorgehoben

Überschriften-Struktur: arte.tv
  Alle Punkte der Hauptnavigation
als H1 – problematisch
  Seitenbereiche sind
Unterebenen des Inhalts (H5)
und Strukturbruch (H3 > H5)
  Nicht alle Bereiche der Seite sind
mit Überschriften erfasst wie Top-
und Fussnavigation
  Screenshot: arte.tv Startseite
Überschriften-Struktur (HeadingsMap)
17.11.2010
35

Screenshot 3sat.de Detailseite – Keine Überschriften

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

Was ist Barrierefreiheit?

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Was ist Barrierefreiheit?