Warum barrierefreie Textstrukturen den Unterschied machen

Den Namen andika haben wir uns ganz bewusst ausgesucht. Andika bedeutet im Suaheli „Schreib!“ und spiegelt wider, wofür wir stehen: Inhalte so zu gestalten, dass sie wirklich bei allen ankommen. Die gleichnamige Schriftart andika wurde übrigens 2006 von SIL International entwickelt. Das Ziel war Buchstaben so klar zu formen, dass unter anderem Menschen mit Sehbeeinträchtigungen sie zuverlässig unterscheiden und angenehm lesen können. Genau dieser Gedanke trägt sich durch unsere gesamte Arbeit und er ist der Grund, warum barrierefreie Textstrukturen in Webseiten für uns kein Zusatzthema sind, sondern Grundlage jedes Projekts.

Das Wort andika spiegelt außerdem unsere Liebe zu Ostafrika wieder, die wir durch unsere fantastischen Aufnahmen ebenfalls gerne teilen.

Eine Webseite ohne klare Struktur ist wie ein Buch ohne Inhaltsverzeichnis. Viele Lesende überfliegen Texte anhand von fett gedruckten Zwischenüberschriften, doch für Screenreader-Nutzende sind H1 bis H6 weit mehr als Optik. Sie sind die primäre Navigationsmethode.

Jede Seite braucht genau eine H1, die den Inhalt treffend beschreibt, vergleichbar mit dem Titel eines Buchkapitels. Darunter folgen H2-Abschnitte, die größere thematische Blöcke markieren, und innerhalb dieser Blöcke können wiederum H3-Unterpunkte stehen, um Details zu gliedern.

Die WebAIM-Million-Studie 2025 zeigte, dass 39% der analysierten Startseiten übersprungene Heading-Ebenen aufwiesen, fast 10% der Seiten gar keine Überschriften hatten. Das sind keine Schönheitsfehler, sondern handfeste Hürden für Menschen, die auf assistiere Technologien angewiesen sind.

Suchmaschinen werten H1 bis H6 im HTML‑Code aus, um die Themenhierarchie zu verstehen und genau darum ist eine sauber aufgebaute H‑Struktur ein wichtiges SEO‑Signal.

Wenn ein Textabschnitt optisch hervorstechen soll, größer oder fetter wirken soll, greifen viele Autorinnen und Autoren einfach zu H2 oder H3, statt die Darstellung über CSS zu lösen. CSS (Cascading Style Sheets) ist die Sprache, mit der Farben, Schriftgrößen, Abstände oder Fettungen einer Webseite gestaltet wird. HTML-Überschriften (H1 bis H6) hingegen legen die Struktur der Webseite und die Bedeutung des jeweiligen Textabschnitts, unabhängig davon, wie groß oder klein er später dargestellt wird.

Ein Screenreader ist eine Software, die Bildschirminhalte in synthetische Sprache oder Braille-Ausgabe umwandelt. Genutzt wird sie vor allem von blinden und stark sehbehinderten Menschen, die sich Inhalte vorlesen lassen. Ein Screenreader liest eine Seite dabei nicht einfach von oben nach unten vor, er gibt Nutzenden Werkzeuge an die Hand, um gezielt zu navigieren. Per Tastenkürzel lässt sich von Überschrift zu Überschrift springen. Fehlt die saubere Hierarchiestruktur, wirkt eine Seite für diese Nutzergruppe unübersichtlich oder sogar leer, obwohl die Inhalte längst vorhanden sind.

Neben den Überschriften machen aussagekräftige Linktexte und ausreichender Farbkontrast zwischen Schrift und Hintergrund einen großen Unterschied. Vermeiden Sie nichtssagende Links wie „hier klicken“ oder „mehr erfahren“. Der Linktext muss auch ohne den umgebenden Kontext das Ziel eindeutig beschreiben (z. B. „zu unseren Content Paketen“)

