Technologische Neuigkeiten, Bewertungen und Tipps!

Was SEOs über Barrierefreiheit wissen sollten

Hinweis: Der folgende Artikel hilft Ihnen weiter: Was SEOs über Barrierefreiheit wissen sollten

Warum Barrierefreiheit für SEO und Content-Marketing wichtig ist

Das Ziel von SEO und Barrierefreiheit besteht darin, Ihre Inhalte für Besucher besser zugänglich zu machen, unabhängig davon, welches Gerät sie verwenden oder in welcher Situation sie sich befinden. Ein Fokus auf barrierefreie Inhalte kann den Umsatz Ihres Unternehmens steigern und Geld sparen.

Ganz gleich, ob es sich bei Ihrem Website-Besucher um einen Berufstätigen in einem stark befahrenen Zug, um jemanden mit Sehbehinderungen, einen Elternteil, der das Abendessen kocht, oder um einen Suchmaschinen-Crawler handelt: Die Erstellung von Inhalten unter Berücksichtigung der Barrierefreiheit bietet das beste Erlebnis, indem sie den Konsum Ihrer Inhalte ermöglicht.

In diesem Artikel:

Was ist Web-Barrierefreiheit?

Barrierefreiheit bezieht sich darauf, dass Websites und andere Web-Tools so gestaltet und codiert sind, dass alle Menschen (einschließlich Menschen mit Behinderungen) darin navigieren, sie verwenden und verstehen können. nach Angaben des World Wide Web Consortium (W3C):

— Google-Entwickler, Grundlagen der Barrierefreiheit

Derzeit ist ein großer Teil des Webs für einige Besucher schwierig zu navigieren und zu nutzen, da Websites unbeabsichtigt mit Barrierefreiheitsproblemen entwickelt wurden oder diese während des Erstellungsprozesses keine Priorität hatten.

A Studie 2020 von WebAIM stellte fest, dass 98 % der Top-Websites (weltweit) keine vollständige Barrierefreiheit bieten.

Zu den Beeinträchtigungen, die sich darauf auswirken können, wie Einzelpersonen das Internet erleben, gehören (ohne darauf beschränkt zu sein) Seh-, Hör-, intellektuelle, kognitive, situative, umweltbedingte und körperliche Beeinträchtigungen.

Der internationale Standard für Web-Barrierefreiheit ist WCAG (Web Content Accessibility Guidelines).). WCAG ist nützlich für Entwickler, Inhaltsersteller und alle, die ihre Informationen auf jedem Gerät besser zugänglich machen möchten.

Das W3C stellt die vier Prinzipien der Web-Barrierefreiheit mit dem Akronym POUR zur Verfügung. Jedes Prinzip verfügt über Kriterien zur Beurteilung des Erfolgs innerhalb dieser Säule.

  • Pwahrnehmbar – Inhalte können über mehrere Sinne konsumiert werden (Sehen, Hören und/oder Tasten).
  • Ölesbar – Die Benutzeroberfläche (Formulare, Navigation, Hover-/Mouseover-Elemente usw.) ist für Besucher zugänglich
  • UVerständlich – Die Navigation des Inhalts und der Inhalt selbst ist für Besucher verständlich
  • RObust – Der Inhalt ist umfangreich genug, um über eine Vielzahl von Benutzeragenten mit ihnen zu interagieren

💡 Erfahren Sie mehr über POUR vom W3C.

Was ist ein Screenreader?

Ein Screenreader übersetzt den Inhalt einer Webseite in Audio oder Brailleschrift für Besucher, die Hilfe beim Konsumieren von Inhalten online benötigen. Ein Screenreader ermöglicht es Besuchern, anstelle einer Maus die Tastatur oder eine Braillezeile zum Navigieren im Internet zu verwenden.

