Vortragsfolien Webmaster Campustreffen 23. Mai 2019 / Leitfaden zur Barrierefreiheit

Am 23. Mai 2019 fand ein Webmaster-Campustreffen statt.
Die Vorträge  wurden überwiegend „Hands-on“ und frei gehalten. Daher sind nur zu zweiten Teil Vortragsfolien vorhanden:

Vortragsfolien Webmaster Campustreffen 23. Mai 2019

Die Veranstaltung wurde jedoch aufgezeichnet. Die Aufzeichnung mit dem Vortrag über das neue FAU Events Theme wird ab Montag, den 27. Mai auf dem Videoportal verfügbar werden und dann auch in diesem Blogbeitrag ergänzt.

 

Inhaltliche Ergänzungen zum Campustreffen

Rechtliche und Organisatorische Hintergründe zur EU-Richtlinie 2016/2102:

Über die Hintergründe wurden bereits zu anderen Gelegenheiten Vorträge und Informationsveranstaltungen gehalten.  Folgende aktuelle Vortragsfolien können dazu bereitgestellt werden:

 

Leitfaden zur Barrierefreiheit

Der Leitfaden zur  digitalen Barrierefreiheit ist unter folgenden Adressen verfügbar:

 

Anstehendes Update der FAU Themes

Ab Dienstag, den 20. März wird eine neue Versionen des FAU Themes auf den CMS Servern eingespielt.

Seit Anfang März wurde eine neue Version des FAU-Themes getestet. Aus der Testphase ergaben sich keine negativen Rückmeldungen. Während der Testphase vom 2. bis zum 16. März kam es nur zu einer Meldung hinsichtlich weiterer Verbesserungswünsche; und die  interne Überschriftenhierarchie der Seitentemplates wurden nochmal aufgrund von WCAG-Testergebnissen verbessert.

Es sind keine wesentlichen Änderungen an der Optik vorgenommen wurden.
Optisch kam es lediglich zu zwei sichtbaren Änderungen:

  1. Bei der Startseite zeigt der Bildslider (Werbebilder unten) nun keinen Schatten mehr an.
  2. Auf Bitte der Webredaktion der ZUV wurde die Überschrift h3 um 1 pt von 18 auf 19 Pt erhöht um den Abstand zur h4-Überschrift besser erkennbar zu machen.

Die Änderungen betreffen maßgeblich das Backend, welches man als Außenstehender nicht sehen kann: Die gesamte Theme Options Seite wurde entfernt und alle Optionen des Themes wurden in den Customizer verlagert. Einige der Optionen wurden nochmal überdacht und verbessert.
Die Codestruktur  und Organisation der Bestandteile des Themes wurde ebenfalls verbessert – mit dem Ziel, die zukünftige Entwicklung des Themes in andere Hände legen zu können. 

Dies ist nur im Backend als Admin sichtbar aber eine Grundvoraussetzung um für das in diesem Sommer
kommende WordPress 5.0 vorbereitet zu sein.
Auf der Entwicklerseite wurden diesbezüglich im Februar Artikel mit Details veröffentlicht:

Weitere Änderungen betrafen die semantische Gliederung des Dokuments hinsichtlich der Überschriftenhierachie, sowie die deutlichere Kennzeichnung der Suche dahingehend, dass

  • nur der jeweils aktuelle Webauftritt durchsucht wird und nicht andere FAU-Webauftritte mit
  • der Filter für „Medien“ durch „Dokumente und Bilder“ ersetzt wurde.

Diese Änderungen ergaben sich aus einem WCAG-Test, bei dem diese Punkte als Nachteil für die Bedienbarkeit thematisiert wurden.

Da der Testlauf keine weiteren Probleme aufzeigte werden wir die Version daher ab kommenden Dienstag ausrollen. Zunächst werden am Dienstag nur die Einrichtungsthemes aktualisiert. Wenn bis zum Mittwoch keine unerwarteten Probleme auftauchen folgen dann die Themes der Fakultäten.

 

