Was Screenreadern hilft, hilft auch Suchmaschinen

Ein Muster begegnet uns bei Handwerks- und Ladenseiten immer wieder. Die Startseite sieht aufgeräumt aus, oben steht der Firmenname groß und fett, darunter ein Foto aus der Werkstatt. Im Quelltext ist diese große Zeile aber keine Überschrift, sondern ein div mit größerer Schrift, und das Foto trägt noch den Dateinamen aus der Kamera. Ein Screenreader liest auf so einer Seite eine Wand aus Text ohne Gliederung vor und meldet beim Bild nur die Zeichenkette IMG_4831. Eine Suchmaschine findet auf derselben Seite ebenfalls keine Zeile, die das Thema benennt.

Wie oft das vorkommt, haben wir gemessen und nicht geschätzt. Auf 29,4 Prozent der 14.984 von uns geprüften Seiten fehlt die Hauptüberschrift, auf 16,7 Prozent fehlen Alternativtexte. Beides sind gleichzeitig Barrieren und verschenkte Signale für Suchmaschinen. Fast jede dritte Seite kommt also ohne die eine Zeile aus, die sagt, worum es hier überhaupt geht, und auf jeder sechsten bleiben Bilder für Software stumm.

Daraus lässt sich leicht ein zu großer Satz machen, und der kursiert auch überall. Barrierefreiheit sei gut fürs Ranking, heißt es dann. Die Überschneidung gibt es wirklich, aber sie ist kleiner und viel konkreter, als der Satz klingt. Sie liegt genau dort, wo Menschen und Maschinen dieselbe Information aus deinem Quelltext ziehen.

Die vier Stellen, an denen sich beides wirklich trifft

Die Überschriftenstruktur

Wer mit einem Screenreader arbeitet, springt von Überschrift zu Überschrift, so wie du mit den Augen über eine Seite fliegst. Gibt es keine Überschriften, sondern nur größer gesetzte Absätze, fällt dieser Sprung weg und die Seite muss von oben nach unten durchgehört werden. Dieselbe Gliederung wertet eine Suchmaschine mit aus, wenn sie einordnet, welcher Text zu welchem Thema gehört und welcher Abschnitt eine Frage beantwortet. Du brauchst dafür genau eine h1 pro Seite, darunter h2 für die Hauptabschnitte und darunter h3, ohne eine Ebene zu überspringen.

Alternativtexte

Ein Alternativtext beschreibt in einem normalen Satz, was auf dem Bild passiert. Er wird vorgelesen, wenn jemand nicht sieht, und er wird angezeigt, wenn das Bild nicht lädt. Google nennt ihn in seiner Dokumentation zur Suchmaschinenoptimierung außerdem als eine Quelle dafür, worum es auf einem Bild geht. Ein Alternativtext aus aneinandergereihten Suchbegriffen erfüllt beide Aufgaben schlecht, weil er vorgelesen wie eine Kleinanzeige klingt. Ein Satz wie Werkstattraum mit vier aufgebockten Rädern vor einer Werkzeugwand erfüllt beide gut.

Linktexte

Screenreader können sich alle Links einer Seite als Liste ausgeben lassen. Steht dort fünfzehnmal das Wort "hier" untereinander, ist diese Liste wertlos. Auch eine Suchmaschine wertet den verlinkten Text als Hinweis darauf, was auf der Zielseite steht, und lernt aus "hier" ebenfalls nichts. Ein einziger Handgriff repariert beides, indem du in den Link hineinschreibst, wohin er führt, und den erklärenden Rest davor oder dahinter stehen lässt.

Semantische Auszeichnung

Ein button, der wirklich ein button ist, lässt sich mit der Tastatur erreichen und wird als Schaltfläche angesagt. Eine Navigation in nav, der Hauptinhalt in main, eine Tabelle mit echten th-Zellen, das sind Angaben darüber, welche Rolle ein Element spielt. Assistive Technik liest diese Rollen aus, und Programme, die den eigentlichen Inhalt einer Seite vom Beiwerk trennen wollen, orientieren sich an denselben Elementen. Eine Seite aus lauter div-Elementen zwingt beide zum Raten.

Was nur der Barrierefreiheit nützt

Ein ehrlicher Text muss auch die andere Hälfte nennen. Der größere Teil der Arbeit an einer barrierefreien Seite taucht in keiner Rangliste auf und wird von keiner Suchmaschine belohnt.

Dass sich das Menü ohne Maus mit der Tabulatortaste aufklappen und wieder schließen lässt.
Dass man sieht, wo der Tastaturfokus gerade steht, statt einem unsichtbaren Punkt zu folgen.
Dass Text und Hintergrund genug Kontrast haben, um bei Sonnenlicht oder mit schwächerem Sehen lesbar zu bleiben.
Dass ein Formularfehler als Satz danebensteht und nicht nur als roter Rahmen erscheint.
Dass ein automatisch laufender Bildwechsler angehalten werden kann.
Dass die Seite bei doppelter Schriftgröße bedienbar bleibt und nichts übereinanderliegt.

Für diese Punkte gibt es keine Belohnung von außen. Sie entscheiden nur darüber, ob jemand bei dir einen Termin buchen kann oder die Seite wieder verlässt.

