9 bewährte Praktiken zur Barrierefreiheit von Websites, die Sie nachahmen können

Die Barrierefreiheit im Internet ist für die Integration und die Benutzerfreundlichkeit von entscheidender Bedeutung. Dazu gehören Praktiken wie die Einhaltung der WCAG, Alt-Text für Bilder, leicht lesbare Inhalte, Tastaturfunktionen und gut geschriebenes HTML.
Zuletzt aktualisiert 1. November 2023

Was kommt Ihnen in den Sinn, wenn das Thema Barrierefreiheit auftaucht?

Sie denken dabei vielleicht an die Zugänglichkeit von Verkehrsmitteln und Gebäuden. Das sind zwar wichtige Aspekte, aber Chancengleichheit bedeutet auch, dass alle Menschen Zugang zu Online-Informationen erhalten.

Hier kommt die Barrierefreiheit von Websites ins Spiel, eine integrative Methode zur Erstellung von Websites, die allen Besuchern zugänglich sind und mit denen sie interagieren können. Möchten Sie Ihre eigene Website barrierefrei gestalten? Lesen Sie weiter, um mehr über barrierefreies Webdesign zu erfahren:

 

Was ist Barrierefreiheit im Internet?

Barrierefreiheit von Websites ist die Methode zur Erstellung von Websites, Anwendungen und Technologien, die allen Besuchern oder Nutzern - auch solchen mit Beeinträchtigungen oder Einschränkungen - den Zugang und die Interaktion ermöglichen.

Wer braucht barrierefreie Websites?

Die Barrierefreiheit im Web beruht auf Gestaltungsprinzipien, die es Menschen mit Einschränkungen oder Schwierigkeiten ermöglichen, eine ähnliche Erfahrung zu machen wie Menschen ohne Behinderungen. Zu diesen Behinderungen können gehören:

  • Auditiv
  • Blindheit
  • Lernen
  • Neurologisch
  • Physisch
  • Sprache
  • Vision

Auch andere Nutzergruppen benötigen ein barrierefreies Webdesign, wie die folgenden:

  • Personen mit einer langsamen Internetverbindung oder begrenzter Internet-Bandbreite
  • Menschen mit Geräteeinschränkungen, z. B. mit einem kleinen Bildschirm
  • Personen mit situations- oder umweltbedingten Einschränkungen, z. B. an einem Ort mit hellem Sonnenlicht oder in einem fahrenden Zug
  • Menschen mit kurzfristigen Behinderungen wie einem gebrochenen Handgelenk
  • Ältere Menschen mit altersbedingt eingeschränkten Fähigkeiten

Gibt es ein Gremium, das für Initiativen zur Barrierefreiheit von Websites zuständig ist?

Ja. Die Mitglieder der Web Accessibility Initiative (WIP) des World Wide Web Consortium (W3C) sind für die Veröffentlichung der Web Content Accessibility Guidelines (WCAG) verantwortlich.

Die WCAG sind eine Reihe von Empfehlungen, um Webinhalte für Menschen mit Behinderungen nutzbar zu machen.

Warum ist die Barrierefreiheit einer Website wichtig für die Suchmaschinenoptimierung (SEO)?

Die Zugänglichkeit von Websites ist kein SEO-Rankingfaktor. Dennoch ist es für SEO-Fachleute wichtig, bewährte Verfahren für die Barrierefreiheit von Websites anzuwenden. Warum?

Ein barrierefreies Webdesign ermöglicht es Suchmaschinen, Ihre Website zu durchsuchen und den Inhalt besser zu verstehen, wodurch die Auffindbarkeit verbessert wird. Darüber hinaus verbessert die Barrierefreiheit einer Website die Nutzererfahrung, da sie es Menschen mit Einschränkungen und Behinderungen ermöglicht, auf Informationen auf Ihrer Website zuzugreifen und mit ihr zu interagieren, wie sie es benötigen.

Barrierefreiheit ist zwar kein Ranking-Faktor, aber die Umsetzung von Best Practices für barrierefreie Websites passt gut zu SEO und fördert die Markentreue.

9 bewährte Praktiken für die Zugänglichkeit von Websites

Nachdem Sie nun die Definition der Barrierefreiheit einer Website kennen, lassen Sie uns nun neun bewährte Verfahren für die Barrierefreiheit einer Website durchgehen:

  1. Machen Sie Ihr Team mit den WCAG, den neuesten Aktualisierungen der Richtlinien und den geltenden Compliance-Anforderungen vertraut.
  2. Fügen Sie Alt-Text-Tags für Ihre Bilder ein
  3. Machen Sie Ihren Inhalt leicht lesbar und übersichtlich
  4. Aktivieren Sie die Audiokontrolle für die Benutzer Ihrer Website
  5. Bereitstellung der vollen Website-Funktionalität mit der Tastatur
  6. Vermeiden Sie blinkende Inhalte
  7. Gestalten Sie Ihre Website einfach zu navigieren
  8. Nützliche Fehlermeldungen bereitstellen
  9. Verwenden Sie gut geschriebenen HTML-Code, der mit unterstützenden Technologien kompatibel ist.

