Tech News

Technik & Digital

Praktiken zur Barrierefreiheit von Websites für SEO


Praktiken zur Barrierefreiheit von Websites für SEO

Die Zugänglichkeit der Website ist die ethische Praxis, sicherzustellen, dass Ihre Website von behinderten Benutzern leicht verstanden und navigiert werden kann. Es gibt vier Gründe, warum Sie die Barrierefreiheit von Websites in Ihre SEO-Liste aufnehmen sollten:

  1. Ein wesentlicher Aspekt von SEO ist die Optimierung für Menschen, was bedeutet, dass wir optimieren sollten für jedermann, einschließlich behinderter Benutzer. Nicht optimierte Websites können zu weniger Suchanfragen und geringerer Sichtbarkeit führen, da sich die Leute in der Regel von ihnen fernhalten.
  2. Laut dem World Wide Web Consortium (W3C) „zeigen Fallstudien, dass barrierefreie Websites unter anderem bessere Suchergebnisse, geringere Wartungskosten und eine größere Reichweite haben.“ Dies zeigt, dass die Barrierefreiheit von Websites ein wesentlicher Bestandteil von SEO ist.
  3. Google legt großen Wert auf die Barrierefreiheit von Websites. Laut ihrer Accessibility-Seite sollte „Jeder auf das Web zugreifen und es genießen können. Wir setzen uns dafür ein, dass dies Wirklichkeit wird.“
  4. Es ist das Richtige. Auf Barrierefreiheit zu verzichten bedeutet, ganze Gruppen vorsätzlich vom Zugang zu Kommunikation und Information zu verbieten und sie an der vollen Teilhabe am gesellschaftlichen Leben zu hindern.

In diesem Blogbeitrag werde ich fünf der üblichen SEO-Praktiken diskutieren, die wir durchführen und wie sie zur Barrierefreiheit von Websites beitragen, und ich werde fünf weitere Praktiken hinzufügen, die Sie anwenden können, um Ihre Website für alle zugänglich zu machen.

Notiz: Ich habe Hilfstechnologien verwendet, um die Genauigkeit dieses Artikels zu gewährleisten.

1. Titel-Tags optimieren

Das Title-Tag ist Ihr Webseitentitel. Es beschreibt Ihre Webseite für die Benutzer und die Suchmaschinen. Dies hilft bei der Barrierefreiheit der Website, da das Title-Tag für sehbehinderte Benutzer beim Laden der Seite vom Screenreader gelesen wird, was es zu ihrer Einführung in Ihre Website macht.

Optimieren von Titel-Tags für die Barrierefreiheit der Website

Das obige Foto zeigt beispielsweise das SEO Hacker-Titel-Tag. Abgesehen von dem Titel-Tag, das ein Schlüsselwort enthält, für das wir ein Ranking erstellen möchten, signalisiert es auch sehbehinderten Personen, dass sie sich auf einer Website einer philippinischen SEO-Agentur befinden.

2. Bearbeiten des URL-Slugs so, dass er beschreibend und genau ist

Ein nicht optimierter oder verwirrender URL-Slug ist nicht nur für Suchmaschinen, sondern auch für Menschen schwer zu verstehen. Erstens wird es sehr schwer sein, sich daran zu erinnern. Zweitens könnten sie Kauderwelsch sein und daher frustrierend zuzuhören. Sehen Sie sich diese Forbes-Artikel-URL an:

Bearbeiten des Forbes-URL-Slugs für die Barrierefreiheit der Website
Stellen Sie sich nun vor, Sie verwenden einen Bildschirmleser. Es wird Ihnen die gesamte URL vorlesen, sodass Sie sich vor und nach dem Anhören des wichtigen Teils des URL-Slugs auch die nicht hilfreichen Teile anhören müssen.

Auf der anderen Seite gibt es beschreibende URLs, die immer noch nicht hilfreich sind, weil sie ungenau sind. Stellen Sie in der Regel sicher, dass Ihr URL-Slug beschreibend und korrekt ist, damit Ihre Benutzer wissen, dass sie sich auf der richtigen Seite Ihrer Website befinden. Sehen Sie sich dieses Beispiel aus dem Leadership Stack-Blogpost an:

Optimierter Leadership Stack URL-Slug für Website-Zugänglichkeit

Anhand der obigen URL wissen Sie genau, auf welche Webseite Sie zugreifen. Dies hilft bei der Zugänglichkeit der Website, da es den Benutzern schnelle und genaue Informationen liefert und sie schnell zu anderen Bereichen der Seite wechseln können.

