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 Barrie...
„Barrierefreies Internet bezeichnet Web-Angebote, die von
allen Nutzern unabhängig von körperlichen oder technischen
Mögli...
Barrierefreiheit = Seiten für alle
17.11.2010Sylvia Egger - sprungmarker.de
4
  Blinde Menschen
  Sehbehinderte Menschen...
Barrieren im Internet in Zahlen
17.11.2010Sylvia Egger - sprungmarker.de
5
  155.000 blinde Menschen
  500.000 sehbehind...
Eine akustische Reise mit Screenreader und Braillezeile
Bildquellen: Braillezeile (links), Laptop mit Braillezeile (rechts...
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
Sylvia Egger - sprungmarker.de
Was ist eine Braillezeile?
17.11.2010Sylvia Egger - sprungmarker.de
9
  Sie kann, muss aber nicht zur Tastatur kombiniert...
Was ist eine Braillezeile?
  Braillemodul: Durch 8
bewegliche Stifte werden etwa
Buchstaben und Zahlen
dargestellt (40-80...
17.11.2010Sylvia Egger - sprungmarker.de11
Quelle: Computerbraille im Einsatz mit Braillezeile im Büro (YouTube)
Bildcollage: Screenreader Logos
Screenreader: der Vorleser
17.11.2010
12
Sylvia Egger - sprungmarker.de
„Screenreader machen (Windows)-Oberflächen für blinde
Computernutzer zugänglich. Sie lesen den Bildschirminhalt ein und
ge...
Wie arbeitet ein Screenreader?
  Liest den Bildschirminhalt ein
und gibt in aus:
  an die Sprachausgabe
  an die Braill...
17.11.2010Sylvia Egger - sprungmarker.de15
Screencast Fernsehsender Startseiten gelesen mit JAWS
Quelle: Screenshot Startseite wdr.de mit Alternativtexten
Der Alternativtext: eine wichtige Alternative
17.11.2010
16
Sylv...
Wenn etwa ein Bild nicht angezeigt oder nicht genutzt werden
kann, wird alternativ ein Text für das Bild angezeigt. Der
Al...
Wann greift ein Alternativtext?
17.11.2010Sylvia Egger - sprungmarker.de
18
  Screenreader:
  Wer einen Screenreader nut...
17.11.2010Sylvia Egger - sprungmarker.de19
Screenshot: Startseite wdr.de mit Bildern
17.11.2010Sylvia Egger - sprungmarker.de20
Screenshot: Startseite wdr.de ohne Bilder
17.11.2010Sylvia Egger - sprungmarker.de21
Screenshot: Startseite arte.tv mit Bildern
17.11.2010Sylvia Egger - sprungmarker.de22
Screenshot: Startseite arte.tv ohne Bilder
17.11.2010Sylvia Egger - sprungmarker.de23
Screenshot: Startseite 3sat.de mit Bildern
17.11.2010Sylvia Egger - sprungmarker.de24
Screenshot: Startseite 3sat.de ohne Bilder
Alternativtext
  Alternativtext fehlt
  Alternativtext entspricht
nicht dem Bild
  Alternativtext ist zu lang
  Redakt...
Bildcollage: Screenshots wdr.de Überschriften-Struktur
Semantik: Warum Überschriften so wichtig sind
17.11.2010
26
Sylvia ...
In Word arbeiten wir mit Hilfe von Formatvorlagen, im Internet
ist das nicht anders. Wir können auch auf die gleichen
Form...
Semantik am Beispiel: Überschriften
  Wer mit der Tastatur arbeitet und / oder einen Screenreader nutzt, kann mit
Hilfe v...
Überschriften: mit dem Screenreader
  Mit der Taste H von Überschrift
zu Überschrift springen
  Fenster mit Liste aller
...
Screenshot wdr.de – Überschriften mit Ebenen hervorgehoben
17.11.2010Sylvia Egger - sprungmarker.de30
Screenshot wdr.de – Überschriften mit Ebenen hervorgehoben
17.11.2010Sylvia Egger - sprungmarker.de31
Überschriften-Struktur: wdr.de
  Strukturbruch (H2 vor H1,
Startseite: H1 > H3)
  Fehlende Ebene (H1 > H2 fehlt,
H3 folg...
Screenshot arte.tv – Überschriften mit Ebenen hervorgehoben
17.11.2010Sylvia Egger - sprungmarker.de33
Screenshot arte.tv – Überschriften mit Ebenen hervorgehoben
17.11.2010Sylvia Egger - sprungmarker.de34
Überschriften-Struktur: arte.tv
  Alle Punkte der Hauptnavigation
als H1 – problematisch
  Seitenbereiche sind
Untereben...
Screenshot 3sat.de Detailseite – Keine Überschriften
17.11.2010Sylvia Egger - sprungmarker.de36
Screenshot 3sat.de Detailseite – Keine Überschriften
17.11.2010Sylvia Egger - sprungmarker.de37
Screencast wdr.de : Überschriften mit JAWS/Beispiel JAWS Fenster Überschriften
17.11.2010Sylvia Egger - sprungmarker.de38
Videos untertiteln für gehörlose und stark hörgeschädigte Menschen, mit einer
Audiobeschreibung versehen für blinde und se...
Barrierefrei bedeutet auch geräteunabhängig sein. Eine Seite darf nicht
nur mit Maus, sie muss auch mit der Tastatur volls...
Alle Inhalte auf Webseiten müssen zugänglich sein, so auch PDF-Dokumente.
Screenshot: getaggtes PDF-Dokument „Gestaltung b...
BIENE - Wettbewerb der Aktion Mensch und der Stiftung Digitale Chancen
für die besten barrierefreien Webseiten – machen wi...
Sylvia Egger – Senior Frontend-Entwicklerin
  Sie finden mich im Internet
  Barrierefreiheit im Internet: sprungmarker.d...
Upcoming SlideShare
Loading in …5
×

Was ist Barrierefreiheit?

1,060 views
991 views

Published on

Presentation 23.11. 2010 Cologne

PDF file not accessible

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,060
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Was ist Barrierefreiheit?

  1. 1. Sylvia Egger – sprungmarker.de WAS IST BARRIEREFREIHEIT? EIN KURZTEST
  2. 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. 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. 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. 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. 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
  7. 7. 17.11.2010Sylvia Egger - sprungmarker.de7 Screencast Startseite wdr.de gelesen mit Screenreader JAWS
  8. 8. Bildquelle: incobs Lesen mit den Fingerkuppen: die Braillezeile 17.11.2010 8 Sylvia Egger - sprungmarker.de
  9. 9. Was ist eine Braillezeile? 17.11.2010Sylvia Egger - sprungmarker.de 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.
  10. 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. 11. 17.11.2010Sylvia Egger - sprungmarker.de11 Quelle: Computerbraille im Einsatz mit Braillezeile im Büro (YouTube)
  12. 12. Bildcollage: Screenreader Logos Screenreader: der Vorleser 17.11.2010 12 Sylvia Egger - sprungmarker.de
  13. 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. 14. 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 Sylvia Egger - sprungmarker.de
  15. 15. 17.11.2010Sylvia Egger - sprungmarker.de15 Screencast Fernsehsender Startseiten gelesen mit JAWS
  16. 16. Quelle: Screenshot Startseite wdr.de mit Alternativtexten Der Alternativtext: eine wichtige Alternative 17.11.2010 16 Sylvia Egger - sprungmarker.de
  17. 17. 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 Sylvia Egger - sprungmarker.de
  18. 18. Wann greift ein Alternativtext? 17.11.2010Sylvia Egger - sprungmarker.de 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
  19. 19. 17.11.2010Sylvia Egger - sprungmarker.de19 Screenshot: Startseite wdr.de mit Bildern
  20. 20. 17.11.2010Sylvia Egger - sprungmarker.de20 Screenshot: Startseite wdr.de ohne Bilder
  21. 21. 17.11.2010Sylvia Egger - sprungmarker.de21 Screenshot: Startseite arte.tv mit Bildern
  22. 22. 17.11.2010Sylvia Egger - sprungmarker.de22 Screenshot: Startseite arte.tv ohne Bilder
  23. 23. 17.11.2010Sylvia Egger - sprungmarker.de23 Screenshot: Startseite 3sat.de mit Bildern
  24. 24. 17.11.2010Sylvia Egger - sprungmarker.de24 Screenshot: Startseite 3sat.de ohne Bilder
  25. 25. 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 Sylvia Egger - sprungmarker.de Probleme Lösungen
  26. 26. Bildcollage: Screenshots wdr.de Überschriften-Struktur Semantik: Warum Überschriften so wichtig sind 17.11.2010 26 Sylvia Egger - sprungmarker.de
  27. 27. 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 Sylvia Egger - sprungmarker.de
  28. 28. 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). 17.11.2010Sylvia Egger - sprungmarker.de 28
  29. 29. Ü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 Sylvia Egger - sprungmarker.de
  30. 30. Screenshot wdr.de – Überschriften mit Ebenen hervorgehoben 17.11.2010Sylvia Egger - sprungmarker.de30
  31. 31. Screenshot wdr.de – Überschriften mit Ebenen hervorgehoben 17.11.2010Sylvia Egger - sprungmarker.de31
  32. 32. Ü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 Sylvia Egger - sprungmarker.de
  33. 33. Screenshot arte.tv – Überschriften mit Ebenen hervorgehoben 17.11.2010Sylvia Egger - sprungmarker.de33
  34. 34. Screenshot arte.tv – Überschriften mit Ebenen hervorgehoben 17.11.2010Sylvia Egger - sprungmarker.de34
  35. 35. Ü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 Sylvia Egger - sprungmarker.de
  36. 36. Screenshot 3sat.de Detailseite – Keine Überschriften 17.11.2010Sylvia Egger - sprungmarker.de36
  37. 37. Screenshot 3sat.de Detailseite – Keine Überschriften 17.11.2010Sylvia Egger - sprungmarker.de37
  38. 38. Screencast wdr.de : Überschriften mit JAWS/Beispiel JAWS Fenster Überschriften 17.11.2010Sylvia Egger - sprungmarker.de38
  39. 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. 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. 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. 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. 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

×