SEO und Barrierefreiheit: Bringen Sie Ihre UX auf Vordermann

Veröffentlicht: 2023-09-21

Millionen von Menschen mit Behinderungen stoßen beim Zugang zu Online-Informationen und -Diensten auf Barrieren. Eine aktuelle WebAIM-Studie ergab, dass Menschen mit körperlichen, kognitiven, visuellen und auditiven Behinderungen bei einem von 21 Homepage-Elementen, mit denen sie interagieren, mit Barrierefreiheitsfehlern rechnen müssen.

Die gute Nachricht ist, dass die Verbesserung der Barrierefreiheit keine anstrengende Aufgabe ist, wenn sie zusammen mit SEO-Best Practices umgesetzt wird. Suchmaschinenoptimierung (SEO) und Website-Barrierefreiheit haben gemeinsame Ziele. Das bedeutet, dass Sie den Zugriff erweitern und die Suchsichtbarkeit verbessern können, indem Sie optimale Erlebnisse für alle Benutzer schaffen.

Die Bedeutung einer barrierefreien Website

Viele Aktivitäten finden in Online-Bereichen statt – Lernen, Einkaufen, Bankgeschäfte und Terminvereinbarungen. Es ist wichtig, dass digitale Umgebungen genauso zugänglich sind wie physische. Wenn Ihre Website für unterstützende Technologien und alternative Interaktionsmöglichkeiten optimiert ist, vergrößern Sie Ihre Marktreichweite, öffnen Ihr Unternehmen für alle und demonstrieren Inklusivität und Gerechtigkeit.

Gemäß Titel III des Americans with Disabilities Act (ADA) müssen Unternehmen „vollen und gleichberechtigten Genuss“ ihrer Waren, Dienstleistungen, Privilegien und Vorteile gewährleisten. Das US-Justizministerium interpretiert dies so, dass es auch im Internet angebotene Dienste einschließt.

Es besteht ein wachsendes Risiko rechtlicher Schritte gegen Unternehmen mit Websites, die nicht ADA-konform sind. Im Jahr 2022 gab es vor US-Bundesgerichten 3.255 Klagen wegen Barrierefreiheit von Websites nach ADA Title III, ein Anstieg gegenüber 814 Fällen im Jahr 2017.

Beeinflusst Barrierefreiheit die Suchmaschinenoptimierung?

Wenn Sie Barrierefreiheitsfunktionen implementieren, die Menschen mit Behinderungen die Interaktion mit Ihrer Website ermöglichen, helfen Sie Suchmaschinen dabei, Ihre Website besser zu verstehen und sie genauer zu indizieren.

Industriestandards für die Barrierefreiheit von Websites sind in den Web Content Accessibility Guidelines (WCAG) festgelegt, die vom World Wide Web Consortium (W3C) veröffentlicht werden. SEO-Vermarkter können diesen Leitfaden nutzen, um technische Elemente wie Farbkontrast, Bild-Alternativtext und Navigation anzugehen und so ein gleichwertiges Online-Erlebnis für alle zu schaffen, unabhängig von ihren Fähigkeiten.

Ist Barrierefreiheit ein Rankingfaktor?

Die Barrierefreiheit einer Website ist kein direkter Faktor für das Suchmaschinenranking. Allerdings stimmen Websites, die für alle Nutzer optimiert sind, eher mit den Ranking-Faktoren von Google überein und landen weiter oben in den Suchergebnissen.

Viele Barrierefreiheitsfunktionen sind mit SEO verknüpft, etwa XML- und HTML-Sitemaps, Lesbarkeit, Videountertitel und Core Web Vitals. Je mehr Elemente Sie erfüllen können, desto besser ist das Ranking Ihrer Website.

Beispielsweise wird eine Website mit gesunden Core Web Vitals schnell geladen und stabilisiert und reagiert schnell auf Benutzerinteraktionen für ein optimales Erlebnis. Das Endergebnis? Google ermutigt Entwickler, barrierefreie Produkte zu entwickeln, daher ist es wichtig, dem Beispiel des Suchgiganten zu folgen.

Möglichkeiten zur Integration von Barrierefreiheit und SEO

In diesem nächsten Abschnitt werde ich einige SEO-Barrierefreiheitsstrategien hervorheben, die Ihre Website für Menschen mit Behinderungen und Suchmaschinen hilfreicher machen können.

Website-Design und UX

Google berücksichtigt in seinen Rankings zunehmend die Benutzererfahrung, sodass eine Website mit zugänglicher SEO bessere Chancen auf ein gutes Ranking hat. Sie verringern die Absprungrate und fördern das Engagement der Besucher, wenn Benutzer mit Behinderungen nahtlos mit Ihrer Website interagieren können.

Verbessern Sie das Website-Design durch:

  • Website-Elemente einfach halten.
  • Vermeiden Sie langsam ladende Bilder, Interstitials und blinkende Inhalte.
  • Bietet hohen Farbkontrast und eine gut lesbare Schriftart und -größe.
  • Text linksbündig ausrichten.
  • Erstellen einer logischen Site-Architektur und intuitiver Navigation.
  • Verwenden Sie beschreibende und klare Überschriften.
  • Vermeiden Sie Farbe, um Informationen hervorzuheben.
  • Bereitstellung alternativer Möglichkeiten zum Navigieren auf einer Website und zum Konsumieren von Inhalten.

XML- und HTML-Sitemaps

Eine Sitemap stellt einen Link zu jeder Seite einer Website bereit und gibt Suchmaschinen einen umfassenden Überblick darüber, wie Inhalte zum Crawlen und Indexieren organisiert sind. Sitemaps bieten auch eine wichtige alternative Navigationsmethode für Benutzer mit Behinderungen, die es ihnen ermöglichen, relevante Webseiten schnell von einem Ort aus zu durchsuchen und zu finden.

Organisieren Sie Ihre Sitemap nach Abschnitten und Unterabschnitten, um die Hierarchie der Website anzuzeigen, und überarbeiten Sie sie jedes Mal, wenn eine Seite hinzugefügt, verschoben oder gelöscht wird, um sicherzustellen, dass keine toten Links oder fehlenden Seiten vorhanden sind.

Navigation

Eine einfach zu navigierende Website ist für die Barrierefreiheit von entscheidender Bedeutung, da Benutzer frustriert sein können, wenn sie Inhalte mit Hilfsmitteln nicht finden oder nicht darauf zugreifen können. Die Navigation wirkt sich auch auf die Suchmaschinenoptimierung aus, da Suchmaschinen Links folgen, um neue Seiten zu entdecken und zu indizieren.

So optimieren Sie die Architektur Ihrer Website:

  • Platzieren Sie die Navigation an vertrauten Orten, wo Benutzer sie erwarten.
  • Verwenden Sie aussagekräftige Beschriftungen, die deutlich machen, wohin die Links Sie führen.
  • Bieten Sie Optionen für die Tastaturnavigation für diejenigen, die keine Maus verwenden können.
  • Fügen Sie Abschnittslinks auf Seiten mit viel Inhalt hinzu, um die Navigation zu beschleunigen.
  • Stellen Sie sicher, dass die Links groß genug sind, damit Benutzer problemlos darauf klicken können.
  • Testen Sie die Navigation, um Probleme zu identifizieren, bevor Sie die Website starten.
  • Stellen Sie sicher, dass die Tab-Reihenfolge richtig eingestellt ist.

Semmelbrösel

Bei der Breadcrumb-Navigation handelt es sich um eine seitenspezifische Navigation, die horizontal oben auf einer Seite angezeigt wird. Es zeigt, wo sich eine Seite im Verhältnis zu den übergeordneten Seiten befindet, und ist nützlich, um Benutzer auf komplexe Websites aufmerksam zu machen, insbesondere auf diejenigen, die über die Suche auf einer Kategorieseite landen und nicht auf der Startseite. Benutzer können auch direkt von der Seite aus schnell zu Seiten weiter oben in der Hierarchie navigieren.

Für SEO-Zwecke zeigt die Breadcrumb-Navigation Suchmaschinen, wie Seiten miteinander verknüpft sind. Übergeordnete Seiten können über den internen Link auch Link-Equity mit einer untergeordneten Seite teilen und so die Autorität für das Ranking verbessern.