Wenn Sie das Internet noch nie mit einem Bildschirmlesegerät kennengelernt haben, nehmen Sie sich einen Moment Zeit und schauen Sie sich diese beiden Videos an:

  1. Screenreader-Demo für digitale Barrierefreiheit (UCSF IT Web Services)
  2. Screenreader-Demo (Büro für Informationstechnologie an der CU Boulder)

Barrierefreiheit gilt nicht nur für Besucher, die einen Screenreader nutzen; Die Demo des Screenreaders wird jedoch beginnen, eine Grundlage für Verständnis und Empathie für alle Webbenutzer zu schaffen.

Barrierefreiheitsbedürfnisse können situativ sein

Denken Sie daran, dass die Bedürfnisse eines Besuchers je nach den Umständen, seiner Umgebung, seinen Zielen oder seinen aktuellen Bedürfnissen unterschiedlich sein können.

Situative Bedürfnisse verändern die Art und Weise, wie wir Informationen konsumieren müssen. Ein akustisches Beispiel ist ein lautes Café oder ein lauter Zug, in dem Text oder visuelle Inhalte benötigt werden. Ein Beispiel für körperliche/aktuelle Bedürfnisse könnte das Halten eines Babys oder das Kochen/Reinigen sein, wobei die über Audio übermittelten Informationen im Moment am besten zugänglich wären.

Durch die Bereitstellung mehrerer Möglichkeiten zum Konsumieren von Inhalten, einschließlich visueller, Audio-, Video-, Text-, interaktiver Tools usw., wird sichergestellt, dass die Bedürfnisse der Benutzer unterstützt werden und sie dort abgeholt werden, wo sie sich befinden, anstatt Annahmen darüber zu treffen, was sie möglicherweise benötigen.

Als Content-Ersteller sollten wir uns fragen:

Situationen, in denen barrierefreie Inhalte gewinnen

  • Ein auditiver Lernender möchte neue Informationen eher mit einem Podcast als mit einem langen Textinhalt aufnehmen.
  • Jemand im Flugzeug, der seine Kopfhörer vergessen hat, würde sich über Untertitel oder ein Transkript für ein Video freuen.
  • Eine Infografik, die die wichtigsten Punkte hervorhebt, erleichtert es einem Marketingprofi, der nach Brancheninformationen sucht, Erkenntnisse in seine Präsentation zu integrieren.
  • Ein Verbraucher, der in einer Sprache liest, die nicht seine Muttersprache ist, kann von einfachen Inhalten mit kurzen Absätzen und einer Lesbarkeitsbewertung auf High-School-Niveau profitieren

Warum barrierefreie Inhalte erstellen?

Gut für den Menschen

Seien Sie integrativ gegenüber Besuchern mit Behinderungen und bieten Sie allen ein besseres Erlebnis.

Warum sollten wir nicht zu einem besseren digitalen Umfeld beitragen wollen? Eine Umgebung, in der Informationen für jeden in jeder Situation zugänglich sind. Dazu gehören Unterschiede im sozioökonomischen Hintergrund, in der Bildung oder in den körperlichen und kognitiven Fähigkeiten.

Ebener Zugang fanden heraus, dass die beiden Hauptgründe, warum Unternehmen sich mit Barrierefreiheit befassten, darin bestanden, „Menschen mit Behinderungen einzubeziehen“ und „allen Benutzern die beste UX zu bieten“.

Gut fürs Geschäft

1) Verbessern Sie Marktanteile, Markenreputation und organische Sichtbarkeit.

Der W3C-Listen Die Verbesserung von Innovationen, die Verbesserung des Markenimages und die Ausweitung des Marktanteils gehören zu den Hauptgründen für Unternehmen, ihre Web-Barrierefreiheit zu optimieren.

Ebenenzugang’ Bericht zum Stand der digitalen Barrierefreiheit schlägt vor, dass Web-Zugänglichkeitspraktiken die Kundenbindung erhöhen, Arbeit in Zukunft wertvoller machen und die organisatorische Effizienz steigern und gleichzeitig die Betriebskosten senken.