Schauen wir uns jede einzelne davon an:

1. Machen Sie Ihr Team mit den WCAG, den neuesten Aktualisierungen der Richtlinien und den geltenden Compliance-Anforderungen vertraut

Für Ihr Team ist es wichtig, die vier Grundsätze zu kennen, auf denen die WCAG basieren. Die vier Prinzipien haben ein Akronym aus POUR, das für steht:

  • Wahrnehmbar: Die barrierefreie Gestaltung einer Website muss Textalternativen, Untertitel und Hilfsmittel für die Besucher anbieten.
  • Bedienbar: Alle Nutzer müssen durch eine Website navigieren und mit ihr interagieren können.
  • Verständlich: Der Text einer Website muss lesbar sein, auch für Benutzer mit visuellen Einschränkungen wie Farbenblindheit. Außerdem müssen die Seiten logisch strukturiert sein, damit alle Nutzer leicht durch sie navigieren können.
  • Robust: Eine barrierefreie Website muss über einen gut geschriebenen HTML-Code verfügen, damit verschiedene Hilfstechnologien und Plattformen darauf zugreifen und sie richtig interpretieren können.

Die internationalen WCAG-Standarddokumente enthalten Einzelheiten darüber, wie Website-Besitzer ihre Websites besser zugänglich machen können.

Darüber hinaus muss Ihr Team die in Ihrer Region geltenden Compliance-Anforderungen kennen. In den USA beispielsweise verbietet der Americans Disability Act (ADA) die Diskriminierung von Menschen mit Behinderungen. Das 1990 eingeführte ADA gilt auch für die Zugänglichkeit von Websites.

Das europäische Gesetz zur Barrierefreiheit schreibt vor, dass Produkte und Dienstleistungen wie Computer, Smartphones und E-Commerce-Plattformen mit unterstützenden Technologien kompatibel sein müssen, damit alle Nutzer darauf zugreifen können.

Das Gleichstellungsgesetz des Vereinigten Königreichs fördert die Gleichstellung in der Gesellschaft, indem es auch die Zugänglichkeit von Websites regelt, die jedem den Zugang zu Online-Informationen ermöglicht.

2. Fügen Sie Alt-Text-Tags für Ihre Bilder ein

Bieten Sie Textalternativen zu den Bildern Ihrer Website für Website-Besucher, die Bildschirmlesegeräte verwenden, und für Nutzer mit begrenzter Bandbreite. Wenn Sie beschreibende Alt-Text-Tags für Ihre Bilder hinzufügen, können alle Nutzer das Bild auf Ihrer Seite "sehen".

Alt-Text erscheint auf einer Seite, wenn ein Bild auf der Seite nicht geladen werden kann, wie im folgenden Beispiel gezeigt. Alt-Text bietet auch Bildschirmlesern Bildbeschreibungen für sehbehinderte Benutzer.

Alt-Text für ein im Blog angezeigtes Bild wird angezeigt, wenn das Bild nicht geladen wird

3. Bereitstellung von Audiotranskripten und Videountertiteln

Um sicherzustellen, dass Ihre Website auch für hörgeschädigte Nutzer oder Besucher, die im Moment keinen Ton abspielen können, zugänglich ist, sollten Sie Audiotranskripte und Videountertitel bereitstellen. Auf diese Weise können die Nutzer die Informationen auf Ihrer Website durch das Lesen der Audiotranskription und der Videountertitel abrufen.

Pro-Tipp: Achten Sie bei Videos darauf, dass die Untertitel mit dem Ton synchronisiert sind!

Ted.com bietet in der Regel Audiotranskripte von Podcasts und Videountertitel von Ted Talks auf seiner Website an, wie im folgenden Beispiel gezeigt.

Schaltfläche "Transkript lesen" unter einem Video

3. Machen Sie Ihren Inhalt leicht lesbar und übersichtlich

Barrierefreies Webdesign hat Farben und Kontraste, die es jedem ermöglichen, den Inhalt zu sehen und zu lesen. Denken Sie an Website-Besucher, die sehbehindert oder farbenblind sind. Können sie den Text und andere Inhalte Ihrer Website klar erkennen?

Das von den WCAG empfohlene Kontrastverhältnis von Text und Bildern auf Seiten beträgt in den meisten Fällen mindestens 4,5:1. Sie können das Kontrastverhältnis einer Website mit kostenlosen Tools wie:

