Barrierefreies Webdesign – so gestalten Sie eine zugängliche Website

Stellen wir uns den Gang in ein Restaurant vor: Da sind zuerst die Treppen, die zum Eingang führen. Dann bekommen wir die Speisekarte, die wir hungrig studieren und zuletzt das Essen, das wir mit Messer und Gabel aufnehmen. Für viele von uns ganz normal – für andere mit vielen Herausforderungen verbunden, wenn sie zum Beispiel im Rollstuhl vor den Treppen stehen, die Karte nicht lesen können oder die motorischen Einschränkungen die Essensaufnahme erschweren. Genauso verhält es sich auf Websites: Viele, aber eben nicht alle User:innen gelangen problemlos zu den von ihnen gesuchten Informationen im Web. In unserem Beitrag zur digitalen Barrierefreiheit stellen wir die gesetzlichen Grundlagen ab 2025 vor. Hier erfahren Sie genauer, was die Anforderungen für Ihren Webauftritt bedeuten und wie Sie die Grundprinzipien umsetzen.

In Bezug auf die Gestaltung und Optimierung von Websites haben wir als Agentur uns in den letzten Jahren eingehend mit dem Abbau von Barrieren auseinandergesetzt – insbesondere hinsichtlich der Konformität mit den Web Content Accessibility Guidelines (WCAG) und der Barrierefreien-Informationstechnik-Verordnung (BITV). Unter anderem beschäftigen wir uns dabei mit den folgenden Elementen:

Design und visuelle Elemente einer Website barrierefrei zu gestalten, bedeutet, dass sie für Menschen mit unterschiedlichen Fähigkeiten und Einschränkungen zugänglich sind. Insbesondere für Personen mit einer Sehbehinderung sowie für blinde und farbenblinde Menschen tragen folgende Punkte zu einem barrierefreien Zugang zu Inhalten bei:

• • Kontrast und Farbgebung: Texte sollten auf einem Hintergrund deutlich erkennbar sein. Verzichten Sie auf die Verwendung von Farben als alleiniges Mittel zur Darstellung.
  • Schriftgrafiken: Vermeiden Sie Bilder mit integriertem Text und nutzen Sie stattdessen Texte, die auch von assistierenden Technologien ausgelesen werden können.
  • Alternativtexte für Bilder, Grafiken und Schaltflächen: Bilder und Grafiken, die Informationen enthalten, sollten mit beschreibendem Text ausgestattet sein. Bei Bildern, die keine relevanten Inhalte haben, können Sie hingegen auf Alt-Texte verzichten, um den Lesefluss nicht zu stören und Audiospam zu vermeiden.
  • Skalierbarkeit: Texte und visuelle Elemente sowie auch die Navigation sollten so gestaltet sein, dass sie verlustfrei vergrößert werden können.
  • Tabellen: Große, komplizierte Tabellen stellen für Screenreader eine Schwierigkeit dar. Nutzen Sie Tabellen daher nicht aus rein optischen Gründen.

Damit alle Nutzer:innen die Inhalte Ihrer Website leicht auffinden und verwenden können, benötigen Sie eine logische und vorhersehbare Struktur – also klar definierte Überschriften, die die Hierarchie der Informationen widerspiegeln. Mit einer klaren Struktur helfen Sie insbesondere User:innen mit Screenreader, die Seite problemlos zu navigieren. Ebenso wichtig ist die Bereitstellung mehrerer Navigationsmethoden wie einer Suchfunktion, Breadcrumbs und eines Inhaltsverzeichnisses für längere Seiten. Die Implementierung von Skip-Links ermöglicht es Nutzer:innen zudem, direkt zum Hauptinhalt zu springen.

Besonders wichtig für die zugängliche und verständliche Gestaltung von Webseiten ist die Auszeichnung von Elementen mit HTML. Die Strukturierung von wiederkehrenden Komponenten wie Überschriften mit den dafür vorgesehenen HTML-Attributen erleichtert die Zugänglichkeit mit Screenreadern und Bedienungshilfen. Darüber hinaus sollten interaktive Elemente – beispielsweise Widgets und Formularelemente – mit Accessible Rich Internet Applications (ARIA) – Landmarks versehen werden, um eine leichte Orientierung zu ermöglichen. 