Warum das Verkaufsargument trotzdem schiefliegt

Der Denkfehler steckt nicht in der Beobachtung, sondern in der Reihenfolge. Wer Barrierefreiheit als Suchmaschinentrick anfängt, hört genau dann auf, wenn das Attribut irgendwie ausgefüllt ist. Dann steht im Alternativtext eine Kette aus Ortsnamen und Suchbegriffen, und die Überschriften werden nach Begriffen sortiert statt nach Inhalt. Am Ende hat die Seite alle Häkchen und ist trotzdem unbenutzbar.

Dazu kommt ein zweiter Effekt. Rankings bewegen sich langsam und aus vielen Gründen gleichzeitig. Wenn du die Arbeit mit einer Position begründest und diese Position drei Monate später unverändert ist, wirkt die ganze Sache wie ein Fehlschlag, obwohl deine Seite objektiv besser geworden ist. Das bessere Argument liegt viel näher, denn Menschen, die vorher nicht durchkamen, kommen jetzt durch. Dass die Maschinen dieselben vier Stellen lesen, ist ein angenehmer Nebeneffekt und kein Geschäftsmodell.

Ein Handgriff, der beides zugleich verbessert

Nimm dir den obersten Bereich deiner Startseite vor, das ist die Stelle mit der größten Wirkung pro Minute. In vielen Baukästen sieht er so aus, wenn die Überschrift einfach per Klick vergrößert wurde:

<div class="hero">
  <div class="big-title">Fahrradwerkstatt Kastel</div>
  <img src="IMG_4831.jpg">
  <p>Unsere Preise und Öffnungszeiten findest du <a href="/preise">hier</a>.</p>
  <div class="btn" onclick="termin()">Termin</div>
</div>

Und so sieht derselbe Bereich nach vier Änderungen aus, die zusammen keine zehn Minuten dauern:

<section class="hero">
  <h1>Fahrradwerkstatt in Mainz-Kastel</h1>
  <img src="IMG_4831.jpg"
       alt="Werkstattraum mit vier aufgebockten Rädern vor einer Werkzeugwand">
  <p>Hier findest du <a href="/preise">Preise und Öffnungszeiten</a>.</p>
  <button type="button" onclick="termin()">Termin buchen</button>
</section>

Aus dem gestylten div ist die Hauptüberschrift geworden, das Bild hat einen Satz bekommen, und der Linktext sagt selbst, wohin er führt. Die Schaltfläche ist jetzt eine echte Schaltfläche, die du mit der Tabulatortaste ansteuerst und mit Leertaste oder Eingabetaste auslöst, ohne dafür zusätzliches JavaScript zu schreiben. Ein Sonderfall bleibt übrig. Rein dekorative Bilder wie ein Trennstrich oder ein Farbverlauf bekommen ein leeres alt="". Dann werden sie beim Vorlesen übersprungen, statt den Lesefluss mit einem Dateinamen zu stören.

Der Selbsttest in zwei Minuten

Das musst du mir nicht glauben, das kannst du an deiner eigenen Seite nachsehen. Du brauchst dafür nur den Browser, den du sowieso offen hast.

Öffne deine wichtigste Seite, meistens ist das die Startseite.
Drücke Strg und U, auf dem Mac Cmd, Alt und U. Es öffnet sich der Quelltext.
Drücke Strg und F und suche nach <h1. Der Browser zeigt dir die Trefferzahl. Genau ein Treffer ist der Normalfall, null ist ein klarer Befund, und ab zwei lohnt der Blick, ob die Seite wirklich zwei gleichrangige Themen behandelt.
Suche im selben Fenster nach <img und merke dir die Zahl. Suche danach nach alt=. Liegt die zweite Zahl darunter, fehlen Alternativtexte. Der Abgleich ist grob, er reicht aber, um zu sehen, ob du ein Problem hast.
Geh zurück auf die normale Ansicht, drücke wieder Strg und F und suche nach hier und nach mehr. Der Browser findet die Wörter auch mitten in anderen Wörtern, dich interessieren nur die Treffer, die als Link formatiert sind.
Drücke zum Schluss fünfmal die Tabulatortaste und schau, ob du jedes Mal erkennst, wo du gerade stehst.

Was du realistisch davon hast

Die vier Stellen aus diesem Text sind an einem Nachmittag erledigt und bleiben danach jahrelang richtig, weil sie im Grundgerüst der Seite stecken und nicht in einer Einstellung, die beim nächsten Update verlorengeht. Was sie dir bringen, lässt sich nicht als Prozentzahl versprechen. Sichtbar wird es an anderer Stelle, etwa an Suchergebnissen, in denen dein eigener Text als Auszug erscheint statt einer zufälligen Zeile aus dem Fußbereich, an Bildern, die überhaupt gefunden werden, und an Menschen, die mit Tastatur oder Vorlesefunktion bis zum Kontaktformular durchkommen. Wenn du danach weitermachen willst, sind genau diese Formulare der nächste Ort, an dem am meisten hängenbleibt, und dort hilft dir keine Suchmaschine mehr weiter.