3. Alt-Text zu Bildern hinzufügen

Der Alt-Text ist das, worauf Benutzer stoßen, wenn das Bild nicht richtig geladen wird. Der Alternativtext wird auch von Screenreadern vorgelesen, sodass sehbehinderte Menschen wissen, dass es ein Bild gibt und worum es geht. Wenn Sie keinen Alternativtext für ein Bild einfügen, sinkt die Wahrscheinlichkeit, dass Ihr Bild in der Bildersuche einen Rang einnimmt, und es wird für sehbehinderte Benutzer zu einer Barriere, Ihre Inhalte besser zu verstehen.

Auf dem Foto unten hat das Bild beispielsweise einen Alternativtext mit der Aufschrift „Kenne die Anzeichen eines Mitarbeiter-Burnouts“.

Alternativ-Text des Führungsstapels für die Barrierefreiheit der Website
Dies bedeutet, dass alternative Texte nicht nur für SEO, sondern auch für die Barrierefreiheit der Website beschreibend sein sollten, da sie Sehbehinderten helfen, das Bild selbst zu verstehen.

4. Dem Inhalt die richtigen Überschriften hinzufügen

Die Kopfzeilen Ihrer Seite strukturieren Inhalte für die Suchmaschine und die Nutzer. Diese Praxis ist nicht nur gut für Rankings, sondern hilft auch bei der Barrierefreiheit der Website. Das Anbringen der richtigen Kopfzeilen auf Ihrer Seite stellt die Zugänglichkeit der Website für Sehbehinderte sicher, da die Screenreader die Seite genauer interpretieren können. Daher wird es ihnen helfen, nicht nur die Organisation Ihrer Inhalte zu verstehen, sondern auch einfacher darin zu navigieren.

Auf dem Foto unten sehen Sie beispielsweise zwei hervorgehobene Überschriften. Die Überschrift „Bevor Sie beginnen“ befindet sich in H2, während die Überschrift „Erstellen Sie Ihr Ergebnisdokument zuerst“ in H3. Ein sehbehinderter Benutzer, der einen Bildschirmleser und eine Tastatur verwendet, hört diese Texte als „H2, bevor Sie beginnen“ und „H3, erstellen Sie zuerst Ihr Befunddokument“.

Hinzufügen der richtigen Überschriften zu Inhalten für die Barrierefreiheit der Website

Faustregel: Ihre Hauptüberschrift muss in H1 sein, dann müssen die Unterüberschriften in H2, H3 und so weiter sein.

5. Begrenzung aufdringlicher Interstitials

Interstitials sind die lästige Taktik des Unterbrechungsmarketings, bei der Anzeigen auf der Seite erscheinen. Einige aufdringliche Interstitials können sich negativ auf Ihre SEO auswirken und Ihre Rankings nach unten ziehen. Aber das ist nicht der einzige Grund, warum Sie diese Pop-ups einschränken sollten. Abgesehen von den offensichtlichen Nachteilen schränken sie auch die Zugänglichkeit der Website ein.

Pop-ups, die eine Seite abdecken, YouTube-Videos, die automatisch in der Seitenleiste abgespielt werden – diese können Ihre Seite zu einem Albtraum für Benutzer mit Entwicklungsstörungen und sogar Angstzuständen machen. Wenn Sie gestresst sind, wenn Sie all diese „geräuschvollen“ Elemente auf und um eine Webseite herum haben, was mehr Benutzer, die eine Seite durch den Ton navigieren müssen, Probleme mit plötzlichen Geräuschen haben oder zusätzliche Schritte unternehmen müssen, um das Pop-up zu schließen. UPS?

Eines meiner Teammitglieder zum Beispiel fühlt sich beim Zugriff auf eine Website mit mehreren Interstitials körperlich krank, weil sie eine Reizüberflutung auslösen. Infolgedessen meiden sie diese Websites so weit wie möglich, um ihre Angst nicht auszulösen.

Die Beschränkung von Interstitials kann bei der Zugänglichkeit der Website helfen, da alle Arten von Benutzern problemlos auf Ihre Website zugreifen und sich darin aufhalten können.

6. Machen Sie Ihre Website bildschirmlesefreundlich