2) Vermeiden Sie Klagen (und Reibungsverluste beim Kauf)

Entsprechend Barrierefreiheit.com, stiegen die Klagen wegen Barrierefreiheit im Internet von 2020 bis 2021 um über 14 %, wobei die Branchen Konsumgüter, Dienstleistungen und Einzelhandel am stärksten betroffen waren. Im Jahr 2021 gab es 265.000 ADA (Americans with Disabilities Act) Compliance-Anforderungsschreiben in den USA. Konservative Schätzungen von BOIAbasierend auf dem Bericht von Accessibilitity.com, weisen darauf hin, dass US-Unternehmen insgesamt 3,3 bis 6,6 Milliarden US-Dollar für ADA-Compliance-Klagen für Vergleiche und Anwaltskosten ausgegeben haben.

Almanac News berichtete dass Compliance-Vergleiche bis zu 26.000 US-Dollar betragen können (ohne Anwaltskosten).

Beispiele für Organisationen, die an ADA-Compliance-Klagen beteiligt sind:

SEO und Barrierefreiheit überschneiden sich

Barrierefreie Überschriften: Do’s und Don’ts

Ihre Seitenüberschriften sollten logisch und beschreibend sein, um ein überschaubares Erlebnis zu bieten. Überschriften bieten sowohl für Leser als auch für Suchmaschinen thematische Verknüpfungen von Passagen.

Tun:

  • Erstellen Sie Überschriften, bevor Sie Ihre Inhalte schreiben
  • Implementieren Sie Überschriften, um die Hierarchie Ihrer Informationen zu unterstützen
  • Verwenden Sie Überschriften in aufsteigender Reihenfolge (h1, dann h2 und h3 usw.).
    • Note: Es ist sinnvoll, Überschriften innerhalb des Inhalts zu verschachteln

Unterlassen Sie:

  • Verwenden Sie anstelle von Überschriften Formatierungen wie Fettdruck, Größenänderung oder Farbgebung
  • Verwenden Sie Überschriften in nicht numerischer Reihenfolge (z. B. h1, h2, h5, dann h3).
  • Verwenden Sie ein h1, das stark vom Title-Tag abweicht
  • Überbeanspruchung der Überschriften

💡 Entdecken Sie weitere Best Practices für Überschriften aus Yale.

Seitengeschwindigkeit

Benutzer von Mobilgeräten, älteren Telefonen mit geringerer Rechenleistung oder schwächeren Netzwerken können sich darauf auswirken, wie Besucher auf den Inhalten Ihrer Website navigieren und darauf zugreifen können.

Seiten, die langsam geladen werden, sind aufgrund ihrer Netzwerke (Standort oder wirtschaftliche Möglichkeiten) oder der Stärke des Netzwerks (basierend auf dem Standort des nächstgelegenen Mobilfunkmastes) für einige demografische/geografische Gruppen weniger zugänglich als für andere.

Webseiten können aufgrund großer Mengen an JavaScript und CSS, großen Bildern, die nicht außerhalb des Bildschirms verschoben werden, oder vielen Plugins und Widgets, die sich darauf auswirken können, wer effizient auf den Inhalt zugreifen kann, langsam geladen werden.

💡 Überprüfen Sie die Leistung Ihrer Seiten mithilfe von Google Einblicke in die Seitengeschwindigkeit Werkzeug.

HTML-Sitemaps

Eine HTML-Sitemap (oft in der Fußzeile der Website verlinkt) kann Besuchern, die einen Screenreader verwenden, als Alternative zur Hauptnavigation Zugriff auf die gesamte Website bieten. Die HTML-Sitemap bietet einen Überblick über die Site und zeigt, wie der Inhalt der Site organisiert ist.

Die HTML-Sitemap kann Suchmaschinen zusammen mit einer XML-Sitemap zusätzlichen Kontext bieten, um die Struktur und Beziehung Ihrer Website und ihres Inhalts zu verstehen.

