Barrierefreiheit und SEO: Korrekturen mit Doppelwirkung

Barrierefreiheit wird häufig als Compliance budgetiert. Damit landet sie in derselben Warteschlange wie die Erneuerung von Versicherungen: notwendig, unbeliebt und aufgeschoben, bis etwas zum Handeln zwingt. Diese Sicht übersieht den Teil der Arbeit, der sich zweimal bezahlt macht, einmal bei der Conversion und einmal in der Suche.

Die Überschneidung ist kein Zufall. Ein Screenreader und ein Suchmaschinen-Crawler erledigen dieselbe Aufgabe. Beide erfassen eure Seite, ohne sie zu sehen. Beide sind vollständig auf die Struktur und die Texte im Markup angewiesen. Eine Seite, die für den einen schwer zugänglich ist, ist es meist auch für den anderen.

Wo Barrierefreiheit und SEO dieselbe Arbeit sind

Überschriftenstruktur. Menschen mit Screenreader navigieren, indem sie zwischen Überschriften springen. Deshalb braucht eine Seite eine H1 und eine schlüssige Gliederung aus H2 und H3. Suchmaschinen nutzen dieselbe Struktur, um das Thema einer Seite zu verstehen und einzelne Passagen Fragen zuzuordnen. Wenn Überschriften nur nach Schriftgröße gewählt wurden, was bei vielen Websites ohne Designsystem passiert, lesen beide Zielgruppen eine flache Wand.

Aussagekräftige Linktexte. “Mehr lesen” sagt einem Screenreader-Nutzer nichts, wenn er sich eine Liste aller Links auf der Seite ausgeben lässt. Das ist eine übliche Art der Navigation. Auch eine Suchmaschine erfährt dadurch nichts über das Linkziel. Der Linktext ist eines der klarsten Signale zum Inhalt der Zielseite. “Hier klicken” verschenkt dieses Signal.

Alternativtexte für Bilder. Sie werden für Menschen geschrieben, die ein Bild nicht sehen können. Die Bildersuche liest sie aus genau demselben Grund. Ein Diagramm mit wichtigen Informationen und leerem Alt-Attribut bleibt für beide unsichtbar.

Semantisches Markup. Ein echtes <button>-Element kündigt sich als Schaltfläche an, ist per Tastatur erreichbar und funktioniert ohne JavaScript. Ein optisch wie eine Schaltfläche gestaltetes <div> kann nichts davon. Ein Crawler, der eurem Conversion-Pfad folgt, trifft auf dieselbe Barriere.

Ladezeit und Layoutstabilität. Inhalte, die beim Laden springen, irritieren alle und können Menschen mit motorischen oder kognitiven Einschränkungen die Nutzung unmöglich machen. Sie sind zugleich ein direkt gemessenes Rankingsignal.

Keiner dieser Punkte verlangt einen Kompromiss. Eine saubere Umsetzung löst mit derselben Arbeit Probleme für beide Zielgruppen.

Wo sich Barrierefreiheit stattdessen mit Conversion überschneidet

Eine andere Gruppe von Korrekturen hat keine Wirkung auf die Suche. Sie zeigt sich in eurer Conversion-Rate.

Kontrastverhältnisse sollen sicherstellen, dass Menschen mit eingeschränktem Sehvermögen Texte lesen können. Sie entscheiden auch darüber, ob irgendjemand eure Handlungsaufforderung auf einem Smartphone bei Tageslicht erkennt. Der häufigste Fehler, den wir sehen, ist eine Markenfarbe für kleine Schrift mit einem Kontrastverhältnis um 4:1. Sie besteht weder den Praxistest noch die Anforderungen des Standards.

Formularbeschriftungen sind für Screenreader nötig. Sie verhindern auch, dass sehende Nutzer raten müssen, was ein Feld verlangt, nachdem der Platzhalter mit dem ersten Tastendruck verschwunden ist. Formulare, die nur Platzhalter verwenden, führen nachweislich zu mehr Fehlern. Die Fehlerquote eines Formulars ist die Conversion-Rate unter einem anderen Namen.

Sichtbare Fokuszustände sind für Tastaturnutzer gedacht. Sie zeigen auch allen anderen, die sich mit der Tabulatortaste durch einen Checkout bewegen, wo sie gerade sind. Den Fokusring zu entfernen, weil er unordentlich wirkte, gehört zu den teuersten kleinen Entscheidungen im Webdesign.

Ausreichend große Touch-Ziele helfen Menschen mit eingeschränkter Feinmotorik. Sie verhindern zugleich die Fehleingaben, die mobile Formulare für alle frustrierend machen.

Etwa ein Drittel einer typischen Prüfung auf Barrierefreiheit besteht aus Arbeit, die ihr für eine bessere Conversion ohnehin erledigen würdet. Ein weiteres Drittel hilft der Suche. Setzt diese beiden Drittel zuerst um, dann finanziert sich das Programm, bevor ihr die Teile ohne direkte kommerzielle Wirkung erreicht.

