SlideShare ist ein Scribd-Unternehmen logo
1 von 25
Einfach barrierefrei
Websites für alle
www.netz-barrierefrei.de
Darum gehts
Warum
Barrierefreiheit?
Die größten
Barrieren
und wie man sie
umgeht
2www.netz-barrierefrei.de
WARUM BARRIEREFREIHEIT?
3www.netz-barrierefrei.de
4 • Sinnes- und
Körperbehinderungen
• Wahrnehmen oder
Verarbeiten von
Informationen
• Eingeschränkte
Fähigkeiten:
mangelnde Technik-
Kenntnis,
Analphabetismus
Drei Formen von Einschränkungen
www.netz-barrierefrei.de
5
• Blinde und Sehbehinderte können
visuelle Inhalte schlecht
wahrnehmen.
• Schwerhörige und Gehörlose haben
Probleme bei Audio-Inhalten.
• Motorisch Behinderte haben
Probleme bei der Nutzung von Maus
und Tastatur.
Sinnes- und Körperbehinderungen
www.netz-barrierefrei.de
6
• Menschen mit Down-Syndrom sind
mit komplexen Inhalten überfordert.
• Autisten und Epileptiker reagieren
empfindlich auf starke Reize.
• Personen mit Lernstörung oder
Demenz können sich schlecht
konzentrieren oder Inhalte merken.
Kognitive Verarbeitung
www.netz-barrierefrei.de
7
• 7,5 Mio. Menschen in Deutschland
können nicht oder nur schlecht
lesen.
• Viele oft ältere Menschen können
nicht mit Webseiten umgehen.
Verstehen und merken
www.netz-barrierefrei.de
Nicht jeder hat eine
Behinderung…
… aber fast jeder profitiert
von Barrierefreiheit.
8www.netz-barrierefrei.de
DIE GRÖSSTEN BARRIEREN
9www.netz-barrierefrei.de
10
 Das anzustrebende Ziel ist,
dass behinderten und nicht-
behinderten Menschen das
Webangebot in der gleichen
Qualität zur Verfügung
gestellt wird. Sie sollen die
gleichen Informationen
erhalten, die Website im
gleichen Maße bedienen und
mit ihr interagieren können.
Qualität
www.netz-barrierefrei.de
Mobile first
• Auch behinderte
Menschen sind heute
privat mehrheitlich mit
Smartphones online. Diese
haben häufig Hilfstechnik
eingebaut und sind im
Betrieb und für den
Internet-Zugang günstiger
als PCs und DSL.
• Daraus folgt… Ihr
Webauftritt sollte responsiv
sein, also für mobile
Endgeräte optimiert.
11www.netz-barrierefrei.de
Trennung Inhalt und Gestaltung
• Die Trennung von Inhalt
und Gestaltung hat zum
Ziel, dass Inhalte auf
unterschiedlichen
Plattformen
gleichermaßen genutzt
werden können.
• Es soll keine Rolle
spielen, ob jemand mit
Vergrößerung,
Screenreader oder
anderen Techniken
arbeitet.
12www.netz-barrierefrei.de
Das Mehrkanal-Prinzip
• Das Mehrkanal-Prinzip besagt,
dass Informationen über
mindestens zwei Sinne
zugänglich sein sollen.
• Das heißt zum Beispiel, das
Informationen nicht nur grafisch,
sondern auch textlich vermittelt
werden oder das Videos
Untertitel für Gehörlose
enthalten.
13
Quelle: Youtube Video – Das erste Mal von Aktion Mensch
www.netz-barrierefrei.de
14
• Grelle, flackernde
oder flimmernde
Inhalte vermeiden
• Animationen, Audio
und Video sollen
nicht von selbst
starten
Störende Inhalte vermeiden
www.netz-barrierefrei.de
Einfach halten
• Sowohl für den Aufbau von
Webseiten als auch für Inhalte gilt:
Je einfacher sie gestaltet sind,
desto barrierefreier sind sie.
• Überlegen Sie, ob bestimmte
Funktionen oder Inhalte an dieser
Stelle tatsächlich gebraucht
werden. Und lassen Sie sie im
Zweifelsfall eher weg.
• Beispiel: Die Social-Media-Buttons
eines t3n-Artikels befinden sich vor
dem eigentlichen Text.
21
Quelle: Artikel von www.t3n.de
www.netz-barrierefrei.de
Fehlervermeidung
Reduzieren Sie die Zahl
möglicher Fehler, dazu
gehören zum Beispiel:
• Fehleingaben in
Formularen
nicht funktionierende
Links
• Missverständliche Texte
• Die Website www.ich-will-
lernen.de funktioniert
leider nicht ohne Flash.
23www.netz-barrierefrei.de
DAS FRAMEWORK MACHTS
SCHON
24www.netz-barrierefrei.de
Die Systemwahl
• Wordpress, Drupa,
Contao und Joomla sind
von Haus aus sehr gut
zugänglich.
• Sie nehmen einem viel
Arbeit ab.
• Und sie erleichtern die
Veröffentlichung
barrierefreier Inhalte.
25www.netz-barrierefrei.de
Frameworks
• Auch Frameworks wie
Jquery oder Bootstrap
haben Barrierefreiheit
integriert.
• Das Rad muss also
nicht neu erfunden
werden.
• Schaut in der Doku
zum Framework, ob es
Infos zur
Barrierefreiheit gibt.
26www.netz-barrierefrei.de
REDAKTIONELLE AUFGABEN
27www.netz-barrierefrei.de
Texte semantisch auszeichnen
• Texte müssen in HTML als
Überschrift, Liste oder Zitat
ausgezeichnet werden. Der Blinde
erfährt ansonsten nicht, was die
Aufgabe eines Textabschnitts ist.
• Es reicht nicht, einen Text zu
fetten oder einzurücken. Das
bekommt der Blinde nicht mit.
28
Überschrif
t
Bildunterschrif
t
TextListe
Quelle: Wikipedia-Artikel zu Barrierefreiheit
www.netz-barrierefrei.de
Text-Verständlichkeit
• Verwenden Sie eine möglichst
verständliche Sprache.
• Strukturieren Sie den Text. Stellen
Sie wichtige Infos an den Anfang.
• Fassen Sie wichtige Infos noch
einmal zusammen.
29www.netz-barrierefrei.de
Alternativtext
• Der Alternativtext ist eine
Beschreibung des Bildes. Er wird
Blinden vom Screenreader
vorgelesen.
• Alterantivtexte sollten kurz
gehalten werden (80 Zeichen
max.).
• Der Inhalt des Bildes wird kurz
beschrieben.
30
Älteres Modell einer
Schreibmaschine für
Blindenschrift
www.netz-barrierefrei.de
Untertitel
 Für gehörlose und schwerhörige
Menschen sollte in Videos Untertitel
untergebracht werden.
 In Untertiteln wird das Gesprochene
verschriftlicht, außerdem werden
wichtige Geräusche vermittelt, die zum
Verständnis des Clips wichtig sind.
 Es gibt offene und geschlossene
Untertitel (closed captions). Closed
Captions können ein- bzw.
ausgeblendet werden und sind
deshalb vorzuziehen.
31
31
Quelle: Youtube Video – Das erste Mal von Aktion Mensch
www.netz-barrierefrei.de
Danke
Fragen?!

Weitere ähnliche Inhalte

Ähnlich wie Einfach barrierefrei

Alexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste WebgestaltungAlexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
ONE Schweiz
 

Ähnlich wie Einfach barrierefrei (10)

Barrierefreiheit 2010
Barrierefreiheit 2010Barrierefreiheit 2010
Barrierefreiheit 2010
 
Vortrag BOA Düsseldorf 2008
Vortrag BOA Düsseldorf 2008Vortrag BOA Düsseldorf 2008
Vortrag BOA Düsseldorf 2008
 
Barrierefreies internet - Tipps und Tools
Barrierefreies internet - Tipps und ToolsBarrierefreies internet - Tipps und Tools
Barrierefreies internet - Tipps und Tools
 
Barrierefreie Webseiten
Barrierefreie WebseitenBarrierefreie Webseiten
Barrierefreie Webseiten
 
Digtale Barrierefreiheit für NGO's
Digtale Barrierefreiheit für NGO'sDigtale Barrierefreiheit für NGO's
Digtale Barrierefreiheit für NGO's
 
Promotion 2.0
Promotion 2.0Promotion 2.0
Promotion 2.0
 
Barrierefreie Homepage
Barrierefreie HomepageBarrierefreie Homepage
Barrierefreie Homepage
 
Altersgerechte Webseiten Gestaltung
 | Alexander Seifert, Universität Zürich
Altersgerechte Webseiten Gestaltung
 | Alexander Seifert, Universität ZürichAltersgerechte Webseiten Gestaltung
 | Alexander Seifert, Universität Zürich
Altersgerechte Webseiten Gestaltung
 | Alexander Seifert, Universität Zürich
 
Alexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste WebgestaltungAlexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
Alexander Seifert: Altersgerechtes Internet durch angepasste Webgestaltung
 
Online Volunteering mit Behinderung
Online Volunteering mit BehinderungOnline Volunteering mit Behinderung
Online Volunteering mit Behinderung
 

Mehr von Domingos de Oliveira

Mehr von Domingos de Oliveira (20)

Als Sehender die Blindenschrift lernen - eine Einführung
Als Sehender die Blindenschrift lernen - eine EinführungAls Sehender die Blindenschrift lernen - eine Einführung
Als Sehender die Blindenschrift lernen - eine Einführung
 
Meine organisation soll barrierefrei werden
Meine organisation soll barrierefrei werdenMeine organisation soll barrierefrei werden
Meine organisation soll barrierefrei werden
 
Mein angebot soll barrierefrei werden
Mein angebot soll barrierefrei werdenMein angebot soll barrierefrei werden
Mein angebot soll barrierefrei werden
 
Was bedeutet blindheit
Was bedeutet blindheitWas bedeutet blindheit
Was bedeutet blindheit
 
Blind auf Facebook - behinderte Menschen im Web 2.0
Blind auf Facebook - behinderte Menschen im Web 2.0Blind auf Facebook - behinderte Menschen im Web 2.0
Blind auf Facebook - behinderte Menschen im Web 2.0
 
Wie barrierefrei ist meine website? Ein Vortrag für die republica 2017
Wie barrierefrei ist meine website? Ein Vortrag für die  republica 2017Wie barrierefrei ist meine website? Ein Vortrag für die  republica 2017
Wie barrierefrei ist meine website? Ein Vortrag für die republica 2017
 
Behinderte im Storytelling
Behinderte im StorytellingBehinderte im Storytelling
Behinderte im Storytelling
 
Wie barrierefrei ist meine website
Wie barrierefrei ist meine websiteWie barrierefrei ist meine website
Wie barrierefrei ist meine website
 
Barrierefreiheit in Multimedia - und warum jeder profitiert
Barrierefreiheit in Multimedia - und warum jeder profitiertBarrierefreiheit in Multimedia - und warum jeder profitiert
Barrierefreiheit in Multimedia - und warum jeder profitiert
 
Crashkurs digitale barrierefreiheit
Crashkurs digitale barrierefreiheitCrashkurs digitale barrierefreiheit
Crashkurs digitale barrierefreiheit
 
Barrierefreie dokumente
Barrierefreie dokumenteBarrierefreie dokumente
Barrierefreie dokumente
 
Barrierefreiheit im newsletter
Barrierefreiheit im newsletterBarrierefreiheit im newsletter
Barrierefreiheit im newsletter
 
Barrierefreiheit in eBooks
Barrierefreiheit in eBooksBarrierefreiheit in eBooks
Barrierefreiheit in eBooks
 
Screenreader für sehende - eine Anleitung für NVDA
Screenreader für sehende - eine Anleitung für NVDAScreenreader für sehende - eine Anleitung für NVDA
Screenreader für sehende - eine Anleitung für NVDA
 
Grassroots accessibility
Grassroots accessibilityGrassroots accessibility
Grassroots accessibility
 
Semantik im web
Semantik im webSemantik im web
Semantik im web
 
Behindert der datenschutz innovationen?
Behindert der datenschutz innovationen?Behindert der datenschutz innovationen?
Behindert der datenschutz innovationen?
 
Corporate social responsibility und barrierefreiheit
Corporate social responsibility und barrierefreiheitCorporate social responsibility und barrierefreiheit
Corporate social responsibility und barrierefreiheit
 
Graswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzen
Graswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzenGraswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzen
Graswurzel barrierefreiheit - Barrierefreiheit von unten durchsetzen
 
Barrierefreiheit im Unternehmen umsetzen
Barrierefreiheit im Unternehmen umsetzenBarrierefreiheit im Unternehmen umsetzen
Barrierefreiheit im Unternehmen umsetzen
 

Einfach barrierefrei

  • 1. Einfach barrierefrei Websites für alle www.netz-barrierefrei.de
  • 2. Darum gehts Warum Barrierefreiheit? Die größten Barrieren und wie man sie umgeht 2www.netz-barrierefrei.de
  • 4. 4 • Sinnes- und Körperbehinderungen • Wahrnehmen oder Verarbeiten von Informationen • Eingeschränkte Fähigkeiten: mangelnde Technik- Kenntnis, Analphabetismus Drei Formen von Einschränkungen www.netz-barrierefrei.de
  • 5. 5 • Blinde und Sehbehinderte können visuelle Inhalte schlecht wahrnehmen. • Schwerhörige und Gehörlose haben Probleme bei Audio-Inhalten. • Motorisch Behinderte haben Probleme bei der Nutzung von Maus und Tastatur. Sinnes- und Körperbehinderungen www.netz-barrierefrei.de
  • 6. 6 • Menschen mit Down-Syndrom sind mit komplexen Inhalten überfordert. • Autisten und Epileptiker reagieren empfindlich auf starke Reize. • Personen mit Lernstörung oder Demenz können sich schlecht konzentrieren oder Inhalte merken. Kognitive Verarbeitung www.netz-barrierefrei.de
  • 7. 7 • 7,5 Mio. Menschen in Deutschland können nicht oder nur schlecht lesen. • Viele oft ältere Menschen können nicht mit Webseiten umgehen. Verstehen und merken www.netz-barrierefrei.de
  • 8. Nicht jeder hat eine Behinderung… … aber fast jeder profitiert von Barrierefreiheit. 8www.netz-barrierefrei.de
  • 10. 10  Das anzustrebende Ziel ist, dass behinderten und nicht- behinderten Menschen das Webangebot in der gleichen Qualität zur Verfügung gestellt wird. Sie sollen die gleichen Informationen erhalten, die Website im gleichen Maße bedienen und mit ihr interagieren können. Qualität www.netz-barrierefrei.de
  • 11. Mobile first • Auch behinderte Menschen sind heute privat mehrheitlich mit Smartphones online. Diese haben häufig Hilfstechnik eingebaut und sind im Betrieb und für den Internet-Zugang günstiger als PCs und DSL. • Daraus folgt… Ihr Webauftritt sollte responsiv sein, also für mobile Endgeräte optimiert. 11www.netz-barrierefrei.de
  • 12. Trennung Inhalt und Gestaltung • Die Trennung von Inhalt und Gestaltung hat zum Ziel, dass Inhalte auf unterschiedlichen Plattformen gleichermaßen genutzt werden können. • Es soll keine Rolle spielen, ob jemand mit Vergrößerung, Screenreader oder anderen Techniken arbeitet. 12www.netz-barrierefrei.de
  • 13. Das Mehrkanal-Prinzip • Das Mehrkanal-Prinzip besagt, dass Informationen über mindestens zwei Sinne zugänglich sein sollen. • Das heißt zum Beispiel, das Informationen nicht nur grafisch, sondern auch textlich vermittelt werden oder das Videos Untertitel für Gehörlose enthalten. 13 Quelle: Youtube Video – Das erste Mal von Aktion Mensch www.netz-barrierefrei.de
  • 14. 14 • Grelle, flackernde oder flimmernde Inhalte vermeiden • Animationen, Audio und Video sollen nicht von selbst starten Störende Inhalte vermeiden www.netz-barrierefrei.de
  • 15. Einfach halten • Sowohl für den Aufbau von Webseiten als auch für Inhalte gilt: Je einfacher sie gestaltet sind, desto barrierefreier sind sie. • Überlegen Sie, ob bestimmte Funktionen oder Inhalte an dieser Stelle tatsächlich gebraucht werden. Und lassen Sie sie im Zweifelsfall eher weg. • Beispiel: Die Social-Media-Buttons eines t3n-Artikels befinden sich vor dem eigentlichen Text. 21 Quelle: Artikel von www.t3n.de www.netz-barrierefrei.de
  • 16. Fehlervermeidung Reduzieren Sie die Zahl möglicher Fehler, dazu gehören zum Beispiel: • Fehleingaben in Formularen nicht funktionierende Links • Missverständliche Texte • Die Website www.ich-will- lernen.de funktioniert leider nicht ohne Flash. 23www.netz-barrierefrei.de
  • 18. Die Systemwahl • Wordpress, Drupa, Contao und Joomla sind von Haus aus sehr gut zugänglich. • Sie nehmen einem viel Arbeit ab. • Und sie erleichtern die Veröffentlichung barrierefreier Inhalte. 25www.netz-barrierefrei.de
  • 19. Frameworks • Auch Frameworks wie Jquery oder Bootstrap haben Barrierefreiheit integriert. • Das Rad muss also nicht neu erfunden werden. • Schaut in der Doku zum Framework, ob es Infos zur Barrierefreiheit gibt. 26www.netz-barrierefrei.de
  • 21. Texte semantisch auszeichnen • Texte müssen in HTML als Überschrift, Liste oder Zitat ausgezeichnet werden. Der Blinde erfährt ansonsten nicht, was die Aufgabe eines Textabschnitts ist. • Es reicht nicht, einen Text zu fetten oder einzurücken. Das bekommt der Blinde nicht mit. 28 Überschrif t Bildunterschrif t TextListe Quelle: Wikipedia-Artikel zu Barrierefreiheit www.netz-barrierefrei.de
  • 22. Text-Verständlichkeit • Verwenden Sie eine möglichst verständliche Sprache. • Strukturieren Sie den Text. Stellen Sie wichtige Infos an den Anfang. • Fassen Sie wichtige Infos noch einmal zusammen. 29www.netz-barrierefrei.de
  • 23. Alternativtext • Der Alternativtext ist eine Beschreibung des Bildes. Er wird Blinden vom Screenreader vorgelesen. • Alterantivtexte sollten kurz gehalten werden (80 Zeichen max.). • Der Inhalt des Bildes wird kurz beschrieben. 30 Älteres Modell einer Schreibmaschine für Blindenschrift www.netz-barrierefrei.de
  • 24. Untertitel  Für gehörlose und schwerhörige Menschen sollte in Videos Untertitel untergebracht werden.  In Untertiteln wird das Gesprochene verschriftlicht, außerdem werden wichtige Geräusche vermittelt, die zum Verständnis des Clips wichtig sind.  Es gibt offene und geschlossene Untertitel (closed captions). Closed Captions können ein- bzw. ausgeblendet werden und sind deshalb vorzuziehen. 31 31 Quelle: Youtube Video – Das erste Mal von Aktion Mensch www.netz-barrierefrei.de