So findet ihr heraus, wie barrierefrei eure Website ist: Einfach selber testen.

1. WIE BARRIEREFREI IST MEINE
WEBSITE?
Ein Vortrag auf der Republica 2017
Domingos de Oliveira

2. Darum geht es
 warum ihr testen solltet
 Wie ihr testen könnt
 Was ihr testen solltet
2
www.netz-barrierefrei.de

3. Warum testen?
 Auch die erfahrenste Agentur
macht Fehler.
 Für einen Relaunch braucht ihr
eine Info dazu, wie ihr derzeit
steht.
 Bei Beschwerden von
Behinderten solltet ihr
kompetent helfen können. Das
könnt ihr nur, wenn ihr die
gemeldeten Probleme
überprüfen könnt.
3
www.netz-barrierefrei.de

4. Prüfmöglichkeiten
4
 Automatische Prüftools bieten eine 1-Klick-Prüfung an. Um die
Ergebnisse zu verstehen, braucht man das entsprechende Know How.
 Expertentests können von Barrierefreiheits-Experten durchgeführt
werden. Sie kosten in der Regel viel Geld.
 Betroffenen-Tests zeigen Probleme in der Praxis. Sie sind aufwendig
zu organisieren und zeigen vielleicht nicht alle Probleme auf.
 Manuelle Tests könnt ihr selbst durchführen. Über diese sprechen wir
jetzt.
www.netz-barrierefrei.de

5. Selber testen5
www.netz-barrierefrei.de

6. Verschiedene Test-Methoden
 Tests sollten immer systematisch
nach einer bestimmten Methodik
erfolgen.
 Gängig in Deutschland ist der
BITV-Test. Er bietet eine Schritt-
für-Schritt-Anleitung.
 Es gibt viele weitere Checklisten
teils auch für spezielle Bereiche
wie Anwendungen und
Formulare.
6
www.netz-barrierefrei.de

7. BITV-Test
 Ein gängiges Testverfahren in
Deutschland ist der BITV-Test.
 Er erklärt Schritt für Schritt, was,
wie und warum getestet wird.
 Er basiert auf der BITV 2.0 und
testet vor allem die
Anforderungen
Körperbehinderter. Geistig und
kognitiv Behinderte stehen nicht
im Mittelpunkt.
7
www.netz-barrierefrei.de

8. Was ihr testen solltet8
www.netz-barrierefrei.de

9. Tastaturbedienbarkeit
 Die Website sollte nur mit
Tastatur bedienbar sein.
 Blinde, Sehbehinderte und
motorisch behinderte
bewegen sich ausschließlich
mit der Tastatur durch die
Website.
9
www.netz-barrierefrei.de

10. So wird’s geprüft
 Mit Tab bewegt ihr euch durch
anklickbare Elemente.
 Mit der Leertaste aktiviert ihr
Checkboxen und Radio-Buttons.
 Mit Return aktiviert ihr Links
oder schickt Formulare ab.
 Achtet vor allem auf dynamische
Elemente wie ausklappende
Menüs, Formulare und andere
interaktive Elemente.
 Der Prüfschritt im BITV-Test.
10
www.netz-barrierefrei.de

11. So wird’s geprüft
 Um den Alternativtext zu
prüfen, ruft in der Web
Accessibility Toolbar unter
„Images“ „Show Images“ auf.
 Der Alternativtext wird neben
oder über dem Bild angezeigt.
 Der Prüfschritt im BITV-Test.
12
www.netz-barrierefrei.de

12. Formular-Elemente klar benannt
 Alle Bestandteile eines
Formulars brauchen ein Label.
Das ist eine für die
Hilfssoftware von Blinden
auslesbare Beschreibung.
 Über ARIA oder HTML5 lassen
sich Informationen
hinterlegen: Für Blinde ist z.B.
wichtig, ob es ein Pflichtfeld
oder eine valide Eingabe ist.
13
www.netz-barrierefrei.de

13. Labels: so wird es geprüft
 Klickt mit der Maus auf die
Beschriftung des Formular-
Elements.
 Der Cursor sollte in das
Eingabefeld des Formulars
springen.
 Der Prüfschritt im BITV-Test.
14
www.netz-barrierefrei.de

14. Seite strukturiert
 Einzelne Bereiche einer
Webseite sind über HTML-
Überschriften oder ARIA-
Orientierungspunkte
erreichbar. Dazu gehören Navi,
Inhaltsbereich, Footer…
15
www.netz-barrierefrei.de

15. So wird’s geprüft
 Wählt in der Web Accessibility
Toolbar unter „Structure“ den
Punkt „Heading Structure“. In
der Liste solltet ihr alle
wichtigen Bereiche der
Website sehen.
 Im gleichen Menü könnt ihr die
„Aria Landmark Roles“ prüfen.
 Der Prüfschritt im BITV-Test.
16
www.netz-barrierefrei.de

16. Fehlermanagement
 Macht eine falsche Eingabe in
euer Formular.
 Bei Fehleingaben gibt es klare
Hinweise auf die Fehlerstelle.
 Es wird eindeutig gezeigt, wie
der Fehler behoben werden
kann.
 Keine Hilfsmittel erforderlich.
17
www.netz-barrierefrei.de

17. Dynamik
 Alles Dynamische sollte mit
Tastatur und Screenreader
geprüft werden: Funktionieren
modale Dialoge? Lassen sie sich
per Tastatur schließen? Ist der
Screenreader jeweils auf der
richtigen Ebene?
 Den Screenreader habt ihr in
eurem Smartphone. Eine
Testanleitung findet ihr bei
YouTube.
18
www.netz-barrierefrei.de

18. Kontrast
 Der Kontrast-Analyser zeigt
euch, ob eure Inhalte
ausreichend Kontrast haben.
 Wichtig ist der Kontrast von
Fließtext, von Links und
anderen Bedienelementen.
19
www.netz-barrierefrei.de

19. So wird’s geprüft
 Ein Testtool ist der kostenlose
Colour Contrast Analyser.
 Die Farbwerte können selbst
eingegeben werden. Es kann
aber auch ein Color Picker
verwendet werden.
 BITV-Prüfung von Text-
Kontrast.
 BITV-Prüfschritt zu Kontrasten
von Grafiken.
20
www.netz-barrierefrei.de

20. Dann testet mal los!
Danke für Eure Aufmerksamkeit21
www.netz-barrierefrei.de