Wo die Überschneidung endet und wie ihr dort argumentiert

Ein Teil der Arbeit dient tatsächlich der Compliance und hat keinen direkten kommerziellen Vorteil. Etwas anderes zu behaupten, schwächt eure Argumentation gegenüber den Menschen, die das Budget freigeben.

Die vollständige Tastaturbedienung einer komplexen interaktiven Komponente, korrektes ARIA bei einem individuellen Widget, Untertitel und Transkripte für Videos sowie Alternativen für reduzierte Bewegung benötigen echte Entwicklungszeit. Sie werden die Conversion-Rate nicht verändern.

Begründet diese Aufgaben auf der richtigen Grundlage. Es gibt ein rechtliches Risiko, das in den meisten Rechtsräumen steigt. Es gibt die Anforderungen in Ausschreibungen, weil öffentliche und große private Auftraggeber immer häufiger eine Konformitätserklärung verlangen. Fehlt sie, kann der Auftrag verloren sein, bevor jemand euer Angebot liest. Und es bleibt die einfache Tatsache, dass Menschen von eurer Website auszuschließen eine Entscheidung ist, die meist getroffen wurde, ohne sie zu bemerken.

Versucht nicht, das kommerzielle Argument auf dieses letzte Drittel auszudehnen. Begründet die beiden Drittel wirtschaftlich, bei denen es stimmt, setzt sie um und nutzt den sichtbaren Wert, um den nötigen Spielraum für den Abschluss zu schaffen.

Eine Reihenfolge, die funktioniert

Ordnet die Aufgaben nach Aufwand und gemeinsamem Nutzen, nicht nach der Reihenfolge im Prüfbericht.

1. Kontrast. Die günstigste Korrektur in der Liste, wirksam auf jeder Seite und sowohl im Audit als auch in einem Conversion-Test messbar. Mit einem tokenbasierten Designsystem sind es meist wenige Änderungen. Ohne Designsystem kann es einen langen Nachmittag dauern.
2. Fokuszustände. Eine Änderung im Stylesheet stellt die Tastaturnavigation auf der gesamten Website wieder her.
3. Formularbeschriftungen und Fehlermeldungen. Klar begrenzte Arbeit mit direkter Wirkung auf die Conversion. Zugleich verschwindet eure wirtschaftlich wichtigste Seite aus der Fehlerliste.
4. Überschriftenstruktur. Verbessert die Barrierefreiheit und gibt Suchmaschinen eine echte Gliederung. Am besten korrigiert ihr die Templates statt jede Seite einzeln, damit das Problem dauerhaft gelöst bleibt.
5. Linktexte und Alt-Attribute. Das ist redaktionelle statt technische Arbeit und kann parallel zu den vorherigen Punkten laufen.
6. Tastaturpfade durch interaktive Komponenten. Der teure Teil. Beginnt mit den Komponenten, die auf dem Conversion-Pfad liegen.

Die ersten drei Punkte lassen sich meistens in einer Woche erledigen. Sie verändern euren Auditwert stärker als alles andere auf der Liste. Und ihr könnt genau auf sie zeigen, wenn jemand fragt, was das Budget bewirkt hat.

Testet mit den Werkzeugen, die eure Besucher nutzen

Automatische Prüfwerkzeuge finden vielleicht ein Drittel der tatsächlichen Probleme. Sie gehören in euren Build, damit Regressionen deutlich auffallen. Ob eure Website wirklich nutzbar ist, können sie euch nicht sagen.

Drei manuelle Prüfungen finden einen großen Teil dessen, was den Werkzeugen entgeht. Für keine davon braucht ihr einen Spezialisten:

Zieht die Maus ab und schließt euren wichtigsten Conversion-Pfad nur mit der Tastatur ab. Wenn ihr stecken bleibt oder nicht mehr wisst, wo ihr seid, geht es allen Menschen so, die auf diese Weise navigieren.

Aktiviert den bereits auf eurem Computer installierten Screenreader und hört euch eine Seite an. Das ist beim ersten Mal ungewohnt. Es ist zugleich der schnellste Weg zu hören, dass eure Überschriften nur Dekoration sind und alle Links “Mehr lesen” heißen.

Vergrößert die Seite auf 200 Prozent. Der Text sollte neu umbrechen, statt horizontales Scrollen zu erzwingen. Dieser Test findet Layoutannahmen, die kein automatisches Werkzeug meldet.

Jede dieser drei Prüfungen deckt auch Probleme auf, die nichts mit einer Behinderung zu tun haben und alles damit, ob eure Website funktioniert. Genau darin liegt das Argument. Niemand muss davon überzeugt werden, dass Compliance interessant ist.