Was bedeutet Barrierefreiheit bei Websites?
Eine barrierefreie Website ist ohne technische oder persönliche Einschränkungen für jeden User zugänglich. Das schließt zum Beispiel Menschen mit Sehschwäche, Seh- oder Hörbehinderung mit ein, aber auch Menschen mit motorischen Beeinträchtigungen oder Konzentrationsschwäche. Ebenso Nicht-Muttersprachler oder ältere Menschen. Darüber Hinaus soll auch Rücksicht auf die unterschiedlichen Endgeräte der Nutzer genommen werden. Sämtliche Webseiten sollten also Das Ziel verfolgen von allen gleichermaßen uneingeschränkt genutzt werden zu können.Welche Anforderungen muss eine barrierefreie Website erfüllen?
Das Thema barrierefreies Webdesign ist sehr komplex, daher können wir Ihnen an dieser Stelle nur einen Überblick über die wichtigsten Kriterien geben, der keinen Anspruch auf Vollständigkeit erheben kann.
Eine der wichtigsten Anforderungen für barrierefreie Websites sind gut lesbare Schriften. Im Allgemeinen sind serifenlose Fonts besser lesbar. Schriften ausschließlich aus Großbuchstaben sollten vermieden werden, denn diese sind vom Auge nicht gut zu erfassen. Die Schrift sollte nicht zu klein dargestellt werden, besonders wichtig ist jedoch, dass die Schrift auf der Website vergrößerbar ist. Die sogenannten Schmuckschriften sollten, wie der Name schon sagt, vor allem dafür eingesetzt werden – als Schmuck, nicht um wichtige Informationen abzubilden.
Die Farbgestaltung der Website nimmt erheblichen Einfluss auf die Lesbarkeit. Hohe Kontraste zwischen zum Beispiel Hintergrund und Schrift, Elementen und Hintergrund, Buttonfarbe und Buttontext, usw. Sorgen dafür, dass auch User mit Sehschwäche die Inhalte gut wahrnehmen können. Wichtig ist auch, eine Rot-Grün-Schwäche zu berücksichtigen, Roter Text auf grünem Hintergrund zum Beispiel ist unbedingt zu vermeiden. Sollen Texte auf Bilder gelegt werden, ist für ausreichend Kontrast zu achten. Zu unruhige Bilder mit Schrift sind beispielsweise für User mit Konzentrationsschwäche eine Barriere. Hier hilft es, die Schrift einfarbig zu hinterlegen. Hohe Kontraste helfen übrigens auch allen Usern, die im Freien Ihre Website mit direkter Sonneneinstrahlung auf den Bildschirm besuchen.
Schaltflächen müssen groß genug und klar als solche erkennbar sein. Links sind mit ausreichend Abstand voneinander zu platzieren. Ebenfalls sollte hier überprüft werden ob diese Schaltflächen auch gut von Screenreadern identifizierbar sind. Allgemein sollte darauf geachtet werden, dass die Webseite auch komplett über Screenreader bedienbar ist.
Bilder sind von Menschen mit Sehbehinderung nur begrenzt oder überhaupt nicht wahrnehmbar, daher sind Alternativtexte unumgänglich. Das gilt besonders für Grafiken, die nicht als reines Schmuckobjekt platziert wurden, sondern einen eigenen Inhalt transportieren. Beispielsweise Infografiken oder Fotos zur Veranschaulichung. Bildbeschreibungen müssen diesen Inhalt wiedergeben.
Eine einfache Sprache auf der Website hilft der Lesbarkeit erheblich. Sofern sich Texte nicht explizit an ein Fachpublikum richten, baut eine leicht verständliche Sprache viele Hürden ab. Übrigens wird auch für Fachtexte diskutiert, ob einfache Sprache nicht die bessere Wahl ist und ob es wirklich so viele Fachbegriffe und fremdsprachliche Wörter sowie verschachtelte Sätze sein müssen.
Von einer übersichtlichen Seitenstruktur profitieren alle User – eine intuitiv bedienbare Navigation und eine klare Dokumentstruktur mit einer korrekten Hierarchie. Überschriften mit semantischen Auszeichnungen grenzen Absätze mit Überschriften voneinander ab und stellen einen hierarchisch logischen Zusammenhang her, den auch Screenreader anhand der Headlines erkennen können.
Tabellen sollten ausschließlich für tabellarische Daten verwendet werden, nicht zur Ausrichtung von Elementen. Diese Art des Webdesigns ist zwar 2022 nicht mehr der Standard, aus der Praxis wissen wir jedoch, dass Formatierung mit Tabellen noch nicht vollständig ausgestorben ist. Nicht nur aus Gründen der Barrierefreiheit keine gute Praxis.
Formatieren Sie Listen und nummerierte Aufzählungen als HTML-Elemente, damit diese von Screenreadern als sortierte, unsortierte oder nummerierte Listen erkannt werden können. Listen-Elemente sollten nicht als Designelemente verwendet werden, sondern nur um Listeninhalte darzustellen.
Achtung beim Einbetten von multimedialen Inhalten: Das sogenannte Embedding von Inhalten anderer Plattformen bringt für die Barrierefreiheit Herausforderungen mit sich. Auch wenn beispielsweise Videoinhalte zunehmend von großen Plattformen mit automatischen Untertiteln und/oder Transkripten versehen werden, können Sie sich nicht sicher sein, wie barrierefrei diese Inhalte sind. Sind eingebettete Medien notwendig, stellen Sie sicher, dass Sie im Text die wichtigsten Informationen daraus wiedergeben.
ARIA-Labels: Unverzichtbares Werkzeug für Barrierefreiheit auf Webseiten und SEO
Neben all den eben genannten Anforderungen gibt es noch weitere Aspekte die bei der Gestaltung einer barrierefreien Webseite beachtet werden sollten. Ein Aspekt sind die sogenannten ARIA-Labels. ARIA-Labels (Accessible Rich Internet Applications) sind ein wesentlicher Bestandteil des barrierefreien Webdesigns und tragen zur Verbesserung der Zugänglichkeit von Webinhalten bei. Sie sind spezielle HTML-Attribute, die zusätzliche Informationen über bestimmte Elemente auf einer Webseite liefern und die Zugänglichkeit für Menschen mit Behinderungen verbessern. Diese Labels helfen insbesondere Screenreadern und anderen assistiven Technologien, die Webseite besser zu interpretieren und zu navigieren. Beispielsweise kann ein ARIA-Label einen unsichtbaren Text hinzufügen, der ein Symbol erklärt oder ein Menü beschreibt, das ohne diese zusätzlichen Informationen für Menschen mit eingeschränktem Sehvermögen unverständlich wäre. ARIA-Labels tragen auch zur eigentlichen Suchmaschinenoptimierung bei, da sie Suchmaschinen helfen den Kontext und die Struktur einer Webseite besser verstehen können. Dies führt zu einer besseren Indexierung und potenziell höheren Rankings in den Suchergebnissen. Jedoch ist es wichtig, dass ARIA-Labels korrekt eingesetzt werden. Übermäßiger oder falscher Gebrauch kann zu Verwirrung führen, sowohl für Nutzer von assistiven Technologien als auch für Suchmaschinen. Daher sollte die Verwendung dieser Labels sorgfältig geplant und getestet werden.Was ist der Unterschied zwischen barrierefrei und barrierearm?
Der Begriff “barrierefrei” ist deutlich weiter verbreitet, doch manchmal ist auch von “barrierearmem Webdesign” zu lesen. Dahinter steht die Vorstellung, dass “barrierefrei” als absoluter Zustand schwer umzusetzen ist und es immer eine Annäherung ist – Barrieren sollen abgebaut werden, je weniger Barrieren auf der Website vorhanden sind, desto besser. Wir verwenden im Folgenden den Begriff “Barrierefreiheit”, da dies das Ziel darstellt. Jeder einzelne Schritt hierbei hilft dabei, die Website barriereärmer zu machen. Im weiteren Verlauf des Artikels wird verständlicher warum der Begriff „barrierearm“ ab 2025 nicht mehr ausreichend sein wird. „Barrierefrei“ wird mit der Zeit für betroffene Webseiten Pflicht. Umso früher dieser Prozess in Angriff genommen wird, desto besser.
Warum ist eine barrierefreie Website wichtig?
Die Anforderungen für einen barrierefreien Zugang wachsen. Öffentliche Ausschreibungen setzen beispielsweise zunehmend Barrierefreiheit voraus und international tätige Unternehmen müssen die Gesetzgebungen anderer Länder beachten. Wie Sie an den Gesetzen im nächsten Abschnitt sehen, ist Barrierefreiheit teilweise schon jetzt verpflichtend oder wird es in den kommenden Jahren. Es gibt jedoch weitere, ebenso wichtige Gründe für eine barrierefreie Website.
Barrierefreies Webdesign macht eine Website nutzerfreundlicher. Von barrierefreien Websites profitieren also alle Besucherinnen und Besucher. Dies wiederum wirkt sich positiv auf die Kundenzufriedenheit aus.
Sie schließen niemanden aus, wenn Sie Ihren Webauftritt allen zugänglich machen. Damit können Sie zum einen Ihre Zielgruppe erweitern, aber vor allem unternehmen Sie praktische Schritte, um die Unternehmenswerte Inklusion und Barrierefreiheit umzusetzen. In Zeiten, in denen viele Kundinnen und Kunden kritisch hinterfragen, für welche Werte Unternehmen stehen, sind eine klare Stellungnahme und eine praktische Umsetzung eine wichtige Botschaft. Da viele Webseitenbetreiber dem Thema aufgrund von höherem Zeitaufwand weniger Aufmerksamkeit schenken, ist es gerade jetzt wichtig sich der Thematik anzunehmen. Sich mit Barrierefreiheit zu beschäftigen setzt nicht nur klare Statements sondern generiert auch eine gewisse Vorbildsfunktion.
Welche Standards und Gesetze gelten für die digitale Barrierefreiheit?
Der weltweit gültige Standard für die Barrierefreiheit im Internet sind die Web Content Accessibility Guidelines (WCAG), die von einer Arbeitsgruppe des World Wide Web Consortiums entwickelt wurden und laufend aktualisiert werden. Der aktuelle Standard ist die WCAG 2.2.
Neben der technischen Grundlage gibt es verschiedene nationale und internationale Verordnungen zur Barrierefreiheit. Ein Überblick über die wichtigsten davon:
In Deutschland gibt es die Barrierefreie Informationstechnik-Verordnung (BITV 2.0), die sich auf den europäischen Standard, die EN 301 549 bezieht.
Bundesbehörden sind durch das Gesetz zur Gleichstellung von Menschen mit Behinderungen (BGG) zu barrierefreien Websites verpflichtet. Die Barrierefreiheit der Websites von öffentlichen Stellen der Bundesländer und Kommunen wird über Landesgesetze und landesspezifische Verordnungen geregelt. In Berlin ist das beispielsweise das Barrierefreie-IKT-Gesetz Berlin – BIKTG Bln.
Auch in der Privatwirtschaft soll Barrierefreiheit im Netz verpflichtend werden. Das Barrierefreiheitsstärkungsgesetz (vollständiger Name: Gesetz zur Umsetzung der Richtlinie (EU) 2019/882 des Europäischen Parlaments und des Rates über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen (BFSG)) basiert auf der EU-Richtlinie zu Barrierefreiheitsanforderungen für Produkte und Dienstleistungen. Im BSFG werden Branchen aufgezählt, die ab Ende Juni 2025 verpflichtend barrierefreie Websites und Apps zur Verfügung stellen müssen. Dazu gehören unter anderem Webseiten von Stiftungen, Hochschulen und Universitäten, Sozialversicherungen, aber auch Banken oder der Online-Handel.
Das Thema Barrierefreiheit ist zwar bisher für viele Websites nicht verpflichtend, es ist jedoch wichtig, frühzeitig darauf vorbereitet zu sein. Darüber hinaus spiegelt eine barrierefreie Website zukunftsweisende Unternehmenswerte wie Inklusion und Zugänglichkeit (Accessibility) wider.
Ist Barrierefreiheit ein Rankingfaktor?
Dass Google schon seit vielen Jahren auf die Bedeutung der Nutzerfreundlichkeit einer Website hinweist, ist kein Geheimnis. Was das konkret bedeutet, dafür gibt es verschiedene Empfehlungen, Tools und Hinweise von Google selbst. Eine gute Bedienbarkeit, besonders auch auf mobilen Endgeräten, ein Design ohne merkliche Layout Shifts, eine schnelle Ladezeit sind Faktoren, die Google positiv bewertet. Ist Barrierefreiheit also ein direkter Rankingfaktor? Bisher nicht, allerdings tragen verschiedene Maßnahmen, die die Barrierefreiheit verbessern, zu einer besseren Suchmaschinenoptimierung bei. Welche Maßnahmen das konkret sind, sehen wir uns im nächsten Abschnitt an.Wie hilft die Barrierefreiheit für die Suchmaschinenoptimierung?
Vielleicht haben Sie bei den oben beschriebenen Anforderungen schon gemerkt, wie groß die Schnittmenge zwischen SEO und Barrierefreiheit ist. Sowohl Screenreader als auch Suchmaschinen arbeiten textbasiert und sind darauf angewiesen, dass alle Informationen in Textform vorliegen. Schon dieser Punkt zeigt, wie Barrierefreiheit Vorteile in der Suchmaschinenoptimierung bringen kann. Konkret sind es vor allem diese Faktoren:- Bilderoptimierung: Alternativtexte und Bildbeschreibungen helfen nicht nur Menschen mit Sehbehinderungen, sondern auch Suchmaschinen, die Inhalte von Bildern zu erfassen. Das gilt besonders für Grafiken, die den Inhalt der Seite ergänzen und eigene Informationen beinhalten. Der Alternativtext muss die Information im Bild enthalten.
- Eine korrekte, logische semantische Struktur hilft auch der Suchmaschinenoptimierung. Überschriften, die relevante Begriffe enthalten und sich auf den Inhalt des folgenden Absatzes beziehen, sind teilweise schon “automatisch” auf die wichtigen Keywords optimiert. Begriffe zu verwenden, die im Sprachgebrauch gängig sind und viel gesucht werden, hilft bei einer guten Lesbarkeit und dem Verständnis.
- Das Responsive Webdesign ist seit Jahren schon Standard und empfehlen wir aus SEO-Gründen schon lange. Der Barrierefreiheit hilft es außerdem, denn es wird eine optimale Darstellung unabhängig vom verwendeten Endgerät sichergestellt.
- Sprechende Linktexte geben User und Suchmaschinen Informationen über die verlinkte Seite. Anchortexte wie “hier” oder “mehr lesen” dagegen transportieren keine Informationen – und enthalten keine Keywords, die der verlinkten Seite helfen können, besser zu ranken.
- Inwieweit Suchmaschinen identifizieren können, wie verständlich die Sprache einer Website ist, sei dahingestellt. Tatsache ist jedoch, dass Google sehr viel darin investiert, Texte semantisch zu verstehen, Inhalte und Sprache erkennen zu können. Es ist außerdem davon auszugehen, dass Google zwischen sehr langen verschachtelten Sätzen und kürzeren (verständlichen) Sätzen unterscheiden kann. Eine bessere Lesbarkeit ist ein SEO-Kriterium und hilft der Barrierefreiheit.
- Die Sprache im Quelltext anzugeben, mag für Suchmaschinen nur begrenzt notwendig sein, Screenreadern jedoch hilft es dabei, die passende Aussprache zu wählen. Und aus der Praxis kennen wir Websites mit falscher Spracheinstellung, die massive Indexierungsprobleme hatten, die zumindest teilweise darauf zurückzuführen waren.
- Transkripte für Audio und Video sind eine weitere Maßnahme, von der sowohl User als auch Suchmaschine profitieren. Die Inhalte werden damit für alle lesbar gemacht – und können entsprechend thematisch einsortiert und in der Suche gefunden werden.
5 Tipps für die Umsetzung von digitaler Barrierefreiheit
1. Hohe Priorisierung des Themas
Auch wenn es so klingen mag, als würde die Barrierefreiheit nur einen kleinen Teil Ihrer Zielgruppe betreffen, sollten Sie dem Thema eine hohe Bedeutung beimessen. Zum einen könnten Sie von der Gesetzgebung betroffen sein, die Sie ab 2025 zu einer barrierefreien Website verpflichtet. Zum anderen bringt die Barrierefreiheit Ihnen weitere Vorteile wie eine bessere Optimierung für die Suchmaschine. Inklusion als Unternehmenswert fest zu verankern und praktisch umzusetzen, ist ein weiterer Bonus.
2. Barrierefreiheit von Anfang an mitdenken
Planen Sie einen Relaunch Ihrer Website oder soll ein neuer Online Shop gelauncht werden? Berücksichtigen Sie das barrierefreie Webdesign von Anfang an und sparen Sie so Ressourcen und Budget. Wie für die Suchmaschinenoptimierung gilt auch hier: Je früher Sie die Anforderungen berücksichtigen, umso besser. Im Nachhinein massive Änderungen vorzunehmen, ist im Allgemeinen mit erheblich mehr Aufwand und Kosten verbunden.
3. Layout und Inhalt trennen
Eine der wichtigsten Regeln im barrierefreien Webdesign ist die Trennung von Inhalt und Design. Moderne CMS bringen diese Voraussetzungen schon mit, selbst programmierte Websites nicht immer. Achten Sie also schon bei der Planung des Systems und der Templates auf eine klare Trennung.
4. Aktuelle Standards verfolgen
Die Barrierefreiheit wird laufend weiterentwickelt, es entstehen neue Formate, Standards und Kriterien. Bleiben Sie auf dem Laufenden oder beschäftigen Sie ein Webdesign- und Programmier-Team, das sich mit den aktuellen Standards auskennt.
5. Redaktion schulen
Das Grundgerüst der Website und die technischen Voraussetzungen sind nur eine Seite der Barrierefreiheit. Auch aus redaktioneller Sicht gibt es viel richtig oder falsch zu machen. Verbessern Sie im Rahmen Ihres Content Marketings die Redaktion und erstellen Sie einen verpflichtenden unternehmensinternen Standard. Beispielsweise können Sie darin Alternativtexte für Bilder und die korrekte Verwendung von Listen verpflichtend machen. Etablieren Sie als Corporate Design gut erkennbare Farben mit hohem Kontrast und in der Corporate Language eine einfache Sprache.
Barrierefreiheit ja! – aber wie überprüfen?
Nach all den Maßnahmen worauf bei der Arbeit zu einer barrierefreien Webseite geachtet werden muss erschließt sich die Frage, wie man dies alles überprüfen kann. Wie kann ich sicherstellen, dass meine Maßnahmen richtig implementiert wurden?
Google Lighthouse ist ein äußerst nützliches Open-Source-Tool, das Webentwicklern dabei hilft, die Performance, Zugänglichkeit und Qualität ihrer Webseiten zu bewerten. Insbesondere im Bereich der Barrierefreiheit bietet es entscheidende Vorteile.
Lighthouse prüft die Zugänglichkeit einer Webseite anhand etablierter Standards und gibt eine detaillierte Auswertung mit spezifischen Empfehlungen zur Verbesserung. Zum Beispiel kann das Tool auf fehlende Alt-Texte bei Bildern hinweisen, die für Sehbehinderte wichtig sind, oder auf fehlende ARIA-Attribute, die zur Verbesserung der Navigierbarkeit für Nutzer mit eingeschränkter Motorik beitragen.
Darüber hinaus bietet Lighthouse auch eine detaillierte Dokumentation zu jedem aufgeführten Problem. Dies erleichtert es den Entwicklern, die genaue Ursache des Problems zu verstehen und gezielte Maßnahmen zu seiner Behebung einzuleiten.
Es ist wichtig zu beachten, dass, obwohl Lighthouse einen umfassenden Überblick über viele Aspekte der Barrierefreiheit bietet, es kein Ersatz für manuelle Prüfungen oder Nutzertests mit Menschen mit Behinderungen ist. Einige Zugänglichkeitsprobleme, insbesondere solche, die Kontext oder spezifische Interaktionen erfordern, können von automatisierten Tests nicht erfasst werden.
Indem man Google Lighthouse im Entwicklungsprozess integriert, kann man sicherstellen, dass Zugänglichkeitsprobleme frühzeitig erkannt und behoben werden, was zu einer insgesamt besseren User Experience für alle Nutzer führt.
Ist Ihre Website barrierefrei, responsive und optimiert? Wir können helfen!
Möchten Sie Ihre Website auf den aktuellen Stand bringen, was Barrierefreiheit und Usability betrifft? Unsere SEO Relaunch Betreuung berücksichtigt nicht nur Punkte, die Ihre Sichtbarkeit und Ihren Traffic erhöhen. Wir analysieren auch Ihre Usability und können Sie zum Thema barrierefreie Website beraten und Ihre Wünsche sowie die aktuellen Standards umsetzen. Kontaktieren Sie uns gerne und lassen Sie sich ein unverbindliches Angebot erstellen!
Lukas Grabalowski unterstützt das SEO Team der internetwarriors seit Oktober 2021. Er verfügt über ein breit gefächertes Wissen, sowohl im technischen als auch im redaktionellen SEO. Egal ob es um Analysen oder das Schreiben von kreativen und SEO optimierten Texten geht. Sichtbarkeit bei den organischen Rankings ist alles was zählt.