WCAG 2.0 umsetzen, testen und evaluieren Seminar BS 162 Barrierefreie Informationssysteme - Grundlagen

Gerhard Nussbaum Wien, März 2015 gerhard.nussbaum@ki-i.at

Richtlinien …

Quelle: www.mfh.de

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 2 |

Die Komponenten von barrierefreiem Web

Authoring Tool

Evaluierungs Tool

Webdesigner, Autor

Webbrowser, MediaplayerAssistierende Technologien

Benutzer

Webinhalt

ATAG WCAG UAAGAccessibility Richtlinien

HTML XHTML CSSSpezifikationen

etc.

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 3 |

WCAG 2.0

Seit 11.12.2008 W3C Recommendation 4 Prinzipien 12 Richtlinien mit insgesamt 61 Erfolgskriterien Erfolgskriterien sind in 3 Kategorien unterteilt (Level

A, AA, AAA) Mehrere Dokumente:

– WCAG 2.0 – Understanding 2.0 – Techniques 2.0 – Requirements 2.0

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 4 |

WCAG 2.0

Vier Prinzipien: 1. Inhalt muss wahrnehmbar („Perceivable”) sein. 2. Kontrollelemente des Inhalts müssen bedienbar

(„Operable“) sein 3. Inhalt und Kontrollelemente müssen verständlich

(„Understandable“) sein 4. Der Inhalt muss robust („Robust“) genug sein, um von

aktuellen und zukünftigen Technologien verarbeitbar zu sein

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 5 |

WCAG 2.0

Konformität: – „A“: alle Level A Kriterien – „AA“: „A“ und alle Level AA Kriterien – „AAA“: „AA“ und alle Level AAA Kriterien

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 6 |

WCAG 2.0

WCAG 2.0 Links: – Richtlinien (original): http://www.w3.org/TR/WCAG20/ – Richtlinien (deutsch):

http://www.w3.org/Translations/WCAG20-de/ – Quickreference (sehr empfehlenswert):

http://www.w3.org/WAI/WCAG20/quickref/

WAI: http://www.w3.org/WAI/

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 7 |

WCAG 2.0 auf einen Blick I

Wahrnehmbar – Textalternativen für Nicht-Text-Inhalte anbieten – Untertitel und andere Alternativen für Multimedia anbieten – Inhalte anbieten, die auf verschiedene Art und Weise

dargestellt werden können (auch mit assistierenden Technologien, ohne Informationsverlust)

– Es für den Benutzer einfacher machen, den Inhalt zu sehen und hören

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 8 |

WCAG 2.0 auf einen Blick II

Bedienbar – Alle Funktionen sind auch ausschließlich mit Tastatur

bedienbar – Benutzer bekommen genug Zeit, um den Inhalt zu lesen und

benutzen – Keine Inhalte benutzen, die Anfälle auslösen können – Dem Benutzer helfen, durch die Inhalte zu navigieren und

sie zu finden

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 9 |

WCAG 2.0 auf einen Blick III

Verständlich – Textinhalte lesbar und verständlich machen – Webseiten sollen vorhersehbar aussehen und funktionieren – Benutzern dabei helfen, Fehler zu vermeiden und zu

korrigieren.

Robust

– Die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten maximieren, einschließlich assistierender Technologien

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 10 |

EVALUIEREN

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 11 |

Tools – Browser-AddOns

Internet Explorer Web Accessibility Toolbar http://www.wat-c.org/tools/index.html

Mozilla Accessibility Toolbar http://www.firefox-browser.de/

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 12 |

IE Web Accessibility Toolbar

Quelle: Kerstin Matausch, Sonja Eichinger. Workshop Content barrierefrei publizieren.

HTML-Code testen

Best. Auflösung für das Browser-Fenster

wählen

Stylesheets deaktivieren

Liste aller Bilder mit Alternativtexte

einblenden

Farbkontraste überprüfen

Überschriften, Listen, Akronyme, Abkürzungen, Tabellenüberschriften

etc. überprüfen

Skalierbarkeit des Layouts testen

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 13 |

Mozilla Accessibility Toolbar

Überschriften, Listen, Links, Menüs, Image-Maps etc. überprüfen

Text- und Bild- Alternativen ansehen

Scripts, Mouse-Events etc. ausschalten

