Testen von Drupal-Websites auf Barrierefreiheit mit WCAG 2.1

Veröffentlicht: 2023-05-16

Wussten Sie, dass jeder vierte Erwachsene in den USA eine Behinderung hat*? Das sind unglaubliche 61 Millionen Menschen, die möglicherweise von unzugänglichen Websites betroffen sind.

Als Drupal-Entwickler haben Sie die Möglichkeit, einen Unterschied zu machen, indem Sie sicherstellen, dass Ihre Website den Web Content Accessibility Guidelines (WCAG) entspricht. In diesem Blog untersuchen wir die wichtigsten Funktionen und Best Practices zum Testen der WCAG 2.1-Barrierefreiheit in Drupal, damit Sie Websites erstellen können, die für alle Benutzer inklusiv sind.

Barrierefreiheitstests auf der Drupal-Website

Was ist Barrierefreiheit (A11y)

Barrierefreiheit bedeutet, eine Website für möglichst viele Menschen nutzbar zu machen, insbesondere für Menschen mit Behinderungen. Worauf bezieht sich A11y? A11y bezieht sich einfach auf das Wort „Barrierefreiheit“, wobei 11 die Anzahl der Zeichen zwischen „A“ und „Y“ angibt.

WCAG und ihre Ursprünge

WCAG steht für Web Content Accessibility Guidelines. Es gilt als standardisierter Maßstab für die Barrierefreiheit von Websites. Die vom World Wide Web Consortium (W3C) erstellten WCAG-Richtlinien sind die beste und einfachste Möglichkeit, Ihre Website für jedermann nutzbar zu machen. Die WCAG-Richtlinien werden von den meisten Regierungs- und Gesundheitsorganisationen strikt befolgt, um sicherzustellen, dass die Website den Gesetzen zur Barrierefreiheit entspricht (z. B. Abschnitt 508).

Grundsätze der WCAG

Es gibt vier Hauptprinzipien der Barrierefreiheit, wenn Sie die WCAG-Konformität übernehmen möchten. Diese folgen dem Akronym „POUR“, das für Perceivable, Operable, Understandable und Robust steht.

Spürbar

Mit einfachen Worten: Der Inhalt sollte für die Sinne eines Benutzers wahrnehmbar sein. Das bedeutet, dass sie in der Lage sein müssen, die ihnen präsentierten Informationen zu erkennen. Dazu gehört, dass Benutzer Audioinhalte deutlich hören können und sicherstellen, dass sie von Hintergrundgeräuschen unterschieden werden können.

Bedienbar

Es geht darum sicherzustellen, dass Benutzer bequem auf Ihrer Website navigieren können und die Benutzeroberfläche benutzerfreundlich ist. Es darf keinen unzugänglichen Teil der Website oder Schritte geben, die Benutzer möglicherweise nicht ausführen können. Bei der Gestaltung Ihrer Webinhalte sollten Sie sich schnell bewegende und blinkende Inhalte vermeiden. Es sollte einfach sein, ohne Tastatur auf der Website zu surfen. Außerdem sollte sichergestellt werden, dass die Website auch für Benutzer, die keine Maus verwenden können, über die Tastatur zugänglich ist.

Verständlich

Der Nutzer muss in der Lage sein, die ihm präsentierten Informationen zu verarbeiten und die Nutzung und Navigation auf der Website nachzuvollziehen. Dazu gehört, den Text klar, lesbar und vorhersehbar zu gestalten, um sicherzustellen, dass die Seiten benutzerfreundlich und erwartungsgemäß angezeigt werden.

Robust

Dies unterstreicht, dass sich die Technologie weiterentwickeln und Ihre Website mit zukünftigen technologischen Weiterentwicklungen aufbauen kann. Als Faustregel gilt: Wenn sich die Technologie verändert und weiterentwickelt, sollten die Inhalte auch zugänglich bleiben. Es muss zudem von einem breiten Spektrum an Nutzern mit unterschiedlichen Behinderungen verständlich sein und dennoch leicht verständlich bleiben. Die Website ermöglichte beispielsweise die Kompatibilität mit der neuesten Version von Bildschirmleseprogrammen.

Warum sollten Sie sich an die WCAG halten?

Nachfolgend sind einige der Vorteile der WCAG-Implementierung aufgeführt

  • Eine barrierefreie Website stärkt das Wohlwollen Ihrer Marke und verbessert die Suchmaschinenoptimierung. Ihre Website wird in den Suchmaschinenergebnissen höher gerankt.
  • Eine barrierefreie Website ermöglicht ein größeres Engagement, eine größere Reichweite und eine bessere Bindung, da Sie die Barrieren, die eine breite Palette von Menschen daran hindern, auf Ihre Inhalte zuzugreifen, effizient beseitigt haben.
  • Sobald WCAG als Teil einer Website implementiert ist, gilt es als Standard.

WCAG 2.0/2.1-Erfolgskriterien: Die am weitesten verbreiteten

  1. Jedes Eingabefeld auf der Website verfügt über eine entsprechende Beschriftung
  2. Dekorative Inhalte werden so umgesetzt, dass sie von unterstützender Technologie ignoriert werden können. Zum Beispiel dekorative Bilder, die von Screenreadern ignoriert werden
  3. Für alle vorab aufgezeichneten Audio-/Videoinhalte werden Untertitel bereitgestellt
  4. Für die Audioinhalte steht eine Gebärdensprachdolmetschung zur Verfügung
  5. Eine sinnvolle Reihenfolge des Inhalts, zum Beispiel werden die Überschriften auf jeder Seite in einer sequentiellen Reihenfolge platziert
  6. Der Benutzer kann den Ton anhalten oder stoppen oder die Audiolautstärke unabhängig von der Gesamtlautstärke des Systems steuern, um Videos automatisch abzuspielen.
  7. Das Kontrastverhältnis von Text und Textbildern beträgt 4,5:1, bei großformatigen Texten und Bildern beträgt es 3:1. Das Kontrastverhältnis gilt nicht für dekorative Inhalte oder Logos oder Markennamen
  8. Schwacher oder kein Hintergrundton. Das aufgezeichnete Audio/Video enthält keine Hintergrundgeräusche
  9. Alle Funktionen des Inhalts sind über die Tastaturschnittstelle zugänglich. Es wird keine Keyword-Falle geben.
  10. Geben Sie den Benutzern genügend Zeit, die Inhalte durchzulesen und zu nutzen
  11. Wenn der Inhalt zeitbasiert ist, kann der Benutzer entweder pausieren oder die Zeitbeschränkung anpassen
  12. Bei sich schnell bewegenden Inhalten, wie z. B. automatischen Karussells, werden dem Benutzer Optionen zum Anhalten oder Stoppen angezeigt
  13. Wenn die Sitzung des authentifizierten Benutzers abläuft, kann der Benutzer nach der erneuten Authentifizierung die Sitzung ohne Datenverlust fortsetzen.
  14. Seitentitel, Überschriften und Beschriftungen beschreiben das Thema der Webseite
  15. Der Tastaturfokus ist sichtbar und gut hervorgehoben
  16. Fokussierbare Komponenten werden in einer Reihenfolge fokussiert, die Bedeutung und Bedienbarkeit anzeigt.
  17. Jeder Abschnitt der Webseite wird von einer Abschnittsüberschrift begleitet
  18. Mit Ausnahme dekorativer Bilder verfügen alle Bilder über aussagekräftigen Alt-Text
  19. Auf Audio, Video, Formulare, Dropdown-Menüs, Ankertext, URLs und Alternativtext kann über die Tastatur und den Bildschirmleser zugegriffen werden
  20. Die Klarheit des Inhalts passt sich der Zoomstufe der Seite an. Selbst bei maximaler Zoomstufe sind Inhalte gut sichtbar
  21. Das Kopf- und Fußzeilenmenü mit Hilfekontext sollte auf allen Seiten der Website verfügbar sein
  22. Die Websites verfügen über eine ordnungsgemäße Implementierung von Hover- und Fokuszuständen

Bildschirmleseprogramme

Viele Menschen mit Sehbehinderungen nutzen Bildschirmlupen und Screenreader. Ein Screenreader ist eine Software, die den auf dem Bildschirm angezeigten digitalen Text laut vorliest. Einige Beispiele für Screenreader sind:

  • Bezahlte Produkte wie JAWS (Windows) und Dolphin Screen Reader (Windows).
  • Freeware wie NVDA (Windows), ChromeVox (Chrome) und Orca (Linux).
  • Im Betriebssystem integrierte Software wie VoiceOver (macOS, iPadOS, iOS), Narrator (Windows), ChromeVox (unter Chrome OS) und TalkBack (Android).

Drei Stufen der Zugänglichkeit

WCAG 2.1 verfügt über drei Stufen von Erfolgskriterien

  • Level A: Alle 30 wesentlichen Erfolgskriterien der WCAG 2.0 sind erfüllt. Mindestens alle Websites sollten dieses Maß an Konformität erreichen.
  • Stufe AA: Alle Erfolgskriterien der Stufe A sind erfüllt und weitere 28 Barrierefreiheits-Erfolgskriterien sind erfüllt. Mit dieser Stufe wird ein breiteres Spektrum an Barrierefreiheit erreicht und ist häufig das Ziel, das die meisten Entwicklungsteams erreichen möchten.
  • Stufe AAA: Die Website sollte alle drei Stufen der Erfolgskriterien erfüllen, einschließlich 28 zusätzlicher Erfolgskriterien. Diese Ebene ist normalerweise speziellen Websites wie Regierungsorganisationen vorbehalten.

Die meisten WCAG-kompatiblen Websites fallen weitgehend unter die Erfolgskriterien für Barrierefreiheit der Stufe A oder AA.

Barrierefreiheitstest einer Drupal-Website

Die folgenden Schritte werden ausgeführt, um einen Barrierefreiheitstest für eine Drupal-Website durchzuführen

  1. Führen Sie ein Google Chrome Lighthouse-Audit durch und beheben Sie die hervorgehobenen Barrierefreiheitsprobleme
  2. Führen Sie ein Wave-Tool-Audit durch
  3. Überprüfen Sie den Tastaturhervorhebungsfokus und die Tab-Reihenfolge der Seite manuell
  4. Validieren Sie die Seite mit der erforderlichen Screenreader-Software. Zum Beispiel VoiceOver
  5. Überprüfen Sie die Zugänglichkeit der Website auf allen Auflösungen, z. B. auf Breitbild-Desktops, Laptops, Tabs und Mobilgeräten
  6. Validieren Sie den Site-Code mit den W3C-Validierungstools für Markup und CSS
  7. Überprüfen Sie den Farbkontrast der Website, um sicherzustellen, dass er den Standards (4:5:1) entspricht, indem Sie ein Chrome-Erweiterungstool wie Kontrast oder eine Anwendung wie Color Contrast Analyzer verwenden

Wie Drupal dabei hilft, Barrierefreiheitsstandards zu erreichen

Die Webentwicklung muss Barrierefreiheit beinhalten, um sicherzustellen, dass Websites funktionsfähig und für Menschen mit Behinderungen zugänglich sind. Drupal ist bekannt für sein unermüdliches Engagement für Barrierefreiheit. Sehen Sie sich an, wie Drupal die Barrierefreiheit fördert und welche Tools und Funktionen es bereitstellt, um Websites benutzerfreundlicher zu machen.

1. Barrierefreiheit in Drupal einbauen