Mit diesen Tools können Sie die Farbkombinationen für den Hintergrund und den Vordergrund Ihrer Website testen, um ihr Kontrastverhältnis zu ermitteln. Sie geben auch eine Bewertung ab.

Die Ergebnisse des Positivkontrast-Checkers zeigen einen Beispieltext mit diesen Farben, ein Kontrastverhältnis und eine Bewertung.

4. Aktivieren Sie die Audiokontrolle für die Benutzer Ihrer Website

Machen Sie es Ihren Nutzern leicht, Ihre Inhalte zu hören. Ermöglichen Sie ihnen außerdem, den Hintergrundton auf Ihrer Website einzustellen, anzuhalten oder zu beenden. Auf diese Weise können Ihre Besucher Ihre Website auch dann nutzen, wenn sie an ihrem aktuellen Standort kein Audio abspielen können.

5. Bereitstellung der vollen Funktionalität der Website mit der Tastatur

Einige Besucher Ihrer Website können aufgrund einer Behinderung oder fehlender Hilfsmittel weder ein Trackpad noch eine Maus benutzen. Dennoch müssen die Funktionen auf Ihrer Website über eine Tastatur zugänglich sein.

Benutzer können mit den Pfeiltasten auf einer Seite nach oben und unten blättern. Die Benutzer müssen in der Lage sein, mit der Tabulatortaste von einem Seitenelement zum anderen zu springen, wie im folgenden Beispiel gezeigt.

On-Screen-Selektor, der von den Breadcrumb-Navigationslinks zu den Bildern auf der Seite springt

6. Vermeiden Sie blinkende Inhalte

Nach den WCAG können Inhalte, die mehr als dreimal in einer Sekunde blinken, Krampfanfälle auslösen. Machen Sie Ihre Website benutzerfreundlich für alle und vermeiden Sie blinkende oder blinkende Inhalte.

Wenn Sie blinkende Inhalte veröffentlichen müssen, sollten Sie Ihre Website-Besucher darauf hinweisen, dass die Seite, die sie aufrufen, blinkende Inhalte enthält.

7. Machen Sie Ihre Website einfach zu navigieren

Helfen Sie all Ihren Nutzern zu wissen, wo sie sich auf Ihrer Website befinden und welche anderen Seiten sie besuchen können. Ein klarer und prägnanter Seitentitel sagt Ihren Lesern, welche Informationen sie von einer bestimmten Seite erwarten können.

Die Brotkrümelnavigation und andere hilfreiche Links leiten die Nutzer zu anderen relevanten Seiten, die für sie hilfreich sein könnten.

Brotkrumen-Navigationsmenü am oberen Rand der Seite mit Angabe der Kategorie und Unterkategorie der Seite

8. Nützliche Fehlermeldungen bereitstellen

Wenn ein Benutzer einen Eingabefehler begeht, z. B. ein Pflichtfeld nicht ausfüllt, sollten Sie ihn mit einer nützlichen Fehlermeldung darauf hinweisen. Eine barrierefreie Website beschreibt den Fehler und weist die Nutzer an, wie sie ihren Fehler korrigieren können, wie im folgenden Beispiel, das den Nutzer darauf hinweist, dass die angegebene E-Mail-Adresse eine ungültige Domäne hat.

Fehlermeldung für E-Mail-Anmeldeformular

9. Verwenden Sie gut geschriebenen HTML-Code, der mit unterstützenden Technologien kompatibel ist.

Barrierefreie Websites haben einen gut geschriebenen HTML-Code, der sie mit unterstützenden Technologien kompatibel macht. Einige bewährte Praktiken für die Zugänglichkeit von Websites, die sicherstellen, dass unterstützende Technologien eine Website interpretieren können, sind:

  • Start- und End-Tags in HTML-Codes haben
  • Vermeiden Sie doppelte Attribute innerhalb desselben HTML-Tags
  • Eindeutige IDs für alle Elemente verwenden

Förderung der Inklusion durch bewährte Verfahren für die Barrierefreiheit von Websites

Eine barrierefrei gestaltete Website ermöglicht jedem den Zugang zu Informationen und die Interaktion mit Ihrer Website. Die Barrierefreiheit einer Website ist zwar kein SEO-Ranking-Faktor, verbessert aber die Auffindbarkeit Ihrer Website.

Darüber hinaus verbessert die Barrierefreiheit von Websites auch die Benutzerfreundlichkeit und erhöht die Markentreue. Beginnen Sie noch heute mit der Umsetzung dieser bewährten Verfahren für die Barrierefreiheit von Websites!

Wir wollen Ergebnisse erzielen Gemeinsam Grüner Pfeil