SlideShare ist ein Scribd-Unternehmen logo
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
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
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)
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
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 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
Sylvia Egger - sprungmarker.de
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
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
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)
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
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
17.11.2010Sylvia Egger - sprungmarker.de17
Screencast Fernsehsender Startseiten gelesen mit JAWS
Quelle: Screenshot Startseite wdr.de mit Alternativtexten
Der Alternativtext: eine wichtige Alternative
17.11.2010
18
Sylvia Egger - sprungmarker.de
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
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
17.11.2010Sylvia Egger - sprungmarker.de21
Screenshot: Startseite wdr.de mit Bildern
17.11.2010Sylvia Egger - sprungmarker.de22
Screenshot: Startseite wdr.de ohne Bilder
17.11.2010Sylvia Egger - sprungmarker.de23
Screenshot: Startseite sat1.de mit Bildern
17.11.2010Sylvia Egger - sprungmarker.de24
Screenshot: Startseite sat1.de ohne Bilder
17.11.2010Sylvia Egger - sprungmarker.de25
Screenshot: Startseite kabeleins.de mit Bildern
17.11.2010Sylvia Egger - sprungmarker.de26
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
Sylvia Egger - sprungmarker.de
Probleme Lösungen
Bildcollage: Screenshots wdr.de Überschriften-Struktur
Semantik: Warum Überschriften so wichtig sind
17.11.2010
28
Sylvia Egger - sprungmarker.de
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
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
Ü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
Screenshot wdr.de – Überschriften mit Ebenen hervorgehoben
17.11.2010Sylvia Egger - sprungmarker.de32
Ü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
Screenshot kabeleins.de – Überschriften mit Ebenen hervorgehoben
17.11.2010Sylvia Egger - sprungmarker.de34
Ü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
Screenshot sat.1.de Detailseite – Überschriften mit Ebenen hervorgehoben
17.11.2010Sylvia Egger - sprungmarker.de36
Ü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
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 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
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
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
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
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

Weitere ähnliche Inhalte

Empfohlen

2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing
Search Engine Journal
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
OECD Directorate for Financial and Enterprise Affairs
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
SocialHRCamp
 
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 

Empfohlen (20)

2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing2024 Trend Updates: What Really Works In SEO & Content Marketing
2024 Trend Updates: What Really Works In SEO & Content Marketing
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
 
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 

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
  • 7. 17.11.2010Sylvia Egger - sprungmarker.de7 Screencast Startseite wdr.de gelesen mit Screenreader JAWS
  • 8. Bildquelle: incobs Lesen mit den Fingerkuppen: die Braillezeile 17.11.2010 8 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)
  • 12. Bildcollage: Screenreader Logos Screenreader: der Vorleser 17.11.2010 12 Sylvia Egger - sprungmarker.de
  • 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
  • 17. 17.11.2010Sylvia Egger - sprungmarker.de17 Screencast Fernsehsender Startseiten gelesen mit JAWS
  • 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
  • 21. 17.11.2010Sylvia Egger - sprungmarker.de21 Screenshot: Startseite wdr.de mit Bildern
  • 22. 17.11.2010Sylvia Egger - sprungmarker.de22 Screenshot: Startseite wdr.de ohne Bilder
  • 23. 17.11.2010Sylvia Egger - sprungmarker.de23 Screenshot: Startseite sat1.de mit Bildern
  • 24. 17.11.2010Sylvia Egger - sprungmarker.de24 Screenshot: Startseite sat1.de ohne Bilder
  • 25. 17.11.2010Sylvia Egger - sprungmarker.de25 Screenshot: Startseite kabeleins.de mit Bildern
  • 26. 17.11.2010Sylvia Egger - sprungmarker.de26 Screenshot: Startseite kabeleins.de ohne Bilder
  • 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
  • 32. Screenshot wdr.de – Überschriften mit Ebenen hervorgehoben 17.11.2010Sylvia Egger - sprungmarker.de32
  • 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
  • 34. Screenshot kabeleins.de – Überschriften mit Ebenen hervorgehoben 17.11.2010Sylvia Egger - sprungmarker.de34
  • 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
  • 36. Screenshot sat.1.de Detailseite – Überschriften mit Ebenen hervorgehoben 17.11.2010Sylvia Egger - sprungmarker.de36
  • 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
  • 38. Screencast wdr.de : Überschriften mit JAWS/Beispiel JAWS Fenster Überschriften 17.11.2010Sylvia Egger - sprungmarker.de38
  • 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