Diese Punkte sind direkt der WCAG (Web Content Accessibility Guidelines) entnommen. Sie gelten weltweit als zentraler Standard für digitale Barrierefreiheit und basieren auf vier Prinzipien: wahrnehmbar, bedienbar, verständlich, robust. Daran orientiert sich auch das seit Juni 2025 geltende Barrierefreiheitsstärkungsgesetz (BFSG), das für viele digitale Angebote verbindlich ist.

Grafik 'Prinzipien für barrierefreie Webinhalte' mit vier Halbkreis-Symbolen in Blau, Rosa, Lila-Rosa und Pink, beschriftet mit den Buchstaben W, B, V, R für wahrnehmbar, bedienbar, verständlich, robust; im Hintergrund ein Laptop auf einem Schreibtisch mit Icons zu Barrierefreiheit (Auge, Untertitel, Lautsprecher, Zahnräder, vernetzte Geräte).

Ein weiterer Aspekt, der besondere Aufmerksamkeit verdient, ist der Alt-Text. Sehende Internetnutzer lesen den Alternativtext, kurz Alt-Text, für Bilder selten. Jedes Bild auf einer Webseite kann im Quellcode mit einer kurzen Textbeschreibung hinterlegt werden. Diese Beschreibung wird nicht sichtbar angezeigt, sondern nur dann ausgelesen, wenn ein Bild aus technischen Gründen nicht lädt oder wenn ein Screenreader die Seite vorliest. Für Menschen, die Bilder nicht sehen können, ist der Alt-Text die Möglichkeit zu erfahren, was visuell dargestellt wird.

Ein guter Alt-Text beschreibt knapp und konkret, was auf dem Bild zu sehen ist und welche Funktion es im Kontext erfüllt, nicht „Bild1.jpg“ oder „Foto“, sondern zum Beispiel „Illustration zu digitaler Barrierefreiheit: Symbole für Untertitel (…) , Smartphone mit Sprachausgabe, im Hintergrund eine transparente Kopf- und Gehirn-Silhouette mit Datennetz“ wie bei unserem Titelbild. Bei Diagrammen, Schaubildern oder Infografiken lohnt sich sogar eine ausführlichere Beschreibung, denn ein einzeiliger Alt-Text reicht selten aus, um komplexe Zusammenhänge zu vermitteln.

Wer Alt-Texte konsequent pflegt, profitiert übrigens auch in der SEO-bewertung. Suchmaschinen benötigen diese Textbeschreibungen, um Bilder thematisch einzuordnen und in der Bildersuche auszuspielen. Barrierefreiheit und Sichtbarkeit gehen hier Hand in Hand.

Was für statische Bilder gilt, gilt für Videos erst recht. Ein eingebettetes Video ohne begleitende Textelemente ist für Suchmaschinen unsichtbar und für einen erheblichen Teil der Nutzenden nur eingeschränkt zugänglich. Dabei sind die Maßnahmen überschaubar, wenn man sie von Anfang an mitdenkt.

Der wichtigste Baustein ist der Untertitel. Für gehörlose und schwerhörige Menschen ist er die einzige Möglichkeit, gesprochene Inhalte eines Videos zu erfassen. Darüber hinaus nutzen ihn viele Sehende situationsbedingt im Büro ohne Kopfhörer, in lauter Umgebung, oder weil das Verstehen von Dialekten und schnellem Sprechtempo leichter fällt, wenn der Text mitläuft.

Ein wichtiger Unterschied, der oft untergeht, ist der zwischen Untertiteln und Close Captions. Untertitel übertragen nur den gesprochenen Text. Closed Captions gehen weiter und beschreiben zusätzlich relevante Geräusche und akustische Informationen, zum Beispiel „[Telefon klingelt]“. Für Menschen, die rein auf den Text angewiesen sind, ist dieser Unterschied erheblich. Die WCAG empfehlen für aufgezeichnete Videos auf Level AA Untertitel unbedingt.

Ein Transkript ist die vollständige Textversion eines Videos. Es hilft sowohl Menschen, die weder hören noch sehen können, und gleichzeitig allen, die Inhalte lieber lesen als schauen. Für Suchmaschinen ist es ebenfalls hilfreich, weil gesprochene Inhalte ohne Transkript nicht indexiert werden. Wer ein fünfminütiges Erklärvideo ohne Text veröffentlicht, verschenkt damit SEO-Potenzial, das mit wenig Aufwand gehoben werden könnte.