Browser-Addons zum Entwickeln und Testen

Bei dem Entwickeln und Testen von Websites können verschiedene Browser-Addons eine Hilfe sein.

Nachdem viele Jahre lang der Firefox Browser eine eher schlechte Unterstützung hatte, sind viele Entwickler auf den Chrome Browser umgestiegen. Dies unter anderem auch wegen der im Vergleich zu Firefox besseren Unterstützung mit Hilfe von nativen Entwickler-Tools, aber auch wegen dessen besseren Unterstützung von Webstandards. (vgl. CanIuse.com). Mit dem neuen Firefox Quantum kann sich diese Situation wieder ändern, aber aktuell ist bei Webentwicklern der Chrome-Browser nach wie vor der am häufigsten verwendete Browser.
Unabhängig davon muss jeder Entwickler dennoch weitere Browser auf seinen Arbeitsplatzgeräten oder virtuellen Umgebungen haben. Neue Webauftritte sollten im Idealfall stets mit mindestens 3 verschiedenen Browsern auf mindestens 2 verschiedenen Betriebssystemen getestet werden.

Die folgende Liste der AddOns basiert auf dem aktuellen Chrome-Browser. Ähnliche oder auch dieselben AddOns gibt es jedoch auch auf anderen Browsern.

AddOn-Liste

CertViewer Anzeige von Informationen zu dem SSL-Zertifikat einer Website. Download
ColorA11y Dieses AddOn prüft ob bei einer Website die verwendeten Farben für Texte und Hintergründe den WCAG 2.0 Anforderungen genüge tun. Download
ColorZilla Dieses AddOn erlaubt das „Entnehmen“ von Farbwerten aus einer aktuellen Website („Color Picker“) und bietet andere hilfreiche Informationen zur Farbauswahl an. Download
Full Page Screenshot Für Protokoll- und Testzwecke oder der Diskussion von Bestandteilen einer Website ist ein Screencapture-Werkzeug unumgänglich.
Dieses Addon erlaubt das Erstellen von Screenshots einer ganzen Seite als auch dem gezielten Selektieren von Ausschnitten. Die jeweiligen Bilder können als Datei gespeichert werden.
Download
headingsMap Anzeige der Überschriftenhierarchie einer Webseite. Diese Anzeige ist besonders wichtig um zu erkennen, ob die Navigation innerhalb einer Seite plausibel und logisch strukturiert ist. Auch dies wird zur Einhaltung der WCAG-Bedingungen erfordert. Download
IP-Domain-Markierungsfahne Dieses einfache Plugin ermittelt auf Basis bekannter IP-Adressebereiche die für die aktuell aufgerufene Domain jeweils wahrscheinlich passende Länderfahne. Download
Semantic Inspector Moderne Websites geben über die HTML-Semantik hinaus mit Hilfe von strukturierten Elementen (vgl. auch schema.org) Aussagen darüber, aus welcher Art von Inhalten eine Seite und deren Bestandteile besteht. Insbesondere Suchmaschinen und UserAgents nutzen diese Formate um Informationen aus Webseiten auszulesen und entsprechend weiterzuverabeiten. Der Semantic Inspector macht diese Inhalte sichtbar und bietet damit gleichzeitig ein Testtool an, ob die selbst eingestellten strukturierten Elemente korrekt waren. Download
WAVE Evaluation Tool Dieses Tool ermöglicht einen automatisierten WCAG-Test der gerade besuchten Website. Die Ergebnisse sind hinreichend nutzbar für Tests und Entwicklung. Zu beachten ist jedoch, daß dieses Testtool, wie auch andere WCAG-Testtools auch viele „False Positives“ meldet – also Dinge als Fehler markiert, die bei einer genaueren Prüfung sich doch als korrekt erweisen. Download
Web Developer Dieses AddOn ergänzt die Toolbar um ein Button mit hilfreichen Informationen zur Website. So beispielsweise die semantische und topographische Gestaltung der Webseite. Auch werden weitere Links angeboten, mit denen man die W3C-Validation oder andere Werkzeuge bequem aufrufen kann. Download