Vermeiden Sie bei der Strukturierung aber Audiospam – beispielsweise sollte ein Teaser die entsprechende Seite nur einmal verlinken, da Screenreader jeden Link einzeln vorlesen. Ein weiteres Beispiel für Audiospam ist die unnötige Strukturierung von Inhalten in Tabellen und Listen aus Designgründen. Auch hier lesen Screenreader die Informationen aus den entsprechenden HTML-Attributen.

Bei der Verwendung multimedialer Inhalte sollten Sie ebenfalls überprüfen, ob diese für Personen mit Einschränkungen und Behinderungen zugänglich sind. Das bedeutet: 

• Videos sollten mit Untertiteln versehen werden, damit Gehörlose und Schwerhörige sowie Personen mit kognitiven Einschränkungen sowohl gesprochene Inhalte als auch musikalische Untermalung und andere Geräusche verstehen können. Darüber hinaus kann der Inhalt für Menschen mit Sehbehinderungen oder Blindheit mithilfe von Audiodeskriptionen zugänglich gemacht werden. Einige Stellen des öffentlichen Dienstes bieten auch die Übersetzung ihrer Videos in Gebärdensprache an.

• Audioinhalte sind mit Transkripten zu übersetzen, in denen der gesprochene Text sowie weitere relevante akustische Informationen schriftlich wiedergegeben werden.

Darüber hinaus müssen multimediale Inhalte steuerbar sein – das bedeutet, Nutzer:innen haben die Möglichkeit, die Wiedergabe zu steuern und können pausieren sowie vor- und zurückspulen. Insbesondere ist dabei die Bedienbarkeit mithilfe der Tastatur und anderen Bedienungshilfen wichtig. Zusätzlich sollten Sie darauf achten, dass die Inhalte mit Screenreadern kompatibel sind, unter anderem, indem Sie diese mit den entsprechenden HTML-Tags versehen.

Der Aspekt der barrierefreien Sprache zieht sich durch alle bereits genannten Punkte und ist ein entscheidendes Element, um allen Nutzer:innen den Zugang zu Inhalten zu ermöglichen. Für die Content-Redaktion bedeutet das unter anderem die Verwendung kurzer, prägnanter Sätze und Absätze ohne unnötig komplexe Ausdrücke. Zudem sollten Sie die primäre Sprache der Website im HTML-Code angeben und einen Sprachwechsel innerhalb des Textes entsprechend markieren, um die korrekte Interpretation durch Screenreader zu gewährleisten und Nicht-Muttersprachler:innen das Verständnis zu erleichtern. Darüber hinaus bieten einige öffentliche Stellen – z. B. das Bundesministerium für Arbeit und Soziales (BMAS) – auch die Seiteneinstellungen leichte Sprache und Gebärdensprache an.

Praktiken der digitalen Barrierefreiheit weisen einige Schnittmengen zu den Best Practices des Webdesigns auf. Eine klare Strukturierung und Navigation, Skalierbarkeit, Farbgebung, Steuerbarkeit multimedialer Inhalte etc. machen Webseiten nicht nur für Personen mit Behinderungen zugänglich, sondern verbessern die User Experience (UX) insgesamt.

Viele Optimierungen im barrierefreien Webdesign finden zudem Anwendung in der Suchmaschinenoptimierung. So helfen unter anderem Alternativtexte, strukturierte Daten, kontrastreiche Farbgestaltung und die Verwendung von ARIA-Markups sowohl User:innen als auch Suchmaschinen beim Erfassen von Inhalten. Ein weiterer gemeinsamer Nenner findet sich außerdem beim mobilen Webdesign: Skalierbare und gut strukturierte Inhalte sowie mobile Apps sorgen für eine bessere Zugänglichkeit für verschiedene Endgeräte und Bedienungshilfen.

Hinweis: Viele Anbieter bieten Plug-ins und 1-Click Lösungen für barrierefreie Websites an. Ganz so einfach ist es aber leider nicht – Barrierefreiheit sollte sich als Grundprinzip durch die gesamte Konzipierung und Gestaltung der Website ziehen. Erfahrene Entwickler:innen und Redakteur:innen, moderne Authoring Software (z. B. CMS) sowie Expertise in der Anwendung verschiedener Evaluationstools sind der beste Weg zu einer guten UX, hohem Ranking und einer barrierefreien Webgestaltung. Wir helfen Ihnen gerne bei der Optimierung Ihres Webauftritts auf die entscheidenden Aspekte sowie beim Relaunch und bei der Betreuung Ihrer Website.