Für Videos, die wesentliche Informationen nur visuell transportieren, also durch Grafiken, Gestik oder Bildschirminhalte, braucht es eine Audiodeskription. Das ist eine gesprochene Beschreibung dessen, was zu sehen ist. Das ist der aufwändigste Schritt, aber für Nutzende, die das Bild nicht wahrnehmen können, der entscheidende.

Die WCAG empfehlen übrigens, Autoplay grundsätzlich zu vermeiden oder zumindest sicherzustellen, dass Nutzende das Video pausieren können. Automatische Untertiteln, dieYouTube, Vimeo und viele andere Plattformen anbieten, sind gute Ausgangspunkte, machen allerdings Fehler, besonders bei Fachbegriffen, Namen und schnellem Sprechen. Wer automatische Untertitel veröffentlicht, ohne sie zu prüfen, riskiert sinnentstellende Fehler, die das Gegenteil von Barrierefreiheit erzeugen.

Barrierefreiheit wird oft als technische Pflichtübung wahrgenommen, als etwas, das man erledigt, um gesetzliche Vorgaben zu erfüllen. Das greift zu kurz. Wir finden ein Prinzip aus der Stadtplanung erklärt es ganz gut. Der Curb-Cut-Effekt bezeichnet die Beobachtung, dass abgesenkte Bordsteinkanten, die für Rollstuhlfahrende gebaut wurden, letztlich von allen genutzt werden – von Eltern mit Kinderwagen, Radfahrenden, Menschen mit schwerem Gepäck. Was für eine spezifische Gruppe gedacht war, verbessert die Erfahrung für alle. Das lässt sich auch auf digitale Inhalte übertragen.

Grafik mit grauen Personen-Silhouetten: eine große Gruppe aus Erwachsenen, Kindern und einer Person im Rollstuhl hält Hände, darunter Personen mit Fahrrad, Kinderwagen, Rollkoffer und Schubkarre – Sinnbild für den Curb-Cut-Effekt, von dem unterschiedliche Menschen gleichermaßen profitieren.

Eine barrierefrei gestaltete Website ist eine bessere Website, für jeden. Klare Struktur, lesbare Schrift, funktionierende Navigation auf jedem Gerät. Das sind Qualitätsmerkmale, keine Sonderleistungen. Und die Vorteile, die daraus entstehen, gehen weit über Inklusion hinaus.

Größere Zielgruppe, mehr potenzielle Kunden

In Deutschland bevorzugen Millionen Menschen barrierefreie digitale Angebote und kaufen oder buchen im Zweifel dort, wo ihre Bedürfnisse berücksichtigt werden.

Dazu kommt ein struktureller Trend, der in seiner wirtschaftlichen Bedeutung unterschätzt wird: der demografische Wandel. Ältere Menschen bringen häufig besondere Nutzungsanforderungen mit wie nachlassende Sehkraft, eingeschränkte Motorik oder eine geringere Vertrautheit mit komplexen Interaktionsmustern. Gleichzeitig verfügen sie im Durchschnitt über eine deutlich höhere Kaufkraft als jüngere Altersgruppen. Was Ökonomen als „Silver Economy“ bezeichnen, ist für Webseitenbetreiber ein konkreter Hinweis. Wer gut lesbare Schriften und klare Navigation bietet, öffnet sich einer Zielgruppe mit erheblichem Umsatzpotenzial.

SEO-Vorteil: Google liest wie ein Screenreader

Der Zusammenhang zwischen Barrierefreiheit und Suchmaschinenoptimierung ist kein Zufall. Suchmaschinen erschließen Webinhalte auf eine Weise, die der eines Screenreaders sehr ähnelt. Sie lesen den Quellcode, werten Überschriftenstrukturen aus, analysieren Alternativtexte für Bilder und bewerten die semantische Klarheit des HTMLs. Wer seine Website barrierefrei gestaltet, liefert Google und Co. also genau das, was Suchmaschinen brauchen, um Inhalte korrekt einzuordnen und gut zu ranken.

