WCAG für WebDevs

REGIONALES RECHENZENTRUM
ERLANGEN [RRZE]
WCAG für WebDevs
22. März 2018

EU 2016/2102
RICHTLINIE (EU) 2016/2102 DES EUROPÄISCHEN
PARLAMENTS UND DES RATES vom 26. Oktober 2016
über den barrierefreien Zugang zu den Websites und
mobilen Anwendungen öffentlicher Stellen

4
 Zweck
 EU-weite Harmonisierung der verschiedenen Anforderungen zur
Barrierefreiheit
 Einführung von effektiven Maßnahmen zur Durchsetzung
 Stärkung der Rechte von Betroffenen
 Reaktion auf bisher folgenlose Gesetze und Verordnungen
 Gilt für
 Websites und mobile Anwendungen öffentlicher Stellen
 Nicht nur Technik: Gilt auch für Dokumente (z.B. PDF-Dokumente)
EU 2016/2102
22.03.2018 | WCAG für WebDevs | Wolfgang Wiese

5
 Pflichten:
 Alle Webangebote sollen die WCAG 2.0 (Konformitätsstufe AA)
erreichen
› Inkl. alle Dateiformate von Büroanwendungen (u.a. PDFs)
› Inkl. Inhalte von Intranets und Extranets
 Mobile Webanwendungen (Apps) sind ebenfalls barrierefrei zu
gestalten
 Jeder Webauftritt muss den Status der Umsetzung der
Barrierefreiheit öffentlich erklären.
EU 2016/2102

6
 Fristen:
 Alle neuen Dateiformate (PDF, u.a.) aus Büroanwendungen müssen ab
dem 23.09.2018 barrierefrei sein. Ältere Dateien müssen bis dahin
ebenfalls barrierefrei sein, wenn sie für für aktive Verwaltungsverfahren
benötigt werden. (Z.B. Prüfungsordnungen!).
 Webseiten, die ab dem 23.09.2018 veröffentlicht wurden, müssen bis zum
23.12.2018 auf Stufe AA konform zu WCAG 2.0 sein; Ältere Webseiten
erst zum 23.09.2020.
 Intranets/Extranets müssen bis zum 23.09.2019 barrierefrei sein.
 Mobile Anwendungen müssen bis zum 23.06.2021 barrierefrei sein.
EU 2016/2102

7
 Erklärung zur Barrierefreiheit muss enthalten:
› Erläuterung zu Teilen des Inhalts, die nicht barrierefrei zugänglich sind
mit Angabe der Gründe hierfür; Die Erläuterung muss angeben, welche
konkreten Anforderungen der WCAG nicht erfüllt wurden. Es müssen
zugängliche Alternativen aufgeführt werden.
› Beschreibung und Verlinkung eines „Feedback-Mechanismus“ für
Betroffene mit der diese Mängel melden können und die nicht
zugänglichen Inhalte anfordern können.
› Ein Link zum Durchsetzungsverfahren (z.B. Schiedsstelle BGG) des
Landes bzw. Bund für den Fall, dass dem Betroffenen nicht geholfen
werden konnte.
EU 2016/2102

8
 Ausnahmen
 Live-Übertragungen benötigen keine Untertitel
 Karten und Kartendienste benötigen keine Textalternativen
 Inhalte von Dritten, die nicht der Kontrolle des Anbieters unterliegen
 Bestimmte Reproduktionen von Kulturerbestücken
EU 2016/2102

9
 Ausnahmen
 Bei einer „unverhältnismäßigen Belastung“. Diese muss berechtigte
Gründe nachweisen.
Zum Beispiel: „übermäßige organisatorische oder finanzielle Last“
 Aber:
› Fehlende Kenntnisse, fehlende Zeit oder geringe Prioritäten werden
nicht als berechtigte Gründe anerkannt.
› Öffentlicher Offenbarungseid notwendig!
Nichtentwicklung eines barrierefreien Zugangs muss ausführlich
begründet, sowie öffentlich und barrierefrei dokumentiert werden.
EU 2016/2102

10
 Zusätzliche Maßnahmen
 Die Mitgliedstaaten überwachen periodisch, inwieweit Websites und mobile
Anwendungen öffentlicher Stellen den Barrierefreiheitsanforderungen
gemäß Artikel 4 genügen, und wenden dabei die in Absatz 2 dieses
Artikels vorgesehene Überwachungsmethode an.
EU 2016/2102

11
 Bayern / StMBW:
 IT-Controlling zur Barrierefreiheit von Webauftritten wurde erweitert
› Berichtspflicht für alle Hochschulen
› Jährliche Statusberichte der HS – (für 2017 am 20. März abgegeben)
 Länder muss an den Bund melden.
 Bund:
› hat Schlichtungsstelle BGG einberufen
› koordiniert
› meldet an die EU Kommission
EU 2016/2102

PRAXIS FÜR WEBDEVS
Links und Hands on

