Barrierefreiheit im Web ist kein Gegensatz zu SEO - beides fördert sich gegenseitig. Was Screenreader für blinde Nutzer lesbar macht, macht es auch für Google's Crawler verständlich. Alt-Texte, semantisches HTML und korrektes ARIA-Markup verbessern gleichzeitig Accessibility-Score und SEO-Signale.
Warum Barrierefreiheit SEO verbessert
Gemeinsame Grundlage: Sowohl Screenreader als auch Suchmaschinen-Crawler können kein JavaScript rendern (oder nur eingeschränkt) und verlassen sich auf gut strukturiertes HTML. Eine für Screenreader zugängliche Seite ist fast automatisch für Crawler zugänglich.
Nutzermetriken: Nutzer die barrierefreie Seiten besuchen, finden Informationen schneller und verlassen die Seite weniger oft ohne Interaktion. Niedrigere Absprungraten und höhere Verweildauer sind positive Signale.
Core Web Vitals: Viele Accessibility-Verbesserungen (keine layout-shiftenden Bilder, kein FOIT, semantische Struktur) haben direkte Performance-Auswirkungen.
Google's John Mueller bestätigte mehrfach dass semantisch korrektes HTML ein qualitatives Signal ist das Google bei der Bewertung von Seiteninhalten berücksichtigt - barrierefreies Markup ist daher doppelt wertvoll: für Nutzer und für Rankings.
Alt-Texte: Basics und Best Practices
Alt-Texte sind die wichtigste Überschneidung von Accessibility und SEO:
Für inhaltliche Bilder:
<!-- Schlecht: -->
<img src="team.jpg" alt="Bild">
<!-- Gut: -->
<img src="team.jpg" alt="Das SEOFX Team bei der Arbeit in unserem Nürnberger Büro">Für dekorative Bilder:
<!-- Dekorative Bilder leer lassen (Screenreader überspringt sie): -->
<img src="trennlinie.png" alt="">Für Icons mit Text-Label:
<!-- Icon neben beschriftetem Button: kein Alt-Text nötig -->
<button>
<img src="send-icon.svg" alt="">
Nachricht senden
</button>Alt-Text-Länge: Beschreibend aber prägnant. 125 Zeichen als Richtlinie (Screenreader-Limit), für SEO dürfen Alt-Texte länger sein aber nicht keyword-gestopft.
Semantisches HTML: Struktur für Crawler und Screenreader
Überschriften-Hierarchie:
<!-- Korrekt: logische Hierarchie -->
<h1>SEO-Agentur Nürnberg</h1>
<h2>Unsere Leistungen</h2>
<h3>Local SEO</h3>
<h3>OnPage SEO</h3>
<h2>Über uns</h2>Semantische Landmark-Elemente:
<header> <!-- Seitenkopf -->
<nav> <!-- Navigation -->
<main> <!-- Hauptinhalt -->
<article> <!-- Eigenständiger Artikel -->
<aside> <!-- Ergänzender Inhalt -->
<footer> <!-- Seitenfuß -->Diese Elemente helfen Screenreadern zu navigieren und Crawlern den Seiteninhalt zu strukturieren.
Verwenden Sie <button> für interaktive Elemente und <a> für Links - nicht <div onclick> oder ähnliche Konstruktionen. Google's Crawler und Screenreader erkennen <button> und <a> als interaktiv. Selbstgebaute „Buttons" aus <div>-Elementen sind unsichtbar für Accessibility-Tools und werden von Crawlern schwächer bewertet.
ARIA: Wenn HTML nicht reicht
ARIA (Accessible Rich Internet Applications) ergänzt HTML wo semantische Tags nicht ausreichen:
aria-label: Beschriftung für Elemente ohne sichtbaren Text:
<!-- Schließen-Button ohne Text: -->
<button aria-label="Dialog schließen">×</button>
<!-- Icon-only Navigation: -->
<a href="tel:+4991291439894" aria-label="Anrufen">
<svg>...</svg>
</a>aria-describedby: Verbindet Elemente mit ihrer Beschreibung:
<input type="email"
aria-describedby="email-hilfe"
placeholder="ihre@email.de">
<p id="email-hilfe">Wir senden Ihnen eine Bestätigung an diese Adresse.</p>role: Für Elemente die eine bestimmte Funktion haben die HTML allein nicht ausdrückt:
<!-- Breadcrumb-Navigation: -->
<nav role="breadcrumb" aria-label="Sie befinden sich hier">
<ol>
<li><a href="/">Startseite</a></li>
<li><a href="/blog/">Blog</a></li>
<li aria-current="page">Aktueller Artikel</li>
</ol>
</nav>Farbkontrast und Core Web Vitals
Lesbarkeit: Schlechter Farbkontrast (z. B. hellgrauer Text auf weißem Hintergrund) erhöht die Absprungrate. Das Mindest-Kontrastverhältnis nach WCAG 2.1 ist 4,5:1 für normalen Text.
Focus-Indikatoren: Interaktive Elemente brauchen einen sichtbaren Focus-Rahmen für Tastaturnutzer. Viele Themes entfernen den Standard-Focus-Ring per CSS - das ist ein Accessibility-Fehler der auch Keyboard-SEO-Crawling beeinflussen kann.
Barrierefreiheit testen
- WAVE (wave.webaim.org): Kostenloser Online-Test für Accessibility-Fehler
- Lighthouse: In Chrome DevTools → Lighthouse → Accessibility - Score und konkrete Empfehlungen
- Screenreader-Test: NVDA (Windows, kostenlos) oder macOS VoiceOver testen
Ein hoher Lighthouse-Accessibility-Score belegt weder eine niedrigere Absprungrate noch echte Barrierefreiheit, denn der Test prüft nur, was sich maschinell entscheiden lässt. Was er findet, betrifft trotzdem die Nutzbarkeit für alle, etwa lesbare Kontraste und bedienbare Formulare.
Auch die Font-Loading-Optimierung hat Barrierefreiheits-Relevanz: unsichtbarer Text (FOIT) während des Ladens ist ein Problem für Screenreader und Nutzer. Mehr zu Performance und Technik finden Sie in unserem Artikel über Third-Party Scripts und SEO. Auch strukturierte Daten per Schema Markup helfen Suchmaschinen, Ihre Inhalte besser zu verstehen.