Strukturierte Überschriften von H1 bis H3, präzise Alt-Texte, sauberer HTML-Code und Transkripte für Videoinhalte verbessern gleichzeitig die Zugänglichkeit für Menschen mit Einschränkungen und die Sichtbarkeit in Suchmaschinen. Zwei Ziele, eine Maßnahme.

Weniger Abbrüche, mehr Abschlüsse

Eine barrierefrei gestaltete Seite ist eine gut bedienbare Seite, und das wirkt sich direkt auf die Conversion-Rate aus. Wenn ein Buchungstool schwer zu navigieren ist, ein Formular keine klaren Fehlermeldungen liefert oder ein Bezahlprozess auf dem Smartphone hakelt, springen Nutzer oft ab.

Eine intuitive, barrierefreie Benutzerführung reduziert diese Frustrationsgrenzen. Besucher schließen Kauf- oder Buchungsprozesse schneller und erfolgreicher ab. Der Effekt ist messbar und betrifft nicht nur Menschen mit Einschränkungen, sondern jeden Nutzer, der unter Zeitdruck, auf einem kleinen Bildschirm oder in einer abgelenkten Situation agiert.

Rechtssicherheit: Das BFSG ist seit Juni 2025 in Kraft

Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) nahezu alle Unternehmen, die digitale Produkte oder Dienstleistungen für Verbraucher anbieten, zur Einhaltung von Barrierefreiheitsstandards. Betroffen sind unter anderem Online-Shops, Buchungsportale, Bankdienstleistungen und Transportangebote. Die Anforderungen orientieren sich an der europäischen Norm EN 301 549 und damit am WCAG-Level AA.

Wer diese Vorgaben ignoriert, riskiert Abmahnungen, Bußgelder und den Aufwand, Nachbesserungen unter Zeitdruck und zu höheren Kosten durchführen zu müssen. Barrierefreiheit ist in diesem Kontext keine freiwillige Investition mehr, sondern eine Frage der Rechtssicherheit.

Markenimage und gesellschaftliche Verantwortung

Unternehmen, die sich aktiv für Inklusion einsetzen, stärken ihr öffentliches Ansehen. Das zieht sozial verantwortlich denkende Kundinnen und Kunden an und ist gleichzeitig ein Argument im Employer Branding. Barrierefreie interne Systeme und eine erkennbar inklusive Außendarstellung machen ein Unternehmen für Bewerberinnen und Bewerber attraktiver, besonders in einem Arbeitsmarkt, in dem Haltung und Unternehmenskultur bei der Arbeitgeberwahl zunehmend mehr Gewicht bekommen.

Sauberer Code, geringere Langzeitkosten

Ein oft übersehener wirtschaftlicher Vorteil liegt in der technischen Qualität barrierefrei gebauter Websites. Barrierefreiheit erfordert standardisierten, korrekten HTML-Code, also Code, der klar beschreibt, was ein Element bedeutet und nicht nur, wie es aussieht. Solche Seiten sind flexibler, laden schneller und lassen sich leichter auf neue Endgeräte, Browser oder technische Anforderungen anpassen. Updates werden einfacher. Fehlerquellen werden seltener. Die langfristigen IT- und Wartungskosten sinken.

Was sich hier wie ein technisches Detail liest, hat in der Praxis spürbaren Einfluss darauf, wie viel Zeit und Geld in die laufende Pflege einer Website fließt.

Barrierefreie Textstrukturen klingen nach technischem Detail, sind in Wahrheit aber eine Frage der Haltung, Wer seine Inhalte für alle zugänglich macht, zeigt Respekt vor seiner Zielgruppe und stärkt gleichzeitig die eigene Sichtbarkeit. Wir planen bei Webseiten Struktur, Lesbarkeit und SEO von Anfang an mit und erstellen Inhalte, die Menschen und Suchmaschinen gleichermaßen lesen. Sprecht uns gern an, wenn ihr eure Inhalte barrierefrei und sichtbar zugleich gestalten möchtet.

Comments

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert