Wem nützt eigentlich barrierefreies Webdesign und was bringt es Blinden, wenn ich gar keine Produkte habe, die Menschen mit Behinderungen brauchen? Ja, es bietet einen Vorteil für SEO. Aber hier stehen Aufwand und Nutzen nicht im Verhältnis und sind gegenüber anderen Maßnahmen auch nicht so förderlich. Die Gestaltung barrierefreier Inhalte erfordert nicht nur zusätzlichen redaktionellen Aufwand, sondern auch die korrekte Verwendung von Alt-Tags, um richtig im Google-Index platziert zu werden. Zudem wird die Einhaltung entsprechender Richtlinien in der EU gesetzlich vorgeschrieben. Allein daran sieht man ja schon, wie wenig beliebt und sinnvoll das ist. Sonst würde es ja jeder tun.
Dabei ist barrierefreies Webdesign so wichtig und relevant. Zeit für Aufklärung.
Wir haben alle Barrieren und sind alle betroffen
Barrierefreies Webdesign ist mehr als nur ein Anfang. Viele von uns sind mit Barrieren konfrontiert. Altersbedingte Einschränkungen, zunehmende Lichtempfindlichkeit und ein großes Problem bei nicht ausreichenden Kontrasten bei Speisekarten.
So kann man das initiale Setup beschreiben, das mich aktuell in die Situation gebracht hat, mich aktiv mit dem Thema zu beschäftigen. Und zu meiner großen Überraschung betrifft das nicht nur alte, sondern auch sehr junge Leute. Sie nutzen ihre Smartphones ganz anders. Auch die zunehmende Nutzung von mobilen Geräten stellt eine Herausforderung dar. Sehr dunkle Displays, die dann auch noch extrem viele Risse haben. Mir ist in meinem Leben noch kein Display kaputt gegangen.
Dazu haben sie auch schlechte Übertragungsraten und nicht die aktuellste Version der Geräte und Betriebssysteme. Hier sind gute Kontraste, schnelle Ladezeiten und gute Bedienbarkeit sehr wichtig. Ein einziger ‘weiter’-Link unter dem Element außerhalb des sichtbaren Bereichs ist einfach eine Katastrophe. Das Fehlen dieser Elemente kann die Nutzung für Personen mit ADHS erschweren. Spart einfach alle Slider. Die machen ja an allen Ecken nur Probleme.
Die Zielgruppe hier ist wirklich auch unter den Erwachsenen sehr groß. Hier kann man jetzt noch viel mehr aufführen. Kurz gesagt, jeder von uns hat Einschränkungen. Das macht jeden von uns auch so einzigartig. Barrierefreies Webdesign hilft allen Menschen und zahlt auf unsere Aussagen der Nachhaltigkeit und Diversität ein. In diesem Sinne ist Barrierefreiheit nicht nur eine Frage der Zugänglichkeit, sondern auch der Benutzerfreundlichkeit und der Chancengleichheit.
Barrierefreies HTML-Markup als Basis für deutlich bessere Webseiten
Erste Dinge, die mir aus einem technologischen Blickwinkel aufgefallen sind, waren die Themen HTML-Struktur und Area Labels, besonders im Hinblick auf Formulare. Eine solide HTML-Struktur ist die Grundlage für eine barrierefreie Website.
Formulare sind die Schnittstelle zwischen Nutzer:innen und Anbieter:innen, um Geld zu verdienen. Beides sind Themen, die mir persönlich nicht direkt helfen. Deshalb ist es schwerer für mich, den Mehraufwand in meiner täglichen Arbeit zu rechtfertigen, gerade weil es mir nicht sofort ins Auge springt.
Aber der Aufwand, sein HTML-Markup deutlich zu verbessern, ist nicht hoch. Als Daumenregel kann man sagen, dass Divs vermieden werden sollten. Gerade bei den Content Sections auf einer Startseite sollte man auf echte Sections setzen. Es stellt sich die Frage, warum man das nicht direkt getan hat. HTML-Sections können dann zusätzlich ausgezeichnet werden, zum Beispiel als Hero, FAQ, Contact, News, etc. Das kann von Screenreadern ausgelesen werden und trägt auch wesentlich zum Pageranking bei Google bei, auch wenn immer noch hochwertiger Content benötigt wird. In diesem Zusammenhang kann man sich auch sehr gut mit dem Thema Rich Snippets auseinandersetzen.
Google Lighthouse zeigt eine Zugänglichkeit von 80%, das scheint doch sehr gut zu sein, oder?
Für blinde Menschen sind jedoch weniger als 15% der Webseiten zugänglich. Das stellt für unser wichtigstes Medium und uns als Branchenprofis, besonders im Bereich E-Commerce, eine echte Chance dar.
Vor Jahren haben wir ein Meetup in Bonn mit dem blinden Accessibility Consultant Domingos de Oliveira organisiert. Wir haben einen Screenreader über Boxen für alle zugänglich gemacht und den Monitor auf den Beamer übertragen. Das war ein spektakulärer Tag. Es ist beeindruckend zu sehen, wie schnell und sicher Blinde sich bewegen können, sogar deutlich schneller als sehende Menschen. Domingos konnte auf Zalando keinen Schuh in seiner Größe in den Warenkorb legen, ein Problem, das wir als Community damals offiziell mit Lösung weitergegeben haben. Auch nach Jahren war keine Anpassung erfolgt.
Zusammengefasst sind die Zahlen und Farben bei Google Lighthouse falsch und verharmlosend. Auf meiner eigenen Webseite werden Image Captions von Screenreadern übrigens nicht lesbar. Der Fehler konnte bisher nicht gefunden werden, obwohl ich hier viel Aufwand in die alternativen Bildtexte gesteckt habe. Google Lighthouse zeigt den Fehler nicht an und bewertet die Seite sehr gut.
Der innere Accessibility Consultant und warum das eigene Webdesign damit einfach besser ist
Es geht nicht mehr nur um den besten Desktop-Monitor der Welt. Der Traffic ist längst auf dem Handy gelandet, und nur in Deutschland gibt es in den Browser-Statistiken noch den echten Desktop-PC im zweistelligen Prozentbereich. Die Welt ist bereits einen Schritt weiter. Barrieren stellen nicht nur fehlende Sehstärken dar, sondern auch die Geräte, mit denen die Nutzer:innen auf die Internetseite zugreifen. Wenn man hier automatisierte und funktionale Tests
einsetzt, wird einem sehr schnell klar, wie ungetestet das alles ist. Ja, es macht einfach keinen Spaß, sich die eigene Seite auf dem Handy anzuschauen. Und wir tun immer weniger, was uns keinen Spaß macht. Fleiß wird also wieder belohnt.
Das Thema barrierefreies Webdesign zwingt uns aus dieser Komfortzone heraus und ermöglicht es uns, viele neue Blickwinkel einzunehmen. Gerade das Thema Kontraste und Lesbarkeit übergeht schnell in die eigene Empfindung und Wahrnehmung. Kontraste können viele Fehler vermeiden, das Lesen der Seite weniger anstrengend gestalten und sich positiv auf den Nutzer oder die Benutzerin auswirken. Das ist ein echter Unique Selling Point (USP), egal in welcher Rolle man als Marketer:in, Entwickler:in, Projektmanager:in oder in einer anderen Position agiert. Echte
Low-Hanging Fruits, die jedem von uns einen einfachen Skill als USP im Markt geben.
WordPress und TYPO3 im Vergleich – TYPO3 gewinnt Seiten der Bundesregierung
Wie immer gilt, beschäftigt man sich mit neuen Themen, fühlt man sich schnell als Pionier. Danach wird man davon überrascht, dass es schon einen sehr professionellen Markt gibt und man glaubt, den Anschluss längst verpasst zu haben. Das trifft auch auf die führenden CMS in Deutschland zu.
WordPress engagiert sich seit vielen Jahren, das System ständig zu verbessern. Dazu gibt es schon sehr bekannte barrierefreie Themes. Hier kann man schon sehr viel ‘Out of the box’ und kostenlos bekommen und nutzen.
TYPO3 geht schon immer einen anderen Weg. Es ist ein Enterprise CMS und richtet sich vor allem an Entwickler:innen und eine Zielgruppe mit einem technologisch starken Hintergrund. Die Zielgruppe sind sehr große, mehrsprachige Internetseiten, mit einer Vielzahl an Redakteuren bzw. Redakteurinnen und Rollen.
In den letzten Jahren hat das Open Source Content Management System einen unglaublichen Sprung nach vorne gemacht. Aktuell steht man vor Version 13. In dieser spannenden Phase hat TYPO3 die Zusage der Bundesregierung bekommen, alle Seiten umzusetzen. Diese haben als Anforderung die höchste Stufe der Barrierefreiheit und müssen dann auch immer neue Regularien erfüllen. In dieser technologischen Challenge spielt auch das Thema Headless CMS eine sehr entscheidende Rolle. Damit kann man Frontend-Ausgaben vom Backend entkoppeln und auch unterschiedliche Systeme verbinden. Technologisch sehr anspruchsvoll, aber mit einer Vielzahl von sehr großen Potentialen.
Barrierefreies Webdesign und Bildbeschreibungen – Ich bin ein Mann mit langen Haaren und Bart
Neben den ganzen technologischen Herausforderungen hat das Thema barrierefreies Internet auch immer etwas mit Accessibility zu tun. Die Zugänglichkeit von Inhalten zeichnet auch ihre Sprache aus. Hier geht es um eine leichte Sprache, damit eine deutlich breitere Masse an User:innen Lösungen für ihre Fragen finden, erfassen und nutzen können.
In diesem Zusammenhang treffe ich mich regelmäßig mit dem Accessibility Consultant Marc Haunschild live auf YouTube, und er gibt mir Tipps, wie ich meine eigene Internetseite verbessern und barrierefreier gestalten kann. Best Practice ist es, bei einem Bild von mir etwas wie ‘Mann mit Bart lächelt vor einer Präsentationsleinwand mit Programmiercode und trägt ein Nerd T-Shirt’. Das kann sich jeder, der den Text hier liest, sehr gut vorstellen, wie das Bild aussieht.
Ich persönlich möchte mich sehr gerne gut in der Google Bildersuche positionieren. ‘Accessibility Consultant Roland Golla als Freelancer für barrierefreies Webdesign für TYPO3 und WordPress’ war meine ursprüngliche Version. Hier wird sofort klar, welcher Text als Alt Tag ein Bild deutlich besser beschreibt und welcher das Ziel verfolgt, Google zu gefallen. Und es wird auch klar, welchen Eindruck man genau bei einem User oder einer Userin hinterlässt, der mit einem Screenreader die eigene Internetseite besucht.
Google versteht den Zusammenhang zum Bild auch sehr gut aus dem Text. Dazu kann man dem Bild noch eine Caption als Hinweis geben. Hier kann man den zweiten Hinweis sehr gut nutzen und auch gerne einen Verweis auf die Fotografin geben. Nutzt man immer Alt und Caption, in zwei unterschiedlichen Varianten, ist man ein Profi im Web.
Fallback auf Titel und dann gerne einmal mit Betroffenen sprechen
Das Thema Barrierefreiheit und barrierefreier Bildtext erweist sich als deutlich komplexer als ursprünglich gedacht. Betrachtet man einmal die Anzahl der Bilder pro Seite, entwickelt sich das Ganze schnell zu einer echten Herkulesaufgabe. Im Bereich CMS gibt es eine Vielzahl von Infografiken, Screenshots und natürlich KI-generierte Bilder mit einer Fülle an Details und Inhalten.
Schaut man in den Bereich E-Commerce, ist es auch einfach ‘Eine lächelnde Dame vor neutralem Hintergrund mit einem gelben Sommerkleid’. Die Fotografien von technischen Produkten sind hier noch langweiliger. Hier kann man noch den Blickwinkel mit angeben. Genau das gilt es zu akzeptieren und zu verstehen. Man kann langweilige Inhalte nicht auf einmal attraktiv machen.
Stattdessen gilt es zu überlegen, wie man mit Alternativtexten und Captions einen Mehrwert und ein Nutzen für einen User oder einer Userin schaffen kann, der oder die die Bilder aufgrund seiner Behinderung nicht sehen. Hier reicht auch der Hinweis, dass es sich um detaillierte Produktansichten aus verschiedenen Bereichen handelt und er weiter zu relevanten Informationen und dem Bestellprozess kommt. Fallback auf den Titel ist ebenfalls eine Möglichkeit. Und dann wäre es sicherlich hilfreich, einmal mit den betroffenen Personen zu sprechen, um deren Bedürfnisse, Barrieren und Erwartungen besser zu verstehen.
KI als echte Chance Content endlich mal zugänglich machen
Kann das nicht einfach alles eine KI für uns erledigen? Künstliche Intelligenz ist eine große Bereicherung und ein sehr wichtiges Werkzeug für die Nutzung der breiten Zugänglichkeit im Internet. Ihr Einsatz ist besonders sinnvoll, da dies einen echten Unique Selling Point (USP) gegenüber Mitbewerbern bietet und man sich nicht nur in einem bereits optimierten Bereich einen kleinen Vorteil holen kann.
Dabei sind die Kosten für den Einsatz von Ressourcen zur Optimierung nicht zu unterschätzen. Es wird mehrere Versuche geben, und schnell wird klar, dass das Ergebnis besser als zuvor ist, aber noch nicht optimal. Außerdem ist zu beachten, dass die Geräte und Tools für blinde Menschen in Zukunft auch Bildbeschreibungen automatisch erhalten werden. Daher lohnt es sich nicht wirklich, die vielversprechenden Tools einzusetzen. Hier entstehen anfängliche Kosten, die eher ein beruhigendes Gewissen als ein zufriedenstellendes Ergebnis liefern. KI hilft uns dabei, neues Wissen schneller zu lernen, bestehende Seiten zu analysieren und barrierefreie
Verbesserungen und Inhalte vorzuschlagen und steht immer als freundlicher und kreativer Helfer zur Verfügung. Ihre Ergebnisse sind jedoch leider kein echter USP, sondern etwas, das jeder andere auch damit erreichen kann.
Wie nervös ist man vor einem Meetup mit 50 Menschen und gibt sich Mühe bei der Präsentation?
In der Nacht vor dem großen Auftritt werden alle Slides noch einmal angefasst, detaillierter, bekommen Liebe zum Detail. Jeder einzelne Slide wird perfekt gemacht. Einen Blogpost lesen mehrere 100 täglich und 1000 User im Monat. Wie würde man sich wohl um eine Präsentation kümmern, die man vor mehr als 1000 Menschen hält? Es lohnt sich immer, in die eigene Webseite zu investieren und ihre Inhalte kontinuierlich zu verbessern.
Barrierefreies Webdesign ist keine Sache von 5 Minuten – kontinuierliches Wissen ist der Schlüssel zum Erfolg
Wir alle haben Werte und Visionen, für die wir stehen. Niemand von uns möchte Menschen ausschließen. Wir stehen für Toleranz, Vielfalt und professionelle Arbeit. Barrierefreies Webdesign ist mehr als nur Blinde Menschen sehen zu lassen. Es geht auch um technologische und menschliche Barrieren, die immer mehr Menschen betreffen.
Dafür muss man für erste und sehr wirkungsvolle Schritte keinen großen Aufwand betreiben.
Kontraste, echte alternative Bilder, Texte, HTML-Struktur und leicht verständliche Inhalte müssen gestaltet werden. Das kann man nebenher umsetzen und auch gerne Feedback aus dem Umfeld der Accessibility Community bekommen. Technische Detektoren helfen dabei, Wissen aufzubauen. Aber hier können 90% auch einen falschen Eindruck entwickeln.
Genau die fehlenden 10% können einen Kauf verhindern. Barrierefreies Webdesign ist nicht nur für Blinde, und Blinde verschenken übrigens auch Bilder an ihre Freunde.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