WAIs Sitemap ist ein Beispiel für eine HTML-Sitemap in der Praxis.

Bilddateinamen

Die Dateinamen von Bildern helfen Besuchern, die Bildschirmleseprogramme verwenden (wenn das alternative Textattribut nicht enthalten ist), und Suchmaschinen, Ihren visuellen Inhalt zu verstehen:

Für das obige Bild wäre ein Beispiel für einen nicht optimierten Bilddateinamen „https://www.site.com/images/654.png“.

Für dasselbe Bild würde ein verbesserter Dateiname einen Kontext für das Bild liefern. Der Dateiname könnte „https://www.site.com/images/blue-faced-dog.png“ lauten.

Bild-Alternativtext

Das alternative Textattribut des Bildelements soll das Bild beschreiben, wenn der visuelle Konsum keine Option ist. Dies ist für Benutzer von Screenreadern und Suchmaschinen-Crawlern nützlich, um Bilder zu verstehen.

Bilddateinamen werden für Bilder ohne Alternativtext gelesen. Betrachten Sie als Beispiel die Erfahrung mit dem sehr, sehr niedlichen Bild unten:

Ohne Alternativtext:

Ein Bildschirmleser liest den Namen der Bilddatei gefolgt von „Bild“. In diesem Fall würde der Besucher „/23411026789787.png, Bild“ hören. Im allgemeinen Fall handelt es sich um lange und nicht beschreibende Bilddateinamen, die dem Besucher keinen Kontext bieten und ein schlechtes Erlebnis bieten.

Mit Alternativtext:

Schwarzer und grauer Hund lächelt in einem grasbewachsenen Garten

Ein Screenreader liest den Bildalternativtext gefolgt von „Bild“. Dies sorgt für ein viel besseres Erlebnis.

Best Practices für Alt-Text

  • Beschreiben Sie das Bild im Kontext der Seite
  • „Bild von“, „Bild von“, „Miniaturansicht von“ ausschließen
    • Screenreader sagen bereits „Bild“ und Suchmaschinen-Crawler erkennen aufgrund des Bildelements, dass es sich um ein Bild handelt.
  • Verwenden Sie ein leeres Alt-Attribut für dekorative Bilder (rein visueller Zweck und fügt dem Inhalt der Seite keinen Mehrwert hinzu).
    • Wenn möglich, sollten dekorative Bilder über CSS bereitgestellt werden
    • Beispiel: Was SEOs über Barrierefreiheit wissen sollten 1
  • Begrenzen Sie die Zeichenanzahl auf 125

Ankerlinks

Link-Ankertexte sollten beschreibend sein und für Leser außerhalb des Kontexts der umgebenden Inhalte sinnvoll sein. Besucher, die Screenreader verwenden, können von Link zu Link auf einer Seite navigieren. Daher ist es wichtig zu erklären, wohin der Link sie führt. Suchmaschinen können den Link-Ankertext als Signal dafür verwenden, worum es beim Ziel geht.

Ein gängiger Ansatz für interne Verlinkungsstrategien besteht darin, Variationen des Themas einer Seite als Ankertext auf den Seiten zu verwenden, die darauf verlinken. Dies bietet sowohl für Suchmaschinen als auch für Benutzer hilfreichen Kontext.

Ein Beispiel für einen klaren und prägnanten Ankertext, der Einblicke in die Zielseite bietet:

Text mit „Erfahren Sie mehr über den Hund Fern“, der auf fernthecutedog.com verweist

Erfahren Sie mehr über den Hund Fern

Im Vergleich zu:

Ein Bild von Farn, das ohne zusätzlichen Kontext auf fernthecutedog.com verlinkt

Was SEOs über Barrierefreiheit wissen sollten 2