Unabhängig von den AddOns wird der größte Teil der Entwicklung mit Hilfe des im Browser eingebauten Entwicklungswerkzeugs geleistet.
Die AddOns ergänzen dessen Funktionen nur oder machen spezielle Funktionen etwas bequemer zugänglich.

Üblicherweise sind weitere AddOns vorhanden, wie beispielsweise das uBlock Origin AddOn, welches effektiv Werbung unsichtbar macht bzw. das Laden dieser unterdrückt oder Ghostery, der (in Kombination mit uBlock Origin) ebenfalls ein gutes und datenschutzorientes AddOn zur digitalen Selbstverteidigung gegen Tracking und durch Werbung eingeschleuste Schadsoftware ist.

Schritte zur Umsetzung der EU-Richtlinie 2016/2102 zur Barrierefreiheit

Webauftritte der öffentlichen Stellen sind bereits seit vielen Jahren zur Einhaltung der Barrierefreiheit verpflichtet.
In Bayern gilt bereits seit dem 9. Juli 2003 das Bayerischen Behindertengleichstellungsgesetzes (BayBGG). In anderen Ländern und im Bund wurden vergleichbare Gesetze erlassen. Das Webteam des RRZE hat darüber bereits mehrfach in Veranstaltungen berichtet; Bei zentralen Vorlagen und Webdesigns wurde sich auch an diese Regeln orientiert.
Gleichwohl wurden die Gesetze in den vergangenen Jahren nicht überall entsprechend berücksichtigt und umgesetzt.Die EU-Richtlinie 2016/2102 zur Barrierefreiheit wurde erlassen, um diesen Umstand Rechnung zu tragen und eine effektive Durchsetzung der gesetzlichen Verpflichtung zu erreichen.

Die Richtlinie sieht vor, dass die Mitgliedsstaaten die Einhaltung der Anforderungen überprüfen und der EU-Kommission Bericht erstatten. Das Ministerium für Wissenschaft und Kultus hat in dieser Folge die Hochschulen des Landes aufgefordert, bis zum 20. März einen Bericht abzuliefern zum Stand der Umsetzung der Barrierefreiheit auf ihren Webangeboten, mobilen Anwendungen und Dokumenten.
(Siehe hierzu auch meinen Vortrag beim letzten Webmaster-Campustreffen am 1.2.).

Weiterhin werden in der Richtlinie einige Fristen aufgeführt:

  • 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.

Organisatorische Maßnahmen an der FAU

Das CIO-Gremium hat daher am 12. Februar entschieden, dass wir die zentrale Website www.fau.de und die zentralen Webauftritte der Fakultäten durch eine externe, neutrale Expertin prüfen lassen.
Die Prüfung beginnt Ende der 7. Kalenderwoche und dauert etwa zwei Wochen an.

Nach aktuellen Stand ist zu befürchten, dass die gesetzlichen Anforderungen zur Barrierefreiheit gemäß der „WCAG 2.0 AA“ nicht erfüllen werden.
Ursache sind dafür im Wesentlichen nicht barrierefreie „Dokumente aus Büroanwendungen (konkret: PDF-Dokumente), die von den Autoren und Redakteuren hochgeladen wurden.

Technische Probleme an den FAU Themes werden sicherlich auch vorhanden sein.
Diese werden wir jedoch zentral lösen können.

Ausgehend von den Ergebnissen der Prüfung werden das CIO-Gremium und weitere Beauftragte (Schwerbehindertenvertretung u.a.) der FAU Maßnahmen erörtern, wie weiter vorzugehen ist um diesen Zustand zu bessern und baldmöglichst die gesetzlichen Vorgaben zu erfüllen.