13
 Schnelle “Sichtprüfungen“ einer Seite:
 Maus weg!
› Erreiche ich jede Seite? Jede Ebene der Navigation? Sehe ich das aktive Element
deutlich und genauso wie wenn ich mit der Maus drüber fahre?
 Seite mit dem Handy aufrufen!
› Jeder Inhalt und jede Aktion muss auch mit dem Handy ausführbar sein!
› Es muss aber nicht genauso aussehen! (Ganz im Gegenteil).
 Seite vergrößern auf 200%
› Alles nutzbar und erkennbar? Nichts überlagert?
Praxis für Webdevs

14
 Schnelle “Sichtprüfungen“ einer Seite:
 Enthält die Seite Bilder?
› Wenn ja: Sind diese Bilder informativ und wenn ja, sind die Inhalte dann auch textuell
vorhanden? Sind die alt=““ – Attribute mit einem sinnvollen Inhalt versehen?
› Falls es nur Schmuckbilder sind: Sind die alt=““ – Attribute leer?
 Enthält die Seite sich bewegenden oder wechselnden Content?
› Kann ich es stoppen?
› Duddelt ein Video ungefragt los?
 Enthält die Seite eine Table?
› Für tabellarische Daten oder für Gestaltung?
Praxis für Webdevs

15
 WCAG 2.0
 4 Prinzipien:
› Wahrnehmbarkeit: Informationen und Bestandteile der Benutzerschnittstelle müssen den
Benutzern so präsentiert werden, dass diese sie wahrnehmen können.
› Bedienbarkeit: Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar
sein.
› Verständlichkeit: Informationen und Bedienung der Benutzerschnittstelle müssen
verständlich sein.
› Robustheit: Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen
Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden
können.
https://www.w3.org/Translations/WCAG20-de/
Praxis für Webdevs
22.03.2018 | WCAG für WebDevs | Wolfgang Wiese

16
 WCAG 2.0: 12 Richtlinien innerhalb der 4 Prinzipien
Praxis für Webdevs
Wahrnehmbarkeit Bedienbarkeit Verständlichkeit Robustheit
1.1 Textalternativen 2.1. Per Tastatur
zugänglich
3.1. Textinhalte
lesbar und
verständlich
Kompatibilität
1.2 Zeitbasierte
Medien
2.2. Ausreichend Zeit 3.2. Vorhersagbare
Struktur und
Funktion
1.3. Anpassbarkeit 2.3. Keine „Anfälle“
provozieren
3.3. Hilfestellung bei
Benutzereingaben
1.4. Unterscheidbar 2.4. Navigierbarkeit

17
 Erfolgskriterien
 61 Erfolgskriterien innerhalb der Richtlinien
 Diese bieten konkrete Handlungsanweisungen zur Umsetzung
 Sind in 3 aufeinander aufbauenden Konformitätsstufen geordnet:
› A (25 Erfolgskriterien)
› AA (13 Erfolgskriterien)
› AAA (23 Erfolgskriterien)
Praxis für Webdevs

18
 WCAG 2.0
 Erfolgskriterien, Hintergründe und Beispiel-Lösungen
› Schnellreferenz: https://www.w3.org/WAI/WCAG20/quickref/
› Techniken: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-
20161007/Overview.html
 Beispiele:
› Quicklinks: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-
20161007/G1.html
› Links in neuen Fenstern: https://www.w3.org/TR/WCAG-
TECHS/H83.html
Praxis für Webdevs

19
 Weitere Hilfe in Form von Dokumentation und Anleitungen
 Hellbusch: https://www.barrierefreies-webdesign.de/
 Schnelle A11y Beispiele und How-tos mit Code:
› https://a11yproject.com/
› https://bitsofco.de/the-accessibility-cheatsheet/
 Online-Tools zur Prüfung
› http://code.viget.com/interactive-wcag/
› http://pauljadam.com/wcag20checklist.html
› https://www.w3.org/WAI/WCAG20/quickref
Praxis für Webdevs

20
 Browser-Tools
 WCAG - Liste in jeweiligen Techniken:
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-
20161007/Overview.html
 Webworking-Blog:
https://blogs.fau.de/webworking/2018/03/08/browser-addons-zum-
entwickeln-und-tests/
 Hands on
Praxis für Webdevs

21
 WAI-ARIA
https://www.w3.org/TR/wai-aria-1.1/
 Ergänzt HTML um semantische Hinweise zur Verbesserung der
A11y
 Beispiele:
› Einem Bereich eine Bedeutung geben: <div role=“presentation“>..
› Bereich für Screenreader verbergen: <div aria-hidden=“true“>..
› Aber z.B. nicht: <nav role=“navigation“> ..
 Nur dann verwenden, wenn HTML nicht ausreicht!
Praxis für Webdevs

WCAG für WebDevs

Weitere ähnliche Inhalte

Ähnlich wie WCAG für WebDevs (20)

Mehr von Wolfgang Wiese (13)

WCAG für WebDevs