Weitere Beispiele für Link-Ankertexte, die nur sehr wenig Kontext zur Zielseite bieten, sind die Verwendung von „mehr erfahren“, „mehr lesen“, „hier klicken“, „weitere Informationen“ und „dies herunterladen“.

Strukturierte Daten

Strukturierte Daten bieten Besuchern und Suchmaschinen zusätzliche Informationen und Kontext. E-Commerce-Dienste und Seiten, die hauptsächlich auf dynamischen Inhalten basieren, können von der Kennzeichnung ihrer Informationen profitieren. Schema.org Und JSON-LD sind weithin akzeptierte Sprachen zur Übermittlung der Daten.

Strukturierte Daten ermöglichen besser zugängliche Suchmaschinen-Ergebnisseiten (SERPs). Es bietet klaren Kontext und Informationen zum Inhalt Ihrer Website (auch wenn keine SERP-Funktionen verfügbar sind).

SEOs nutzen die Leistungsfähigkeit strukturierter Daten, um Rich Snippets zu generieren und die Klickrate und Sichtbarkeit innerhalb der SERPs zu verbessern.

Inhalt und Zugänglichkeit

Gemischte Medien

Durch die Erstellung von Inhalten in mehreren Medien können Besucher die Informationen in unterschiedlichen Situationen konsumieren. Ein Beispiel für denselben/ähnlichen Inhalt auf andere Weise kann eine Seite mit der Aufzeichnung eines Podcasts, ein textbasiertes Transkript und eine Zusammenfassung der Episode sowie eine Infografik sein, die die wichtigsten Punkte anzeigt.

Durch die Bereitstellung mehrerer Möglichkeiten zum Konsumieren von Inhalten (visuell, Audio, Video, Text usw.) wird sichergestellt, dass Besucher unabhängig von ihrer Umgebung oder ihren Umständen auf die Inhalte zugreifen können, und Suchmaschinen erhalten ein ganzheitliches Verständnis für jedes der bereitgestellten Medien.

Inhaltsverzeichnis der Seite

Das Hinzufügen eines Inhaltsverzeichnisses (oder einer Beschreibung dessen, was Sie erwartet) zu Ihrem langen Inhalt ist eine effektive Möglichkeit, die Benutzerfreundlichkeit der Seite zum Scannen für vielbeschäftigte Leser zu erhöhen und bietet mobilen Besuchern eine leichter zugängliche Möglichkeit, auf die spezifischen Informationen zuzugreifen, die sie aufgerufen haben Auf der Suche nach. Mithilfe von Sprunglinks im Inhaltsverzeichnis können Benutzer direkt zu dem Abschnitt navigieren, den sie lesen möchten.

Ebenso verbessert ein Inhaltsverzeichnis die Zugänglichkeit, indem es einen Überblick über die kommenden Inhalte bietet und es Besuchern ermöglicht, direkt zu dem Abschnitt zu gelangen, der sie interessiert.

Der oben in diesem Artikel ist ein Beispiel für die Bereitstellung eines Inhaltsverzeichnisses mit Sprunglinks tiefer in die Seite hinein.

Lesbarkeitsstufe

Durch die Lesbarkeit Ihrer Inhalte kann ein breites Publikum verstehen, was Sie vermitteln möchten. Ihre Webseiten sind für Besucher hilfreicher, wenn sie auf einem Niveau verfasst sind, das für Menschen mit unterschiedlichen Fähigkeiten geeignet ist.

Wie zugänglich Ihr Inhalt ist, kann von seiner Lesbarkeitsbewertung, seinem Beschreibungsgehalt und davon abhängen, ob er kurze und prägnante Absätze enthält.

W3C empfiehlt Als angestrebte Lesbarkeitsstufe für die Zugänglichkeit der meisten Inhalte wird die Sekundarstufe I festgelegt. Die Sekundarstufe I wird durch die definiert Nationales Zentrum für Bildungsstatistik als „loses Äquivalent von Intermediate School, Middle School oder Junior High School“ (in den Vereinigten Staaten).