Das Ziel des Drupal-Entwicklungsteams war schon immer, eine Plattform zu schaffen, die von möglichst vielen Benutzern genutzt werden kann. Bei der Entwicklung der Drupal-Kernplattform werden die Anforderungen der Web Content Accessibility Guidelines (WCAG) 2.1 Level AA befolgt. Dies weist darauf hin, dass eine Vielzahl von Behinderungen, beispielsweise solche, die das visuelle, auditive, physische, verbale, kognitive und neurologische System betreffen, auf Drupal-Websites zugreifen können.

2. Standard-Eingabehilfen

  • Da sie sich dank des responsiven Designs an verschiedene Bildschirmgrößen und Geräte anpassen können, sind die Standardthemen von Drupal für diejenigen geeignet, die mobile Geräte oder unterstützende Technologien verwenden.
  • Drupal erstellt semantisches HTML-Markup, das Screenreadern und anderen unterstützenden Technologietools dabei hilft, die Struktur der Website zu verstehen.
  • Drupal enthält ein Feld zum Hinzufügen von Alternativtext zu Fotos, was Blinden hilft, den Inhalt der Website zu verstehen.
  • Drupal unterstützt die Tastaturnavigation, was für Benutzer, die keine Maus verwenden können, von entscheidender Bedeutung ist.
  • Mit Drupal werden einfach zu verwendende und navigierbare Formulare mit unterstützender Technologie generiert, auf die zugegriffen werden kann.

3. Drupal bietet Plugins und Module für Barrierefreiheit

Um die Barrierefreiheit einer Website zu verbessern, stellt Drupal eine Vielzahl von Barrierefreiheitsmodulen und Plugins bereit, die eingesetzt werden können. Einige beliebte Barrierefreiheitsmodule und Plugins sind wie folgt:

  • Editoria11y Accessibility Checker: Dieses Modul untersucht eine Website auf Probleme mit der Barrierefreiheit und gibt Empfehlungen für Lösungen.
  • CKEditor Accessibility Plugin: Dieses Add-on verbessert die Barrierefreiheit des weit verbreiteten Texteditors für Drupal, CKEditor.
  • All-in-one-Barrierefreiheits-Widget: Dieses Modul enthält ein Barrierefreiheits-Widget, mit dem Benutzer die Textgröße, den Kontrast und andere barrierefreie Einstellungen der Website ändern können.
  • A11Y: Formular-Helfer: Dieses Modul trägt dazu bei, dass alle Drupal-Webformulare den Barrierefreiheitsstandards entsprechen
  • Block-ARIA-Landmark-Rollen: Dieses Modul fügt den Blockkonfigurationsformularen zusätzliche Elemente hinzu, die es Benutzern ermöglichen, einem Block eine ARIA-Landmark-Rolle und/oder ARIA-Beschriftungen zuzuweisen.

4. Starke Community-Unterstützung für Barrierefreiheit

Entwickler und Designer, die sich für Barrierefreiheit engagieren, machen einen beträchtlichen Teil der Drupal-Community aus. Eine von der Community geleitete Initiative, Drupal für Menschen mit Behinderungen zugänglicher zu machen, ist die Drupal Accessibility Group. Die Gruppe bietet Anleitungen, Tools und Best Practices für die Entwicklung von ADA-konformen Drupal-Websites.

Verweise:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Abschließende Gedanken

Drupal ist ein effektives Open-Source-Content-Management-System, das eine Vielzahl von Funktionen, Tools und Plugins zur Verbesserung der Barrierefreiheit einer Website bereitstellt. Aufgrund seines Engagements für Barrierefreiheit und der Stärke seiner auf Barrierefreiheit ausgerichteten Community ist Drupal eine fantastische Plattform zum Erstellen von Websites, die für Menschen mit Beeinträchtigungen nutzbar und zugänglich sind.
Ich hoffe, dass dieser Artikel Ihnen den erforderlichen Einblick in Barrierefreiheitstests mit WCAG 2.1 bietet. Möchten Sie eine barrierefreie Drupal-Website von Grund auf erstellen oder Ihre aktuelle Website barrierefreier machen? Das würden wir gerne realisieren! Lass uns reden!