Seite ohne Stylesheets, Layout-Tabellen usw. ansehen

HTML-Code kontrollieren

Tastaturkürzel anzeigen

Quelle: Kerstin Matausch, Sonja Eichinger. Workshop Content barrierefrei publizieren.

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 14 |

Screenreader

Ein Screenreader ist ein Software-Produkt, welches Bedienelemente und Texte mittels Sprachsynthese akustisch zumeist über eine Soundkarte oder taktil über eine Braillezeile ausgibt. Screenreader werden beinahe ausschließlich mit Tastatur bedient.

Bekannte Produkte: Blindows, HAL, Jaws, Virgo, Window-Eyes, NVDA

Jaws-Testversion: http://www.freedomsci.de/serv01.htm

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 15 |

Text-Browser

Können nur einfachen Text und Textformate wie HTML oder XML interpretieren und darstellen. Sind besonders für Blinde nützlich, die das Internet barrierefrei nutzen wollen. Mit ihnen kann Text leicht in Sprache umgewandelt werden. Bedienung ausschließlich über Tastatur.

Bekannte Produkte: Lynx, Webformator, Elinks Webformator:

http://www.webformator.de/deutsch/index.php

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 16 |

Screenreader JAWS Bedienung

JAWS-Taste + F5 Formularmodus JAWS-Taste + F6 Überschriften JAWS-Taste + F7 Links JAWS-Taste + F8 Listen JAWS-Taste + F3 Alle Strukturmodi JAWS-Taste = Taste „EINFÜGEN“ (meist)

Tabulator: jeweils zum nächsten fokussierbaren Element (Link, Formularfeld/Button).

Pfeiltasten: links/rechts 1 Zeichen zurück / vorwärts rauf/runter 1 Zeile hinauf / hinunter

WebAim: Using JAWS to Evaluate Web Accessibility

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 17 |

Webformator Bedienung

F12 Deaktivieren / Aktivieren im aktuellen Browserfenster Tab Springt zum nächsten fokussierbaren

Element (Link, Formularfeld/Button)

Strg + H Zur nächsten Überschrift springen

Strg + L Öffnet die Liste aller Links

Strg + F Suche öffnen

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 18 |

W3C Validatoren

W3C Markup Validation Service http://validator.w3.org/ validiert den Code einer Webseite nach HTML, XHTML, SMIL, MathML, …

W3C CSS Validierungsservice

http://jigsaw.w3.org/css-validator/ validiert die Styleheets (CSS-Daten) / Formatangaben für die Webseiten nach CSS, SVG, …

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 19 |

Automatisierte Prüfung Farben / Kontraste

VisCheck http://www.vischeck.com Online-Werkzeug zur Simulation von Farbenblindheit. Simuliert Webseite oder Bilddatei.

Rohschnitt - Kontrasttest

http://www.rohschnitt.de/drag_queen.htm Online-Tool zum Ermitteln des Farbkontrastes zwischen Schrift und Hintergrund einer Website.

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 20 |

Automatisierte Testtools für WCAG 2.0

Derzeit gibt es leider keine verlässlichen Tools händisch Testen ist angesagt

Außerdem, falls man Testtools dennoch einsetzt:

Die Ergebnisse von automatischen Prüftools sind unvollständig und müssen korrekt interpretiert werden! Ein grünes Häkchen oder „Ja (erfüllt)“ impliziert NICHT automatisch die Erfüllung der Kriterien für Barrierefreiheit. Details und Hinweise sind relevant!

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 21 |

Referenzen/Quellen:

Caldwell, B., Cooper, M., Reid, L.G., Vanderheiden, G.: „Web Content Accessibility Guidelines 2.0“, W3C Recommondation 11 December 2008, WAI, W3C

Matausch, K., Eichinger, S.: Workshopunterlagen „Content barrierefrei publizieren.“

WCAG 2.0 umsetzen, testen und evaluieren - BS 162, 11.03.2015 22 |

Danke für Ihre Aufmerksamkeit!

23 |

Dipl.-Ing. Gerhard Nussbaum Kompetenznetzwerk KI-I Altenberger Straße 69 4040 Linz Tel: +43 732 2468 3770 Fax: +43 732 2468 3789 gerhard.nussbaum@ki-i.at www.ki-i.at