Um besser lesbare Inhalte zu erhalten, vermeiden Sie Folgendes:

  • Mehrdeutigkeit
  • Akronyme
  • Abkürzungen
  • Branchenjargon

💡 Um die Lesbarkeit Ihrer Inhalte zu beurteilen, probieren Sie ein Tool wie Hemingway-Herausgeber.

Zugänglichkeit der Tastatur

Websitebesitzer können Fokusindikatoren auf ihren Webseiten verwenden, um die Navigation durch ihre Inhalte über eine Tastatur zu ermöglichen.

Benutzer können beispielsweise mit ihrer Tastatur durch ein Webformular navigieren und dabei die Tabulatortaste und die Eingabetaste verwenden. Die Escape-Taste ist ein weiteres großartiges Beispiel für einen gängigen Tastaturbefehl, der zum Verlassen eines Video- oder Bild-Popups verwendet wird.

💡 Möchten Sie die Tab-Reihenfolge Ihrer Webseite anzeigen? Sehen Sie sich die Registerkarte „Barrierefreiheit“ an Die Webentwicklertools von Firefox.

Semantisches HTML für barrierefreie Seiten

Semantisches HTML gibt den Elementen und dem Kontext für das, was auf der Seite verfügbar ist, Bedeutung. Auf diese Weise kann die Verwendung von semantischem HTML sowohl Menschen als auch Crawlern dabei helfen, Ihre Seiten zu verstehen.

Beispiele für nicht-semantische Elemente

Beispiele für semantische Elemente

  • Taste
  • Tisch
  • Absatz (p)
  • Überschriften (h1-h6)
  • Navigation (nav)
  • Artikel
  • Fusszeile
  • Listen (ol, ul, dl)

Semantisches HTML kann die Sichtbarkeit Ihrer Website in der organischen Suche (z. B. Überschriften) verbessern und ist viel näher an der Art und Weise, wie Menschen sprechen. Durch die Verwendung semantischer Elemente werden verschiedene Arten von Daten auf Ihren Seiten identifiziert, indem eine klare Hierarchie bereitgestellt wird.

Darüber hinaus kann die Verwendung von kontextrelevantem HTML Websitebesitzern und -entwicklern dabei helfen, sich im Code einer Website zurechtzufinden und darin zu navigieren.

  • Bericht zur Barrierefreiheit im Leuchtturm von Google
  • Bewertung der Barrierefreiheit
  • Reproduzieren Sie das Screenreader-Erlebnis
  • Crawler (Produkte wie ScreamingFrog oder DeepCrawl)

Gehen Sie los und machen Sie das Internet zu einem besseren Ort

Viele Websitebesitzer und -entwickler sind der Meinung, dass Barrierefreiheit ein nachträglicher Aspekt mit hohem Aufwand bei der Erstellung ihrer Website ist. Wir müssen diese Überzeugung umkehren und anerkennen, dass Aspekte der Barrierefreiheit in alles einbezogen werden sollten, von der Website-Erstellung bis hin zu Website-Updates. Unternehmen, die den Wert der Führung mit Empathie verstehen, bieten allen ein besseres Erlebnis.

Beginnen Sie mit der Barrierefreiheit Ihrer Website?

Note: Dies ist keine umfassende Liste der Anforderungen an die Barrierefreiheit im Internet. Vielmehr ist es ein Ausgangspunkt für Vermarkter und SEOs, der allen Website-Besuchern Zugang zum Verständnis und zur Optimierung bietet. Weitere Informationen finden Sie unter Web-Accessibility-Initiative.

Wenn Sie auf der Suche nach einem menschenzentrierten Ansatz für Ihre Strategie zur organischen Suche und Inhaltserstellung sind, wenden Sie sich noch heute an Seer.

^zurück nach oben

Melden Sie sich für unseren Newsletter an, um weitere Beiträge wie diesen in Ihrem Posteingang zu erhalten: