Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Was ist Barrierefreiheit? Ein Kurztest
1. Sylvia Egger – sprungmarker.de
WAS IST BARRIEREFREIHEIT?
EIN KURZTEST
2. 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
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
Was ist Barrierefreiheit?
17.11.2010
3
Sylvia Egger - sprungmarker.de
4. Barrierefreiheit = Seiten für alle
17.11.2010Sylvia Egger - sprungmarker.de
4
Blinde Menschen
Sehbehinderte Menschen
Gehörlose Menschen
Stark hörgeschädigte Menschen
Motorisch eingeschränkte Menschen
Menschen mit Lernbehinderungen
Ältere Menschen
5. Barrieren im Internet in Zahlen
17.11.2010Sylvia Egger - sprungmarker.de
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. 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
Sylvia Egger - sprungmarker.de
9. Was ist eine Braillezeile?
17.11.2010Sylvia Egger - sprungmarker.de
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.
10. 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
Sylvia Egger - sprungmarker.de
11. 17.11.2010Sylvia Egger - sprungmarker.de11
Quelle: Computerbraille im Einsatz mit Braillezeile im Büro (YouTube)
13. „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
Sylvia Egger - sprungmarker.de
14. Welche Screenreader?
17.11.2010Sylvia Egger - sprungmarker.de
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)
15. 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
Sylvia Egger - sprungmarker.de
16. 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
Sylvia Egger - sprungmarker.de
18. Quelle: Screenshot Startseite wdr.de mit Alternativtexten
Der Alternativtext: eine wichtige Alternative
17.11.2010
18
Sylvia Egger - sprungmarker.de
19. 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
Sylvia Egger - sprungmarker.de
20. Wann greift ein Alternativtext?
17.11.2010Sylvia Egger - sprungmarker.de
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
27. 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
Sylvia Egger - sprungmarker.de
Probleme Lösungen
28. Bildcollage: Screenshots wdr.de Überschriften-Struktur
Semantik: Warum Überschriften so wichtig sind
17.11.2010
28
Sylvia Egger - sprungmarker.de
29. 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
Sylvia Egger - sprungmarker.de
30. 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).
17.11.2010Sylvia Egger - sprungmarker.de
30
31. Ü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
Sylvia Egger - sprungmarker.de
33. Ü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
Sylvia Egger - sprungmarker.de
35. Ü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
Sylvia Egger - sprungmarker.de
37. Ü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
Sylvia Egger - sprungmarker.de
39. 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
Sylvia Egger - sprungmarker.de
Beispiel:
Barrierefreies Video Player
"Framework"
• Untertitelung (CC)
• Audiobeschreibung (AD)
• Transkript
40. 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
Sylvia Egger - sprungmarker.de
Screencast Startseiten
Fernsehsender mit Tastatur
bedient
• für Nutzer von Screenreadern
• für Menschen mit motorischen
Behinderungen
41. 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
Sylvia Egger - sprungmarker.de
Screencast Startseite wdr.de
bedient mit der Tastatur
• für Nutzer von Screenreadern
• für Menschen mit motorischen
Behinderungen
42. 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 - sprungmarker.de
43. 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
17.11.2010Sylvia Egger - sprungmarker.de
43