Sehr wahrscheinlich werden wir im April oder Mai einen Workshop für alle wichtigen Redaktionen organisieren und einen oder mehrere neue Leitfäden in der Sache bereitstellen.
Bis dahin kann auch das bereits umfangreiche Informationsangebot zum Thema Barrierefreiheit auf unseren Blog und im Videoportal der FAU verwendet werden.

Handreichung

Ganz allgemein können Sie folgende Erstellungsprinzipien für Dokumente und Webseiten beachten:

  • Wenn Sie einen Text veröffentlichen wollen und die Wahl haben zwischen normaler Webseite und PDF, verwenden Sie die Webseite. Vergeuden Sie keine Arbeitszeit darin, ein PDF zu erstellen, wenn Sie denselben Text ohnehin als Webseite speichern können. (Eine PDF-Datei bietet keinerlei Schutz gegen „Diebstahl“).
  • Verwenden Sie generell die Formatvorlagen für Überschriften und Absätze, die von Office bereit gestellt werden
  • Wenn Sie Bilder verwenden, erklären und beschreiben Sie diese auch im Text
  • Verwenden Sie eine sinnvolle Überschriftenhierarchie; Überschriften sollten kurz und prägnant sein und für sich allein erklärend sein.
  • Wenn Sie Links setzen, verwenden Sie aussagekräftige Linktexte, die auch für sich allein gestellt klar machen können, wo es hin geht.
  • Verwenden Sie Tabellen nur für Daten; Aber niemals um Texte einzurücken oder optisch zu gliedern.
  • Wenn Sie einen Text in Office erstellen und dabei einen anderen Text als Vorlage genommen haben, achten Sie beim Speichern darauf, den Dokumententitel und die Autoren zu ändern.

Weiterführende Informationen und Anleitungen

Spamschutz bei WordPress-Formularen ohne reCAPTCHA

Häufig werden Formulare im Web dafür missbraucht, automatisiert Spam-Nachrichten zu verbreiten. Eine Möglichkeit, dies zu verhindern, ist die Verwendung eines zusätzlichen Captcha-Feldes, in dem z.B. ein verzerrter Text von einem Bild gelesen und eingegeben oder eine Aufgabe gelöst werden muss, was für Computer nur schwer automatisiert möglich ist.

Das Formular-Plugin Contact Form 7, dass unter WordPress zur Gestaltung von Formularen zur Verfügung steht, bietet neuerdings die Möglichkeit, hierfür den von Google zur Verfügung gestellten Dienst reCAPTCHA zu verwenden. Aus Datenschutzgründen müssen wir dringend davon abraten, diesen Dienst zu nutzen, da hierbei z.B. das Userverhalten und Rechnerinformationen an Google übermittelt und analysiert werden um festzustellen, ob ein Mensch oder eine Maschine das Formular ausfüllt.

Eine Alternative dazu bietet folgende einfache Abfrage, die man in seinem Contact Form 7-Formular ergänzen kann:

[quiz random-math-quiz "Spamschutz: Wieviel ist eins plus zwei? (Bitte Zahl eingeben)|3"
"Spamschutz: Wieviel ist drei minus zwei? (Bitte Zahl eingeben)|1"

"Spamschutz: Wieviel ist fünf minus zwei? (Bitte Zahl eingeben)|3"
"Spamschutz: Wieviel ist zehn minus zwei? (Bitte Zahl eingeben)|8"
"Spamschutz: Wieviel ist elf minus zwei? (Bitte Zahl eingeben)|9"
"Spamschutz: Wieviel ist zehn minus fünf? (Bitte Zahl eingeben)|5"
"Spamschutz: Wieviel ist drei minus zwei? (Bitte Zahl eingeben)|1"
"Spamschutz: Wieviel ist zehn plus eins? (Bitte Zahl eingeben)|11"]

Da es sich hierbei nicht um verzerrte Bilder, sondern um einfache Rechenaufgaben handelt, die von einem Screenreader problemlos vorgelesen werden können, ist auch die Barrierefreiheit größenteils gewährleistet.