Für eine effektive Breadcrumb-Navigation:

  • Verwenden Sie in Ihren Breadcrumbs visuelle Trennzeichen, z. B. einen Schrägstrich oder ein Größer-als-Zeichen. Fügen Sie den Breadcrumb mithilfe von CSS hinzu, damit Screenreader das visuelle Trennzeichen nicht ankündigen.
  • Implementieren Sie strukturierte Daten, damit die Breadcrumb-Navigation in den Suchergebnissen angezeigt wird. Dadurch erfahren Suchende, wo auf einer Website sie landen, wenn sie auf ein Snippet klicken.

Seitentitel

Seitentitel fassen den Zweck oder Inhalt einer Webseite zusammen. Sie erscheinen oft als:

  • Anklickbare Links in Suchmaschinenergebnissen.
  • Namen geöffneter Tabs in einer Browserleiste.
  • Standardtitel der mit Lesezeichen versehenen Seiten.
  • Titel des anklickbaren Bildblocks in Social-Media-Links.

Suchmaschinen verwenden HTML-Titel-Tags, um für die Indexierung zu verstehen, worum es auf einer Seite geht. Screenreader kündigen Seitentitel an, damit Benutzer eine relevante Seite finden oder wissen, welche Seite sie verwenden.

Um einen Titel-Tag für Barrierefreiheits-SEO zu optimieren, erstellen Sie einen hilfreichen Seitentitel, der:

  • Beschreibt die Seite genau.
  • Integriert natürlich Ihr Ziel-Keyword.
  • Ist 50 bis 60 Zeichen lang.
  • Zwingt Benutzer zum Durchklicken.

Überschriften

Header-Tags sind ein Standardelement der On-Page-SEO, mit dem Text in Abschnitte organisiert wird, um die Lesbarkeit zu verbessern. Jeder Header signalisiert den Beginn eines neuen Themas oder Unterthemas.

Unterstützende Technologien verwenden Überschriften, um Benutzer direkt zu dem gewünschten Abschnitt zu führen. Dies ist einfacher, als eine ganze Webseite zu lesen, um bestimmte Informationen zu erhalten. Suchmaschinen nutzen Überschriften, um den Inhalt zu verstehen, der auf jede Überschrift folgt, und so Suchanfragen besser zuzuordnen.

So optimieren Sie Überschriften für SEO-Barrierefreiheit:

  • Verwenden Sie geeignete HTML-Tags, damit unterstützende Technologien sie lesen können.
  • Stellen Sie sicher, dass jede Überschrift den Inhalt des Abschnitts genau beschreibt.
  • Verschachteln Sie die Kopfzeilenebenen in der Reihenfolge innerhalb der Abschnitte, springen Sie also nicht von H3 zu H5.

Alt-Text

Alternativtext ist eine schriftliche Beschreibung eines Online-Bildes, die das Bild ersetzt. Sie helfen Menschen mit Sehbehinderungen oder Sehschwäche, ein Bild zu verstehen, und informieren alle Benutzer, wenn Bilder langsam geladen werden oder fehlen. Da Suchmaschinen Bilder nicht crawlen können, sind Alt-Tags für SEO-Zwecke wichtig, um das Thema eines Bildes zur Indexierung weiterzugeben.

Hier sind ein paar Dinge, die Sie beim Schreiben von Alternativtexten beachten sollten:

  • Es ist nicht notwendig, „Dies ist ein Bild von“ in Ihre Beschreibung aufzunehmen, da Screenreader dies automatisch ankündigen.
  • Schreiben Sie einen vollständigen Satz und erwecken Sie das Bild zum Leben. Anstatt „Eiscreme“ als Alternativtext zu verwenden, versuchen Sie es mit „Hand hält eine Waffeltüte mit zwei Kugeln Erdbeereis.“
  • Gestalten Sie Alternativtext relevant für den Seiteninhalt und überlegen Sie, was eine Person im Kontext des Themas wissen möchte.
  • Wenn Bilder eine Funktion haben, beschreiben Sie die Aktion und nicht das Bild. Wenn beispielsweise ein Nike-Logo auf ein von Ihnen verkauftes Nike-Produkt verweist, sollte der Alternativtext diese Informationen vermitteln und nicht „Nike-Logo“ enthalten.
  • Integrieren Sie Schlüsselwörter auf natürliche Weise. Keyword-Stuffing wirkt wie Spam.
  • Verlinken Sie bei komplexen Bildern wie Diagrammen zu detaillierten Beschreibungen.
  • Für dekorative Bilder oder um die Wiederholung detaillierter Bildunterschriften zu vermeiden, verwenden Sie leere Alt-Attribute, damit Screenreader diese überspringen.

Metadaten

Metadaten, wie etwa eine Meta-Beschreibung, erscheinen nicht auf einer veröffentlichten Webseite, helfen Suchmaschinen und Benutzern jedoch, den Zweck und Inhalt einer Seite zu verstehen.

Meta-Beschreibungen erscheinen in den SERPs unterhalb des Seitentitels und sind wichtig für die Barrierefreiheit. Screenreader lesen sie laut vor, um Benutzern zu helfen, zu entscheiden, ob die Seite ihren Anforderungen entspricht, bevor sie weiterklicken. Sie verbessern auch die Suchmaschinenoptimierung, indem sie Suchmaschinen Einblick in die Seitenrelevanz geben, damit sie Inhalte den entsprechenden Suchanfragen zuordnen und so die Absprungrate reduzieren können.

Effektive Meta-Beschreibungen:

  • Beschreiben Sie den Inhalt einer Seite genau.
  • Sind klar und leicht verständlich, wenn man sie laut vorliest.
  • Fügen Sie ein primäres Schlüsselwort ein.
  • Enthalten weniger als 160 Zeichen.
  • Enthalten Sie einen Aufruf zum Handeln und zwingen Sie Benutzer zum Durchklicken.

Mobilfreundlichkeit

Mehr als die Hälfte des weltweiten Web-Traffics stammt von mobilen Geräten. Google crawlt zuerst die mobile Version aller neuen Websites. Das bedeutet, dass Ihre Website für Smartphones, Tablets und andere Geräte zugänglich und optimiert sein sollte.

Um sicherzustellen, dass Ihre Website für Mobilgeräte geeignet ist:

  • Verwenden Sie ein responsives Design, das für verschiedene Bildschirmgrößen gerendert wird.
  • Formatieren Sie Inhalte so, dass Leser sie leicht überfliegen oder lesen können.
  • Halten Sie Ihre Website einfach und übersichtlich, ohne aufdringliche Interstitials.
  • Optimieren Sie die Geschwindigkeit der Website, damit sie für Benutzer unterwegs schnell lädt.
  • Richten Sie die Sprachsuche gezielt auf bestimmte Schlüsselwörter aus.

Videountertitel und Transkripte

Videoinhalte erfreuen sich zunehmender Beliebtheit, doch Livestreams, Webinare, Interviews und visuelle Produktdemos können sowohl für gehörlose oder schwerhörige Benutzer als auch für Suchmaschinen eine Herausforderung darstellen, sofern Sie keine Untertitel und Transkripte bereitstellen.

Bildschirmuntertitel sind eine Textalternative zu Audio für gehörlose oder schwerhörige Benutzer. Manche Menschen bevorzugen auch Untertitel, wenn sie sich in einer lauten Umgebung befinden oder andere nicht stören möchten. Während YouTube automatische Untertitel für Videos bereitstellt, sollten Sie die Untertitel für ein optimales Benutzererlebnis sorgfältig bearbeiten.

Vollständige Transkripte bieten eine Textalternative zu den gesprochenen Teilen von Videos (und eignen sich hervorragend für die Video-SEO). Sie sollten sie auf derselben Seite als Video oder auf einer separaten Seite mit einem Link veröffentlichen. Screenreader können Transkripte schneller lesen als Videountertitel. Einige Benutzer ziehen es möglicherweise auch vor, ein Transkript zu überfliegen, anstatt ein Video anzusehen oder ein Transkript nach einem bestimmten Begriff zu durchsuchen.

Da Suchmaschinen Videoinhalte nicht crawlen können, liefern Transkripte wertvolle Informationen für die Indexierung. Bearbeiten Sie Transkripte, um Konversationselemente wie „ähm“ und „ah“ zu entfernen, damit sie leichter zu lesen sind.

Anker-Text

Ankertext ist anklickbarer Text, der Benutzern und Suchmaschinen mitteilt, wohin ein Link sie führt. Suchmaschinen verwenden Ankertext, um den Inhalt rund um den Link und auf der Zielseite zu verstehen. Auch für Benutzer mit Behinderungen ist ein korrekter Ankertext wichtig, damit sie nicht unnötigerweise auf andere Seiten klicken, die ihren Anforderungen nicht entsprechen.

Schreiben Sie einen prägnanten und präzisen Ankertext, damit Benutzer wissen, was sie erwartet, wenn sie dem Link folgen. Das bedeutet, generische Formulierungen wie „hier klicken“ oder die Verwendung einer URL als Ankertext zu vermeiden.

Da einige Benutzer mit Bildschirmleseprogrammen eine Seite nach Links durchsuchen, besteht ein guter Test, ob Ihr Ankertext barrierefrei ist, darin, festzustellen, ob er verstanden wird, wenn er allein vorgelesen wird.

Lesbarkeit

Unter Lesbarkeit versteht man, wie einfach ein Inhalt zu konsumieren ist. Eine Seite mit hoher Lesbarkeit fesselt Benutzer und hält sie länger auf Ihrer Website. Es ist auch für Suchmaschinen leichter zu verstehen, die versuchen, den Inhalt den Benutzeranfragen zuzuordnen.

Sie können die Lesbarkeit für SEO und die Zugänglichkeit verbessern, indem Sie:

  • Gruppieren Sie Inhalte in Blöcke mit klaren Überschriften, damit Informationen leicht zu finden sind.
  • Entfernen Sie die Wortfülle und wählen Sie eine einfache und überzeugende Sprache.
  • Verwenden Sie die aktive Stimme für einen direkteren Schreibstil.
  • Verwenden von nummerierten oder Aufzählungslisten zum Scannen.
  • Für Leser schreiben und Keyword-Stuffing vermeiden.

Tools zum Testen der Barrierefreiheit

Es stehen zahlreiche kostenlose und kostenpflichtige Tools zur Verfügung, die Ihnen eine Vorstellung davon geben können, wie zugänglich Ihre Website ist. Ich habe unten einige aufgelistet, um Ihnen den Einstieg zu erleichtern.

accessScan

accessScan bietet eine detaillierte Analyse, wie Ihre Website in Bezug auf anklickbare Elemente, Titel, Menüs, Ausrichtung, Grafiken, Formulare und Lesbarkeit abschneidet. Dieses kostenlose Tool scannt eine Domain und sagt Ihnen, ob Ihre Website verschiedene Barrierefreiheitsstandards erfüllt, mit Details zu den Elementen, die Sie nicht erfüllt haben. Sie können die Informationen als PDF-Bericht herunterladen.

Barrierefreiheitsprüfung

Der Accessibility Checker prüft Websites auf Einhaltung der Barrierefreiheitsgesetze in ausgewählten Ländern. Es bietet einen Gesamt-Compliance-Score, eine Liste dringender und sekundärer Probleme sowie Lösungen. Das kostenlose Tool kann auf einzelnen Webseiten verwendet werden, Sie müssen jedoch ein Upgrade durchführen, um mehrere Seiten gleichzeitig zu scannen.

Tool zur Bewertung der Web-Barrierefreiheit (WAVE)

Dieses von WebAIM entwickelte Tool testet Webseiten auf Barrierefreiheitsprobleme gemäß den WCAG 2.1-Richtlinien. Sie können direkt zur WAVE-Website gehen und eine URL eingeben, um eine Visualisierung der Fehler anzuzeigen. Das Tool blendet Symbole auf Ihrer Webseite ein, um Ihnen zu zeigen, wo sich Probleme befinden. WAVE ist auch als Browser-Erweiterung verfügbar, sodass Sie direkt in Chrome, Firefox und Edge testen können.

Holen Sie sich noch heute Hilfe bei der Vereinheitlichung von SEO und Barrierefreiheit

Anstatt die Barrierefreiheit erst im Nachhinein in Angriff zu nehmen, kombinieren Sie sie mit SEO, um Ihre Bemühungen zur Website-Optimierung zu optimieren. Unser Team bei Victorious kann Ihnen dabei helfen, leistungsstarke Strategien zu entwickeln, die sowohl Barrierefreiheit als auch SEO kombinieren und so eine hilfreiche, barrierefreie Website erstellen, die ein möglichst breites Publikum erreicht. Kontaktieren Sie uns noch heute für eine kostenlose Beratung.