Es gibt Fälle, in denen sich das Inhaltslayout unserer Webseite aufgrund von Anzeigen und anderen Elementen unserer Seite plötzlich ändert. Dies wird als kumulative Layoutverschiebung oder CLS bezeichnet.

Diese Layoutverschiebungen können für sehbehinderte Benutzer frustrierend sein. Da sie auf Screenreader angewiesen sind, können diese Layoutverschiebungen dazu führen, dass sie Inhalte übersehen oder verwirrt sind, da der Screenreader plötzlich ändert, was sie lesen.

Screenreader wie NVDA lesen nicht nur den Inhalt der Seite, sondern auch genau, worauf der Cursor des Benutzers zeigt. Wenn sich also der Inhalt des Bereichs, auf den der Cursor zeigt, plötzlich verschiebt, muss der Benutzer zusätzliche Schritte unternehmen, um herauszufinden, wo er sich ursprünglich auf Ihrer Seite befand.

Stellen Sie für die Barrierefreiheit der Website sicher, dass Ihre Webseite über einen reservierten Bereich für dynamische Inhalte, bestimmte Abmessungen für Bilder und Videos sowie optimierte Schriftarten verfügt. Weitere Informationen finden Sie in unserem CLS-Tutorial hier.

7. Den Text lesbar machen

Es gibt zwei Aspekte der Textästhetik, auf die wir uns konzentrieren müssen, um sie lesbarer zu machen.

1. Schriftart und Schriftgröße

Sind Sie schon einmal auf einer Website gelandet, auf der Sie die Texte kaum lesen konnten, weil sie zu klein oder zu stilisiert sind? Es ist im Allgemeinen eine schlechte Praxis, den Text Ihrer Website schwer lesbar zu machen, da dies dazu führt, dass potenzielle Leads Ihre Seite frustriert verlassen. Wenn wir unsere Websites erstellen, möchten wir, dass sie so einfach wie möglich zu navigieren und zu verstehen sind. Zu stark stilisierte Schriftarten und kleine Schriftgrößen widersprechen diesem Prinzip.

Auf der anderen Seite können einige sehbehinderte Personen, die keine Bildschirmleseprogramme verwenden, dennoch Probleme mit Ihrer Website haben, selbst wenn die Schriftgröße für andere Benutzer groß genug ist. In diesem Fall möchten wir sicherstellen, dass unsere Website nicht abbricht, wenn Benutzer hineinzoomen.

Ein gutes Beispiel hierfür wären die SEO Hacker-Blogs. Ich zeige Ihnen meinen kürzlich veröffentlichten Artikel zur Durchführung eines On-Page-SEO-Audits.

Schriftart und Schriftgröße des SEO Hacker-Blogs für die Barrierefreiheit der Website

So sieht ein Blogbeitrag normalerweise aus, wenn wir darauf klicken. Aber wenn Sie „STRG“ und „+“ zusammen drücken, um zu zoomen:

SEO-Hacker-Blog-Zoom

So sieht der Blogbeitrag bei 150% Vergrößerung aus. Sie müssen nicht mit einer Bildlaufleiste nach links und rechts navigieren, da alles, was Sie brauchen, direkt vor Ihnen liegt.

Um das Design responsive zu gestalten, können Sie Ihren Webseiten Folgendes hinzufügen:

Das sehen Sie in unserem Blogbeitrag. Klicken Sie mit der rechten Maustaste, wählen Sie „Inspect“ und suchen Sie nach „Viewport“.

2. Farbschema

Einige Leute versuchen, mit ihrem Farbschema kreativ zu werden, landen jedoch bei einer Website, die einen geringen Kontrast zwischen Text und Hintergrund verwendet. Dies erschwert das Lesen sowohl für sehende als auch für sehbehinderte Personen. Designer sollten sich auch auf CTAs und Links konzentrieren und sicherstellen, dass der richtige Farbkontrast verwendet wird, damit sie leicht zu erkennen sind.

Die empfohlenen Farben wären immer noch schwarzer Text auf weißem Hintergrund, aber bei CTAs müssen wir kreativer sein. Als Faustregel gilt, rote und grüne Kombinationen zu vermeiden, um sie für Farbenblinde lesbar zu machen.

Sehen Sie sich zum Beispiel diesen CTA aus dem Podcast „Leadership Stack“ an.

Farbschema des Leadership-Stack für die Barrierefreiheit der Website

Abgesehen davon, dass die Nachricht klar ist, lässt der Kontrast von schwarzem Text auf gelbem Hintergrund den Anruf knallen und macht ihn leichter zu sehen und zu lesen.

8. Einfache Tastaturnavigation

Ihre Website mag ästhetisch ansprechend sein, aber ist sie für motorisch eingeschränkte Menschen einfach zu navigieren? Ein einfacher Test, den Sie durchführen können, besteht darin, mit Ihrer Tastatur auf Ihrer Website zu navigieren nur. Die am häufigsten verwendeten Tasten sind die Tabulator- und die Pfeiltasten. Stellen Sie sich beim Testen Ihrer Website folgende Fragen:

  1. Dauert das Navigieren auf Ihrer Webseite zu lange?
  2. Gibt es interaktive Elemente, auf die Sie nicht zugreifen können?
  3. Ist es schwer zu sagen, wo Sie sich auf der Seite befinden?

Wenn Ihre Antwort auf eine von ihnen ja lautet, sollten Sie Ihre Navigation für die Barrierefreiheit der Website optimieren.

Zuerst müssen Sie oben auf der Seite die Schaltfläche „Navigation überspringen“ oder „Zum Hauptinhalt springen“ hinzufügen, damit Benutzer, die nur über die Tastatur verfügen, die verschiedenen Navigationslinks überspringen können, wenn sie sie nicht benötigen. Stellen Sie als Nächstes sicher, dass alle Dropdown-Menüs mit den Pfeiltasten navigierbar sind und dass die verschiedenen Schaltflächen und Links über die Registerkartenschaltfläche erreichbar sind. Fügen Sie schließlich „Tastaturfokus“ hinzu, damit die Benutzer sehen können, wo sie sich auf der Seite befinden. Es könnte ein Highlight wie in der SEO Hacker-Navigationsleiste sein:

SEO Hacker Tastaturnavigation

Oder es könnte eine offensichtliche gestrichelte Linie um den Link sein.

9. Hinzufügen von Untertiteln zu Videos oder Anhängen eines Transkripts

Videos können Ihre Inhalte dynamisch machen, aber einige Vorkehrungen müssen für die Barrierefreiheit der Website berücksichtigt werden. Einige unserer Website-Benutzer sind entweder hörgeschädigt oder haben sensorische Probleme. In diesem Fall können Sie zwei Dinge tun: Erstens können Sie Ihren Videos Untertitel hinzufügen und zweitens ein Transkript erstellen.

Hinzufügen von Untertiteln zu Leadership Stack-Videos

Es gibt eine Vielzahl von Optionen, die Sie wählen können, um ein Transkript zu erstellen. Meine erste Wahl zum Erstellen von Transkripten für bereits veröffentlichte Videos ohne Untertitel ist die Verwendung der Diktierfunktion in Microsoft Word. Wenn das Video von mir ist, besteht meine andere Möglichkeit darin, vor dem Erstellen des Videos ein Skript zu erstellen und es als Transkript an die Seite anzuhängen.

Ein gutes Beispiel dafür sind Online-Kurse wie die Google Analytics Academy, bei denen die Transkripte entweder in Form von Links oder PDF-Anhängen vorliegen.

10. Vermeiden von Videos mit blinkenden Lichtern

Schließlich müssen wir sicherstellen, dass unsere Videos augenschonend sind. Einige Benutzer haben Lichtempfindlichkeit und blinkende Lichter können einen epileptischen Anfall oder einen Anfall auslösen. Triggerwarnungen können eine gute Idee sein, aber das bedeutet immer noch, dass bestimmte Nutzer nicht auf den Inhalt Ihres Videos zugreifen können. Um also zum Prinzip der Barrierefreiheit der Website zurückzukehren und auch um sicher zu gehen, stellen Sie sicher, dass Sie Ihre Videos nicht mit blinkenden Lichtern versehen.

Schlüssel zum Mitnehmen

Die Zugänglichkeit von Websites ist eine ethische Praxis, die Webentwickler anwenden müssen, um allen Arten von Menschen gerecht zu werden. Einige unserer SEO-Praktiken tragen bereits zur Barrierefreiheit der Website für alle bei, aber es gibt andere Praktiken, die wir zu unserem Arsenal hinzufügen können, um sicherzustellen, dass unsere Websites für behinderte Benutzer geeignet sind.

Hat Ihnen dieser Leitfaden bei der Barrierefreiheit von Websites geholfen? Teilen Sie mir Ihre Meinung mit, indem Sie unten kommentieren.



Source link