Sylvia Egger – sprungmarker.de brainbits.net

Was ist Barrierefreiheit?

Ein Kurztest

Sylvia Egger

  Frontendentwicklerin   10 Jahre Agenturerfahrung   7 Jahre Arbeit mit und für Barrierefreiheit   Blog zur Barrierefreiheit: sprungmarker.de   Spezialgebiet: Testen, Prüfen und Weiterentwicklung von Barrierefreiheit, Gesetzgebung (WCAG2, BITV)

Sylvia Egger – sprungmarker.de brainbits.net

Was ist 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: Barrierfreies Internet

Oder ganz einfach formuliert:

Einfach für alle, Seiten für alle

Sylvia Egger – sprungmarker.de brainbits.net

Sylvia Egger – sprungmarker.de brainbits.net

Was ist Barrierefreiheit?

Einfach mal ohne ...

Sylvia Egger – sprungmarker.de brainbits.net

Ohne Bilder? Alternativtext

  für Screenreader-Nutzer   für Nutzer von einfachen Textbrowsern wie Lynx   für langsame Verbindungen   wenn Grafiken nicht geladen werden

Sylvia Egger – sprungmarker.de brainbits.net

Ohne Bilder...

Ein kleines Rätsel

Welche Seite ist das? brainbits.net

Screenshot der Startseite von bild.de brainbits.net

Welche Seite ist das? brainbits.net

Screenshot der Startseite von stern.de brainbits.net

Welche Seite ist das? brainbits.net

Screenshot der Startseite von otto.de brainbits.net

Sylvia Egger – sprungmarker.de brainbits.net

Ohne Bilder? Alternativtext

Probleme   Alternativtext trifft nicht den Bildinhalt   Alternativtext lautet anders als Schriftgrafik   Alternativtext fehlt   Alternativtext doppelt die Überschrift (Bsp. Teaser)   Wichtige Elemente verschwinden (Bsp. Suchfeld)   Fehlendes Listensymbol macht Liste schwer erkennbar   Symbole/Icons tragen Bedeutung, verschwinden jedoch   Redundante Alternativtexte (Bsp. Bildergalerie)   Text liegt auf gleichfarbigem Hintergrund (Bsp. weiß auf weiß)   Zu lange Alternativtexte

Sylvia Egger – sprungmarker.de brainbits.net

Ohne Bilder? Alternativtext

Lösung   redaktionelle Pflege   immer den Kontext der Grafik mitberücksichtigen   Verlinkte Grafiken: immer das Linkziel mit angeben (Bsp. Teaser)   Doppelungen und Redundanzen vermeiden (Reduktion)   Auf Schriftgrafiken verzichten   Keine wichtige Information/Texte in den Hintergrund   Auf Farbkombination Vorder- /Hintergrundachten achten (Bsp: weiß auf weiß)

Sylvia Egger – sprungmarker.de brainbits.net

Was ist Barrierefreiheit?

Einfach mal mit ...

Sylvia Egger – sprungmarker.de brainbits.net

Screenreader...

Eine akustische Reise

Was ist ein Screenreader?

„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

Sylvia Egger – sprungmarker.de brainbits.net

Laptop mit Braillezeile (Quelle) brainbits.net

Braillezeile (Quelle) brainbits.net

Computerbraille im Einsatz mit Braillezeile im Büro (YouTube) brainbits.net

Welche Screenreader?

  JAWS (Windows)   NVDA (Windows, Open Source)   VoiceOver (Mac)   Window-Eyes (Windows) u.a.

Sylvia Egger – sprungmarker.de brainbits.net

Sylvia Egger – sprungmarker.de brainbits.net

Mit Screenreader

  Seiten werden für blinde und stark sehbehinderte Nutzer zugänglich   verschiedene Ausspielwege: Sprache, Blindenschrift (Braille)   arbeitet Inhalte linear ab   Gute Semantik macht einen wirklichen Unterschied Navigationsmöglichkeiten und klarere Inhalte

  Überschriften   Listen   Alternativtexte   Semantische Auszeichnungen wie fett, kursiv, Zitate, Abkürzungen Akronyme, Sprachwechsel

  Unterschiede in Interpretation und Unterstützung (Web 2.0, AJAX, HTML 5)

stern.de - gelesen mit Screenreader JAWS (Windows) brainbits.net

bild.de gelesen mit Screenreader NVDA (Windows) brainbits.net

Screencast otto.de gelesen mit VoiceOver (Mac)) brainbits.net

Sylvia Egger – sprungmarker.de brainbits.net

Was ist Barrierefreiheit?

Einfach mit ganz viel ...

Sylvia Egger – sprungmarker.de brainbits.net

Semantik

Sylvia Egger – sprungmarker.de brainbits.net

Semantik an Beispielen

Überschriften   Screenreader- und Tastaturnutzer arbeiten mit Überschriften   Versteckte Überschriften helfen beiden Nutzern

Listen   Screenreader-Nutzer arbeiten mit Listen   Semantisch bilden sie eine Einheit (Aufzählung, Navigationen)

Links   Screenreader-Nutzer werten Linklisten aus   Tastaturnutzer springen von Link zu Link   Sprungmarken sind wichtig

Screencast wdr.de mit JAWS: Überschriften und Listen brainbits.net

JAWS: Überschriftenliste (Quelle) brainbits.net

JAWS: Linkliste (Quelle) brainbits.net

wdr.de Liste der Überschriften mit HeadingsMap brainbits.net

wdr.de Liste der Überschriften mit HeadingsMap brainbits.net

  Hierarchiebruch

  Hier fehlt die H2

  Rechte Spalte nicht Unterpunkt des Artikels

  Links-Rubrik ohne Überschrift (strong!)

  Keine versteckte Navigation (unhandlich)

wdr.de Listenelemente (u.a. Navigationen) brainbits.net

  Topnavigation

  Servicenavigation

  Hauptnavigation

  Metanavigation

  Sonstige Listen

bild.de Liste der Überschriften mit HeadingsMap brainbits.net

stern.de Liste der Überschriften mit HeadingsMap brainbits.net

otto.de Liste der Überschriften mit HeadingsMap brainbits.net

Sylvia Egger – sprungmarker.de brainbits.net

Was ist Barrierefreiheit?

Einfach mehr ...

Vielen Dank fürs Zuhören!

Sylvia Egger

sprungmarker.de

Senior Webproducerin brainbits GmbH in Köln

brainbits.net

folgen Sie mir doch auf twitter: @sprungmarkers

Credits

Screencasts erstellt mit ScreenFlow Ablaufbilder mit Screensteps

Alle Bildquellen sind am jeweiligen Bild vermerkt

Diese Präsentation auf Slideshare: http://www.slideshare.net/sprungmarker

brainbits.net