Wie gut schneiden WordPress-Websites eigentlich ab, wenn es um die Barrierefreiheit geht? Darum soll es in diesem Interview mit Nina Jameson von gehirngerecht.digital gehen. Dabei fokussieren wir auf praktische Probleme im Frontend, weniger auf die Bedienbarkeit im Backend.
Vielen Dank, dass Du Dich dazu bereit erklärt hast, meine Fragen zu beantworten, liebe Nina. Das Thema Barrierefreiheit wird nun endlich für alle relevant. Früher ließen sich viele Websitebetreiber nur zu passenden Maßnahmen überzeugen, wenn ich ihnen klarmachte, dass auch Suchmaschinen barrierefreie Inhalte besser verstehen. Welche Argumente haben Deiner Erfahrung nach am besten funktioniert, bevor anstand, dass das Thema verpflichtend wird?
Uns geht es dabei nicht anders. Selbst mit Gesetz im Schlepptau, lassen sich nicht alle überzeugen. Gerade bei Animationen oder Videos wollen viele keine Abstriche machen und keine Zeit in Untertitel und Audiodeskription investieren. Wir konzentrieren uns inzwischen auf Firmen, die Inklusion in ihren Werten verankert haben. Das Gesetz ist für mich das beste Beispiel, dass sich manche Themen nicht realisieren lassen, ohne dass der Gesetzgeber eingreift. Wir haben für uns entschieden, dass wir weniger Zeit dafür verwenden wollen, das Problem zu erklären, sondern lieber mit Kund*innen daran arbeiten, das Problem zu lösen. Das macht uns sehr viel mehr Spaß und wir können so wesentlich mehr Mehrwert erzeugen.
Wirklich barrierefrei gibt es ja eigentlich gar nicht. Korrekter wäre es, von barrierearm zu sprechen. Oder gleich wie im Englischen von Zugänglichkeit. Kannst Du kurz erklären, warum?
Barrierefrei würde für mich bedeuten, dass jede*r eine Software ohne Hindernisse nutzen und das Ziel innerhalb der Software erreichen kann. In einer philosophischen Debatte wäre barrierearm angebrachter. Wenn wir von Barrierefreiheit in Kombination mit Software sprechen, sollten wir aber den Begriff barrierearm nicht verwenden. Denn der ist unkonkret und nicht messbar. Eine Software ist immer barrierefrei nach einem Standard, etwa barrierefrei nach EN 301 549. Durch die Verwendung des Standards wissen alle Parteien, was sie von dem Endprodukt zu erwarten haben. Einen Standard kann man erfüllen oder nicht. Die EN 301 549 wird ab nächstem Jahr für viele Unternehmen rechtlich bindend und sollte das Minimum sein, an das sich alle halten. Wenn alles nach einem Standard barrierefrei ist, dann haben wir schon viel gewonnen. Natürlich sollte man dennoch stets im Kopf behalten, dass es immer Barrieren geben wird, User individuell sind und Barrierefreiheit daher ein ständiger Prozess.
Manche haben Angst, barrierefreies Design ginge auf Kosten der optischen Ästhetik. Stimmt das? Schließt das eine das andere wirklich aus? (gern mit Beispiellinks)
Ästhetik ist natürlich in vielerlei Hinsicht subjektiv. Eines unserer Höhepunkte ist sicherlich die Website Farben sind für alle da oder unsere eigene Website Gehirngerecht Digital. Die Website von Apple soll auch barrierefrei sein, es geht also definitiv ästhetisch und barrierefrei. Viele vergessen, dass ein Design weit mehr Aufgaben zu erfüllen hat als nur gut auszusehen, denn Websites sind in den seltensten Fällen ein Kunstwerk, sondern erfüllen eine Funktion wie Informationsvermittlung oder den Verkauf von Produkten. Ein Design sollte mir helfen, mich auf deiner Website zurechtzufinden. Wenn dein Design mich oder eine ganze Gruppe ausschließt, ist es in erster Linie ein schlechtes Design und sollte angepasst werden.
Das erste, woran man beim Thema Barrierefreiheit denkt, sind die Alternativtexte. Im Netz gibt es viele mehr oder weniger detaillierte Angaben dazu, wie man sie korrekt verfasst. Kannst Du uns die wichtigsten Regeln nennen und vielleicht eine ausführlichere Anleitung empfehlen? Und wann ist es sinnvoll, Alternativtexte komplett wegzulassen?
Die Herausforderung von Alt-Texten liegt sicherlich darin, dass es keine harten Kriterien für das Schreiben gibt. Um einen Alt-Text zu formulieren, fragen wir uns:
- Was will ich mit meinem Bild sagen? Welches Ziel verfolge ich mit dem Bild?
- Ist es informativ, funktional, komplex oder dekorativ? Die Antwort verrät uns, welcher Inhalt für den Alt-Text relevant ist.
- Informatives Bild:
- Ich weiß mehr, nachdem ich das Bild gesehen habe.
- Alt-Text: Was weiß ich, nachdem ich das Bild gesehen habe?
- Funktionales Bild:
- Ich soll etwas tun.
- Alt-Text: Was soll ich tun?
- Komplexes Bild:
- Ich weiß sehr viel mehr, nachdem ich das Bild gesehen habe und das ist nicht in 1 bis 2 Sätzen beschreibbar.
- Alt-Text: Was zeigt die Grafik? Detaillierte Erklärung im begleitenden Text oder verlinken.
- Dekoratives Bild
- Das Bild ist nichtssagend oder redundant. Ich verliere nichts, wenn ich es nicht sehe.
- Alt-Text: Keiner, leeres Alt-Attribut
- Informatives Bild:
- Wie kann ich den Alt-Text komprimieren? Wir wollen die Länge von 1 bis 2 Sätzen erreichen.
Für mehr Informationen kann ich dir unseren Blog empfehlen, dort habe ich einen Artikel zum Thema Alt-Texte mit Beispielen verfasst. Die wenigsten Bilder sind dekorativ. Ich mag den Begriff gar nicht, weil er Leute in die falsche Richtung führt. Dekorativ sollte eher redundant oder überflüssig heißen und das sind die wenigsten Bilder. Eine Trennlinie wird in den meisten Fällen für eine blinde Person nicht hilfreich sein. Das ist dann dekorativ. Grafiken, die auf das Branding einzahlen, sind nicht dekorativ und müssen beschrieben werden. Wenn wir grübeln müssen, ob etwas dekorativ ist oder nicht, ist die Antwort zu 99,9 % nein.
Meiner Erfahrung nach sind mit Block-Themes und dem Website-Editor gebaute WordPress-Websites schon ganz gut aufgestellt, was die barrierearme Ausgabe angeht. Allerdings achte ich darauf, so wenig Plugins wie möglich zu verwenden, nutze keine Pagebuilder und meistens Standardthemes. Wenn man dann noch auf das Ausfüllen der Alternativtexte achtet, kommt man meistens schon zu recht guten Ergebnissen. Wie ist da Deine Erfahrung?
Das habe ich auch gehört. WordPress hat eine sehr gute Basis, die meisten Barrieren werden durch Themes, Plug-Ins und den Inhalt eingeführt. Aber egal, mit welchem Tooling gearbeitet wird, man sollte im Vorfeld immer prüfen, ob das Theme oder Plug-in barrierefreie Inhalte nach EN 301 549 erstellen kann. Wenn ja, reicht es meistens aus, die Inhalte sauber einzustellen und auf Alt-Texte, Überschriftenstrukturen, Benennung von Links usw. zu achten.
Je nachdem, was für eine Website erstellt werden soll, eignen sich bestimmt einige Tools besser als andere. Wir haben vieles probiert und sind beim Bricks-Theme gelandet. Damit können wir individuelle, skalierbare Websites erstellen und rechtliche Konformität liefern.
Früher haben ja viele auf Pagebuilder wie Divi oder Elementor geschworen. Die werden nun dank der Blöcke immer weniger notwendig. In Agenturen oder von Entwicklern hingegen wird derzeit gern Bricks verwendet, was für den Normaluser etwas überdimensioniert ist. Ich selbst verwende nur WordPress Core und ergänze es höchstens bei Standardthemes durch Twentig. Was hat den größeren Einfluss auf die Barrierefreiheit: das Theme oder die Art, wie ich WordPress verwende? Hast Du dazu Empfehlungen?
Ich würde sagen, beides ist gleichermaßen wichtig. Wenn ich Tooling verwende, das keinen barrierefreien Output erzeugen kann, habe ich keine Chance eine barrierefreie Website zu erstellen. Wenn mein Theme das Potenzial einer barrierefreien Website hat, kann ich es aber immer noch selbst verbocken, weil ich Barrieren einbaue. Viele sind im ersten Moment überrascht, wie viel technisches Wissen digitale Barrierefreiheit voraussetzen kann. Was sich in den meisten Fällen auszahlt, ist beim Standard zu bleiben und keine exotischen Bausteine, Plug-ins oder Themes zu verwenden.
Manche Plugins, die man aber braucht, um rechtliche Vorgaben zu erfüllen, verursachen Beanstandungen in Sachen Barrierefreiheit. Zum Beispiel wird mir wegen Complianz gemeldet, dass Formularfelder nicht mit Labeln verknüpft und die Klickflächen zu klein seien. Wie kann man in solchen Fällen für Abhilfe sorgen? Gibt es vielleicht sogar sowas wie eine Liste empfohlener Plugins?
Das ist ein riesengroßes Problem und wir hoffen, dass die meisten Anbieter hier noch eine Schippe drauflegen. Darum ist es auch so wichtig im Voraus zu prüfen, ob das Plug-in meiner Wahl barrierefreien Output liefern kann. Ist das nicht der Fall, würden wir einen Wechsel nahelegen. Die Plug-ins, die Barrierefreiheit nach EN 301 549 bieten, schreiben das auf ihrer Website. Wir verwenden für Formulare gern Gravity Forms oder wsform.
Ein wiederkehrendes Problem, das bei meinen Checks auftaucht, ist das der „redundanten Links“. Das kommt zum Beispiel dann zustande, wenn man beim Block „Neueste Beiträge“ sowohl vom Vorschaubild als auch vom Titel auf den dazugehörigen Beitrag verlinken lässt. Der normale WordPress-User hat dann nur die Möglichkeit, eine der beiden Verlinkungen zu entfernen. Oder gibt es da eine andere Möglichkeit? Denn das Verlinken von Bild und Text ist doch eigentlich etwas, das für nichtbehinderte User zur Benutzerfreundlichkeit gehört.
Ich kenne leider keine Möglichkeit, das zu lösen, ohne tiefer einzusteigen. Du kannst mit CSS eine größere, klickbare Fläche erzeugen, die von einem einzelnen Link ausgeht. Tobias hat auf unserem Blog eine Anleitung für Barrierefreie Cards geschrieben. Mit Gutenberg haben wir das bisher nicht getestet, da dort aber auch CSS verwendet werden kann, sollte die Technik auch anwendbar sein.
Wie ist das mit dem Thema Farbkontrast? Inzwischen weist ja der Blockeditor selbst auf kritische Farbkombinationen hin. Kann man sich damit begnügen, oder sollte man einen externen Kontrast-Check hinzuziehen und wenn ja, welchen?
Wir testen in der Designphase alle relevanten Farbkombinationen und wissen dann, welche Farben wir miteinander ohne Bedenken auf der Website kombinieren können. Bei Grenzfällen, die genau auf 4,5:1 stehen, würde ich auch den Blogeditor kontrollieren, weil die Systeme Rundungsfehler machen und man hier einfach kein Risiko eingehen möchte. Ich benutze für einzelne Stichproben gerne den Colour Contrast Analyzer.
Wo wir gerade bei den Tools sind: Sind die Angaben zur Accessibility in den Pagespeed Insights ausreichend, oder sollte man besser noch andere Werkzeuge hinzuziehen, um die Barrierefreiheit seiner Seiten zu überprüfen? Welche Tools und welche Vorgehensweise empfiehlst Du?
Automatisierte Testtools finden aktuell nur ca. 30 % aller Fehler, die in Bezug auf Barrierefreiheit auftreten können. Wenn Tools wie Lighthouse, Wave oder Ähnliche die 100 % vollmachen, sagt das leider nur wenig über die Barrierefreiheit einer Website aus. Vieles muss, Stand heute, noch manuell geprüft werden. Zum Beispiel kann ein Tool prüfen, ob Du ein alt-Attribut verwendet hast. Ob der Alt-Text eine ausreichende Alternative darstellt oder ob Du die Alternative woanders zur Verfügung gestellt hast, kann nicht analysiert werden. Für das manuelle Testen von Websites bietet die BIK BITV eine Anleitung für das Testen einer Website. Die Anleitung ist sehr detailliert und bietet einen guten Einstieg.
Grafiken und Foto von Nina: gehirngerecht.digital
Schreibe einen Kommentar