In diesem Artikel gibt die Webdesignerin dieser Internetseite Ihnen einen Einblick, wie die Seite www.mosgito.de entstanden ist – mit der Anforderung, möglichst viele Kriterien einer barrierefreien Internetseite nach BITV zu berücksichtigen.
Lesen Sie also die Reise, wie Claudia Wollbrück alias die Online-Agentin sie beschreibt:
Barrierefreier Relaunch
Als Gisela mich fragte, ob ich mir vorstellen kann, Ihr eine neue barrierefreie Seite zu erstellen, dachte ich: Klar, das mache ich. Mein Anspruch war es in meiner Agentur immer, Seiten zu erstellen, die von Suchmaschinen gut ausgelesen werden können und die auch mobil gut funktionieren. Suchmaschinen sind Screenreader – da kann es ja nicht so schwer sein, eine barrierefreie Seite zu verwirklichen. Das mache ich ja im Prinzip jetzt schon irgendwie, dachte ich.
Falsch gedacht, denn es reicht leider nicht, ALT-Texte einzufügen und sich Gedanken um eine sinnvolle und nicht so tiefe Website-Struktur zu machen. Zu digitaler Barrierefreiheit gehört viel mehr, wie ich auf dieser langen Reise feststellen musste.
Wir fingen also im Sommer 2021 an, die Seite neu zu denken. Ein dreiviertel Jahr später sind wir fertig – die Seite ist online. Nicht 100% barrierefrei, wie wir es uns gewünscht hatten, aber dennoch so barrierefrei, wie es uns möglich war. Ich bin glücklich, diesen Weg gegangen zu sein, denn wir haben unglaublich viel gelernt und Gisela hat mich mit diesem Projekt für einen neuen Weg zu digitaler Barrierefreiheit gewonnen, den ich zukünftig beschreiten werde.
Designüberlegungen
Der Aufbau der Seite sollte klar und übersichtlich sein. Die Menütiefe nicht zu tief. Es sollte auf den ersten Blick klar werden, wo welche Info zu finden ist. Alle vertiefenden Informationen, die nicht direkt zu den Hauptmenüpunkten zählen, finden sich im Blogbereich „Einblicke“ wieder.
Mit den Kontrastanforderungen bei der Farbauswahl hatten wir uns recht schnell vertraut gemacht und auch die Anforderungen an Fotos waren uns bewusst. Um eine Abgrenzung und eine persönliche Note zu schaffen, haben wir eine Illustratorin ins Boot geholt, die die Hauptmotive illustriert hat. Das macht ähnlich wie bei einem Foto einen guten ALT-Text notwendig. Die Text-Bild-Illustration im Bereich Leistungen ist schwierig, da sie im Bild Texte integriert und damit möglicherweise für blinde oder sehbehinderte Menschen Informationen verloren gehen. Das kann man mit einem guten ALT-Text umgehen oder indem man das Bild für Screenreader unsichtbar macht. Bei der Schriftart setzten wir auf gute Lesbarkeit ohne Serifen und eine große Schriftgröße.
Technische Überlegungen
Ich dachte am Anfang, ich nutze ein barrierefreies WordPress-Template und ein Kontrast-Plugin und dann habe ich das Thema erledigt. Aber auch barrierefreie Templates haben ihre Tücken und müssen u.U. angepasst werden. WordPress selbst ist nicht 100% barrierefrei, wie sich bei unserem Test durch die Pfennigparade herausstellte. Aber dazu später mehr. Ich suchte also ein barrierefreies Template, das tastatursteuerbar ist und das sauber programmiert wurde. Beim Einpflegen der Inhalte achteten wir darauf, das Design auch in einer hohen Vergrößerung (mobile Ansicht) zu entwickeln und z.B. die Schriftgrößen so anzugeben, dass Sie skalierbar sind. Gisela wünschte sich eine Website, die für alle gleichermaßen zugänglich ist, ob sehbehinderte Menschen oder Rentner, die von assistiven Technologien noch nie etwas gehört haben. Daher installierte ich ein Barrierefreiheitsplugin, das die Kontraste erhöhen und die Schrift vergrößern konnte. Dieses Plugin hat neben dem Kalenderplugin die meisten Fehler in der BITV-Prüfung erzeugt und musste daher deinstalliert werden. Die Kontraste haben wir mit Kontrast-Tools geprüft und mittlerweile hoffentlich alle Kontraste so eingestellt, dass sie passen. Daher haben wir aktuell auf entsprechende Hilfsmittel verzichtet. Die Schriftvergrößerung haben wir dennoch umgesetzt – sie ist allerdings nun ins Menü gewandert, wo sie vom logischen Aufbau her auch am ehesten hingehört (vorher war sie in einer Art Sidebar an der rechten Seite). Eine Schwierigkeit, die wir auch nicht ganz lösen konnten, ist der Terminkalender. Es gibt für WordPress keine 100% barrierefreien Kalenderplugins. Bei der Recherche fand ich eines, das auf Nachfrage von sich behauptete: Ja, wir sind WCAG-konform. Leider wurde hier durch die Prüfung der Pfennigparade das Gegenteil bewiesen und wir sind auf einen anderen Kalender umgestiegen. Hier mussten wir eine schwere Entscheidung zwischen Design und Barrierefreiheit treffen, denn der „alte“ Kalender war toll designt und optisch ein echter Hingucker. Auch die Bedienung war intuitiver. Leider war er für assistive Technologien überhaupt nicht nutzbar. Der „neue“ Kalender ist zwar auch nicht 100% barrierefrei, aber er ist gut einstellbar und hat sehr aktive, offene Entwickler, die hoffentlich einige Anregungen umsetzen. Vielleicht schafft die Nachfrage und Aufmerksamkeit auf dieses Thema ja auch ein höheres Bewusstsein bei den Plugin-Entwicklern.
Abschreckend ist die Definition von Barrierefreiheit, wenn wir sie als das eine große Ziel betrachten. Einfacher wird es, wenn wir dieses Ziel in kleinere Einheiten zerlegen. Unser Angebot ist noch nicht für alle Menschen barrierefrei? Mit Sicherheit gibt es aber Personengruppen, für die wir bereits alle Barrieren aus dem Weg geschafft haben.
BITV-Test
Im Januar hatten wir die Seite soweit fertig gestellt, dass wir sie bei der Pfennigparade zur Prüfung anmelden konnten. Das Ergebnis war echt niederschmetternd. Wir hatten so viele „Fehler“, dass ich kurz dachte, wir schaffen das nicht. Auf den zweiten Blick stellte sich dann heraus, dass man die Prüfungsfehler in 4 Kategorien einteilen konnte: 40% Fehler durch das Plugin für Barrierefreiheit, 40% durch das Kalenderplugin, 10% die ich dazugelernt habe… und ca. 10% die an der Programmierung des Templates oder an WordPress lag. Mit der Deaktivierung von zwei Plugins hatten wir also 80% der Fehler abgestellt. Wunderbar. 😊
Nach dem Test haben wir die Ergebnisse mit der Pfennigparade und dann auch nochmal intern besprochen und entschieden, was uns wichtig ist und was wir vernachlässigen können/müssen. Uns fiel auch auf, dass Barrierefreiheit immer auch eine subjektive Komponente in sich birgt. Was der eine gut umgesetzt findet, findet der andere ungünstig. Was die eine bevorzugt, kann die andere vielleicht nicht nachvollziehen.
Einige Dinge lassen sich in WordPress nicht oder nur mit tiefgreifender Programmierung ändern. Andere Dinge mussten wir abwägen: Design vs. Barrierefreiheit. Die Pfennigparade hat uns aber auch bestätigt, dass es oftmals diese Abwägung braucht und dass es nach aktuellem Stand keine 100%ige digitale Barrierefreiheit gibt. Das ist einerseits ernüchternd und andererseits auch Ansporn, das Thema anzugehen und ein Bewusstsein dafür zu schaffen.
Mein Fazit der gemeinsamen Reise:
Ich bin sehr froh, dass wir diese schöne Seite zusammen umgesetzt haben, denn ich durfte sehr viel lernen auf dem Weg zur digitalen Barrierefreiheit. Heute frage ich mich, warum das Thema so lange gebraucht hat, auf meinem Radar zu erscheinen. Es ist einfach schade, dass dieses Informationstool, das wir so selbstverständlich nutzen, nicht für alle Menschen gleichermaßen zugänglich ist. Dabei ist es technisch gut umsetzbar, wenn man sich wirklich mit dem Thema auseinandersetzt.
Daraus ziehe ich mein Fazit und eine neue Motivation: Ich möchte anderen auf ihrem Weg in die digitale Barrierefreiheit helfen, damit das Internet für alle gleichermaßen zugänglich ist. Gisela hat mit ihrer Anfrage sozusagen die Tür geöffnet zu einem neuen Blickwinkel und einer neuen Aufgabe. Danke Dir!