In unserer Arbeit setzen wir uns vermehrt mit den Möglichkeiten auseinander, die aus der Zusammenarbeit mit Künstlicher Intelligenz (KI) entstehen. Hier sind einige Anwendungsbeispiele für barrierefreies Webdesign mit KI:

• Generierung von Alternativtexten für Bilder oder Untertitel für Videos. So wird unter anderem Menschen mit Sehbehinderungen ermöglicht, Bildinhalte über Screenreader zu verstehen.

• Erkennung individueller Sprachmuster, z. B. im sprachgestützten Onlineshopping. Das ist besonders hilfreich für Nutzer:innen mit motorischen Einschränkungen, die möglicherweise keine Maus oder Tastatur verwenden können.

• Natural Language Processing (NLP): Damit arbeiten unter anderem Google, Amazon und weitere Online-Händler, um Suchanfragen zu verstehen. Personen können eine Webseite so auch mit ungenauen Suchanfragen navigieren. Das kann insbesondere hilfreich sein für Menschen mit Sehbehinderungen oder kognitiven Einschränkungen.

• Übersetzung von Inhalten in leichte Sprache: KI-gestützte Tools können komplexe Texte analysieren und vereinfachen. Das unterstützt Menschen mit kognitiven Beeinträchtigungen oder auch Nicht-Muttersprachler:innen.

• Vorhersage und Personalisierung: KI kann genutzt werden, um Präferenzen und Gewohnheiten von Nutzer:innen zu lernen und die Benutzeroberfläche entsprechend anzupassen.

• Content-Erstellung: Große Mengen an Content können in kurzer Zeit unter Berücksichtigung verschiedener Kriterien (z. B. einfacher Sprache und Begriffe) generiert werden.

Erkennung und Korrektur von Problemen: KI-Tools können Webseiten scannen und automatisch Probleme in Bezug auf Barrierefreiheit identifizieren, wie z. B. fehlende Alt-Texte, unzureichenden Kontrast und fehlende ARIA-Rollen. Einige Tools können sogar automatisch Korrekturen vorschlagen oder anwenden.

Darüber hinaus laufen einige Forschungsprojekte zum Thema KI und Gebärdensprache. Unter anderem beschäftigt sich das Projekt BIGEKO mit der Übersetzung von Gebärdensprache in gesprochene Sprache – sowie umgekehrt das Projekt Content4All mit der Übersetzung von gesprochener Sprache in Gebärdensprache. Die Möglichkeiten der barrierefreien Webgestaltung mithilfe von KI wachsen also voraussichtlich weiter.

Barrierefreies Webdesign erfordert ein tiefes Verständnis für die vielfältigen Bedürfnisse Ihrer Kund:innen sowie die Bereitschaft, innovative Lösungen zu erkunden und umzusetzen. Unsere Aufgabe ist es, uns nicht nur über diese Entwicklungen zu informieren, sondern auch aktiv an der Gestaltung einer zugänglichen digitalen Welt mitzuwirken. Die neuen rechtlichen Vorgaben zur digitalen Barrierefreiheit bieten eine hervorragende Gelegenheit, Ihre Webangebote zu überprüfen und zu verbessern, um sicherzustellen, dass sie für jeden zugänglich sind. Dabei können unter anderem auch die Beratungsangebote der Bundesfachstelle Barrierefreiheit behilflich sein. 

Die Integration von KI-Technologien – von der automatischen Erstellung von Alt-Texten bis hin zur personalisierten Anpassung der Benutzeroberfläche – bietet dabei eine vielversprechende Möglichkeit, die Effizienz und Wirksamkeit dieser Bemühungen zu steigern.

Quellen:

https://www.w3.org/TR/WCAG22/

https://www.interaktive-technologien.de/projekte/bigeko

https://www.fraunhofer-innovisions.de/semantische-medienanalyse/gebaerden-sprechen-lassen/