Wie man die Zugänglichkeit von Websites verbessert: ADA, WCAG und bewährte Praktiken

"Die Zugänglichkeit von Websites ist eine grundlegende Voraussetzung für die Schaffung integrativer digitaler Erlebnisse. Angesichts von Millionen von Nutzern, die auf unterstützende Technologien angewiesen sind oder mit situationsbedingten Einschränkungen zu kämpfen haben, müssen Unternehmen sicherstellen, dass ihre Websites so gestaltet sind, dass jeder auf Informationen zugreifen, einfach navigieren und ohne Barrieren interagieren kann."

"Wir müssen die Zugänglichkeit sicherstellen, um zu vermeiden, dass irgendjemand von Produkten oder Dienstleistungen ausgeschlossen wird", sagte Reginé Gilbert, Autorin eines Buches über integratives digitales Design. In einem Interview merkte sie außerdem an, dass "ein Unternehmen zugänglicher zu machen, es für mehr Kunden öffnet."

Zugänglichkeit von Websites ist wichtig, weil etwa 16 Prozent der Weltbevölkerung eine Behinderung haben. Trotzdem bieten viele Websites und Online-Anwendungen keinen gleichberechtigten Zugang, so dass die Nutzer frustrierende oder unfaire Erfahrungen machen.

Zurzeit sind nur etwa 3 Prozent der Websites vollständig zugänglich. Die gute Nachricht ist, dass dies verbessert werden kann.

Mit den richtigen Werkzeugen und Ressourcen können Unternehmen bestehende Websites aktualisieren oder neue erstellen, die vollständig barrierefrei sind und es allen Nutzern, unabhängig von ihren Fähigkeiten, ermöglichen, mit ihren Produkten und Dienstleistungen in Kontakt zu treten.

Barrierefreiheit von Websites ist für jedes Unternehmen erreichbar, das dem Priorität einräumt.

Lesen Sie weiter, um mehr über die Barrierefreiheit von Websites, die wichtigsten Barrierefreiheitsmerkmale und die Überprüfung, ob Ihre Website für alle zugänglich ist, zu erfahren.

Was ist Website-Zugänglichkeit?

Zugänglichkeit von Websites oder Web-Zugänglichkeit bedeutet, dass sichergestellt wird, dass jeder Websites im World Wide Web nutzen kann, auch Menschen mit körperlichen Behinderungen, vorübergehenden Herausforderungen oder begrenzter Internet-Geschwindigkeit.

Zugänglichkeit von Websites ist wichtig, weil sie gewährleistet, dass alle Personen gleichermaßen Zugang zu Online-Informationen und -Diensten haben. Menschen mit Behinderungen sind oft auf unterstützende Technologien wie Bildschirmlesegeräte, Textlupen und Spracherkennungssoftware angewiesen, um im Internet zu navigieren.

Außerdem hilft die Barrierefreiheit von Websites Menschen mit situationsbedingten Behinderungen, z. B. Personen, die mobile Geräte an lauten Orten benutzen, Menschen mit vorübergehenden Verletzungen und Nutzer mit langsamen Internetverbindungen oder begrenzter Bandbreite.

Was ist die Bedeutung der Barrierefreiheit von Websites?

Eine barrierefreie Website zu erstellen, ist für Ihr Unternehmen und Ihre Kunden von Vorteil, kann aber auch zu rechtlichen Schritten führen.

Als Website-Betreiber sind Sie dafür verantwortlich, allen Mitgliedern der verschiedenen Behindertengemeinschaften, zu denen mehr als ein Schätzungsweise jeder vierte Erwachsene in den USA (oder 27 %) hat eine Behinderung.

Wenn diese Anforderungen an die Barrierefreiheit von Websites nicht eingehalten werden...

Wenn die Verpflichtungen zur Barrierefreiheit gemäß Gesetzen wie dem Americans with Disabilities Act (U.S.), Abschnitt 508 des Rehabilitation Act und dem Accessibility for Ontarians with Disabilities Act (Kanada) kann zu folgendem führen:

1. Rechtsrisiken: Unternehmen können mit Klagen, behördlichen Untersuchungen oder finanziellen Strafen für die Nichteinhaltung konfrontiert werden.
2. Rufschädigung: Mangelnde Zugänglichkeit kann der Glaubwürdigkeit der Marke schaden und eher Ausgrenzung als Inklusion signalisieren.
3. Verlust von Kunden: Benutzer, die nicht auf Ihre Website zugreifen können, wenden sich wahrscheinlich an Konkurrenten mit integrativeren digitalen Angeboten.
4. Verpasste Marktchancen: Menschen mit Behinderungen stellen einen bedeutenden Kundenstamm dar, der nicht mehr erreicht werden kann.
5. Betriebliche Herausforderungen: Die nachträgliche Herstellung von Barrierefreiheit ist oft teurer und komplexer, als sie von Anfang an einzubauen.

Welche Zugänglichkeitsmerkmale sollte eine Website haben?

Es gibt Menschen mit Hörproblemen, verschiedenen Sehbehinderungen wie Blindheit, Teilblindheit und Farbenblindheit, Krampfanfällen, eingeschränkter Mobilität und motorischen Problemen, neurologischen Problemen, Sprachschwierigkeiten und mehr.

Jede dieser Bedingungen stellt besondere Herausforderungen an die Zugänglichkeit einer Website und kann Anpassungen an verschiedenen Website-Komponenten erfordern.

Hier sind daher die Merkmale, die Sie beachten müssen, um sicherzustellen, dass Ihre Website dem Standard entspricht:

1. Verwenden Sie kontrastreiche Farben:

Personen mit Sehbehinderungen, insbesondere solche mit bestimmten Arten von Farbenblindheit, haben Schwierigkeiten, Text zu lesen, wenn dieser nicht genügend Kontrast zu seinem Hintergrund aufweist.

Um die Standards der WCAG 2.0, 2.1 oder 2.2 auf Stufe AA zu erfüllen, muss das Kontrastverhältnis mindestens 4.5:1 für Text im Vergleich zu seinem Hintergrund und 3:1 für Titel im Vergleich zu ihrem Hintergrund betragen.

Es ist wichtig zu verstehen, dass diese Anforderung für alle wichtigen Informationen auf Ihrer Website gilt.

Dies umfasst sowohl textbasierte Inhalte als auch andere visuelle Elemente. Zu letzteren gehören wichtige Icons, Schnittstellenteile und andere grafische Elemente, die das Verständnis der auf der Website dargestellten Inhalte oder Funktionen erleichtern.

2. Einfügen von alternativem Text für jedes Bild:

Da Bildschirmlesegeräte keine Bilder verstehen können, benötigen blinde oder sehbehinderte Kunden Textbeschreibungen, um den Kontext zu erhalten. Durch Hinzufügen von alternativem Text (allgemein als Alt-Text bekannt) in den Einstellungen eines Bildes können Sie es dem Bildschirmlesegerät ermöglichen, den Inhalt des Bildes zu übermitteln.

Die Erstellung von Alt-Text kann eine Herausforderung sein, ist aber für die Benutzer von großem Nutzen. Er sollte präzise und prägnant sein und sich auf den Kontext des Bildes beziehen.

Er sollte nicht länger als 125 Zeichen sein und nicht die Phrase "Bild von" enthalten, aber er muss korrekte Interpunktion verwenden und jeden wichtigen Text im Bild enthalten. Bilder, die nur dekorativen Zwecken dienen, benötigen keinen Alt-Text, also kennzeichnen Sie sie als dekorativ.

3. Unterschriften & Transkripte für Videos, die Audio-Inhalte haben:

Wenn eine Website bedeutende Video-Inhalte enthält, die wichtige Informationen vermitteln, muss sie Untertitel bereitstellen. Untertitel funktionieren wie Filmuntertitel.

Sie zeigen, was die Personen auf dem Bildschirm sagen und erklären nichtsprachliche Elemente wie wichtige Geräusche und Soundeffekte. Es ist wichtig zu wissen, dass Untertitel für Videos mit Ton gedacht sind. Diashows und Bildschirmaufnahmen ohne Ton benötigen keine Untertitel.

Für welche Videoplattform Sie sich auch entscheiden, stellen Sie sicher, dass die angebotenen Untertitel korrekt und konsistent sind. Dies ist besonders wichtig bei automatisch generierten Untertiteln, die nicht immer korrekt sind. Wenn Sie planen, automatisch generierte Untertitel zu verwenden, sollten Sie diese gemäß den WCAG auf ihre Genauigkeit hin überprüfen.

4. Tastaturnavigation aktivieren:

Nicht jede Website unterstützt automatisch die Navigation über die Tastatur. Überprüfen Sie bei der Erstellung einer Website, ob die Tab-Reihenfolge korrekt ist und ob Dropdown-Menüs bei ausschließlicher Verwendung einer Tastatur richtig funktionieren.

Die beste Methode, dies zu erreichen, besteht darin, Websites manuell zu testen. Öffnen Sie sie in einem Browser und versuchen Sie, mit der TAB-Taste zu navigieren. Prüfen Sie, ob Sie alle Inhalte erreichen können oder ob Sie auf Hindernisse stoßen.

Alle Probleme, auf die Sie stoßen, wirken sich auch auf Besucher aus, die sich auf die Tastaturnavigation verlassen. Seien Sie besonders vorsichtig mit Themen, die benutzerdefinierte Dropdown-Menüs enthalten, da diese in ihrer Standardkonfiguration möglicherweise nicht ohne Maus oder Trackpad zugänglich sind.

5. Hinzufügen von ARIA-Attributen

ARIA-Attribute können in HTML eingefügt werden, um den Zweck und den Inhalt verschiedener Elemente für Benutzer von Hilfsmitteln, insbesondere Bildschirmlesegeräten, zu verdeutlichen. Sie bieten zusätzlichen Kontext über das Layout einer Webseite, ihren Inhalt und liefern weitere Informationen über Teile der Benutzerschnittstelle.

Einige ARIA-Attribute geben beispielsweise den Status von Komponenten an, z. B. ob Dropdown-Menüs und Akkordeons geöffnet sind oder ob benutzerdefinierte Kontrollkästchen aktiviert sind.

Es ist wichtig, daran zu denken, dass Screenreader in der Lage sind, native semantische HTML-Elemente wie <nav>, <button>, <input> oder <a> zu interpretieren. ARIA ist nützlich für Website-Abschnitte, denen semantische Rollen fehlen, oder um Nutzern von Hilfstechnologien zusätzliche Informationen über benutzerdefinierte Elemente zu geben. Dazu gehören Dinge wie Hinweise oder Fehlerbenachrichtigungen.

6. Wählen Sie lesbare Schriftarten:

Schriftarten spielen eine entscheidende Rolle im Webdesign. Manche Schriftarten sind leichter zu lesen als andere, was die Zugänglichkeit der Website entweder verbessern oder beeinträchtigen kann.

Was macht Schriftarten leicht lesbar?

• Sie sind einfach und bekannt
• Ihre Buchstaben und Symbole sind klar unterscheidbar
• Es gibt einen angemessenen Abstand zwischen den Buchstaben und Linien
• Sie sind nicht übermäßig dekorativ oder schräg

Natürlich müssen diese Dinge bei der Auswahl einer barrierefreien Schriftart im Voraus überprüft werden:

• Sie wird in einer ausreichend großen Größe angezeigt
• Sie bildet einen guten Kontrast zur Hintergrundfarbe.

Gängige Beispiele sind Arial, Calibri, Century Gothic, Helvetica, Tahoma, und Verdana.

Wie führende Marken die Barrierefreiheit angehen?

Die meisten führenden Marken halten sich heute an strukturierte Standards für die Barrierefreiheit von Websites, um sicherzustellen, dass ihre Online-Plattformen von Menschen mit unterschiedlichen Fähigkeiten genutzt werden können.

Diese Unternehmen betten die Barrierefreiheit ihrer Websites direkt in ihr Design, ihre Navigation und ihre Inhaltsstruktur ein und richten sich dabei nach den WCAG-Richtlinien und integrativen UX-Prinzipien.

Nachfolgend finden Sie Beispiele dafür, wie globale Marken die Barrierefreiheit ihrer Websites umsetzen, insbesondere auf der Website-Ebene:

1. Apple

Die Website von Apple spiegelt die gleiche Philosophie der Barrierefreiheit wider wie die Produkte des Unternehmens und gewährleistet eine nahtlose Navigation für Benutzer, die auf Hilfsmittel angewiesen sind.

1. Tastaturnavigation: Die gesamte Website kann ohne Maus bedient werden, was Benutzer mit motorischen Einschränkungen unterstützt.
2. Korrekte Namen für Schaltflächen und Links: Klare semantische Beschriftung hilft Bildschirmlesern, Aktionen genau zu beschreiben.
3. Bild-Alt-Attribute: Jedes Bild enthält einen beschreibenden Alternativtext für sehbehinderte Nutzer.
4. Formularbeschriftungen: Strukturierte und programmatisch zugeordnete Beschriftungen machen Formulare leicht verständlich und können mit Hilfsmitteln ausgefüllt werden.  

2. Nike

Nike konzentriert sich auf die Schaffung eines inklusiven E-Commerce-Erlebnisses, indem es die Lesbarkeit und Navigierbarkeit auf allen Geräten verbessert.

1. Alternativer Text für Bilder: Produkt- und Werbebilder enthalten beschreibenden Alt-Text.
2. Farbkontrast & Lesbarkeit: Ein hoher Kontrast zwischen Text und Hintergrund verbessert die Sichtbarkeit für Nutzer mit Sehschwäche.
3. Skip-Links sind fokussierbar: Benutzer können sich wiederholende Menüs umgehen und direkt zum Hauptinhalt springen.

Touch-Ziele mit angemessener Größe & Abstand: Schaltflächen und Links sind für Benutzer mit eingeschränkter Fingerfertigkeit oder für Benutzer, die berührungsunterstützende Technologien verwenden, konzipiert.

3. IKEA

IKEA zeigt, wie Barrierefreiheit global skaliert werden kann, ohne die Konsistenz über Regionen und Sprachen hinweg zu beeinträchtigen.

1. Klare Struktur & vorhersehbare Navigation: Standardisierte Layouts auf den Websites der einzelnen Länder helfen den Nutzern, die Seiten leicht zu verstehen und sich darin zu bewegen.
2. Zugänglicher Farbkontrast & lesbare Typografie: Sorgfältig ausgewählte Farben und Schriften verbessern die Lesbarkeit für Nutzer mit eingeschränktem Sehvermögen.
3. Beschreibender Medientext: Bilder und visuelle Elemente enthalten aussagekräftige Beschreibungen zur Unterstützung von Screenreadern.
4. Tastaturfreundliche Navigation: Große Produktkataloge können ohne Maus erkundet werden, was Nutzern mit Mobilitätseinschränkungen den Zugang erleichtert.
5. Veröffentlichte Verpflichtungen zur Barrierefreiheit: Laufende Aktualisierungen und öffentliche Erklärungen spiegeln die kontinuierliche Verbesserung im Hinblick auf integrative digitale Erlebnisse wider.

Wie prüft man, ob die Website barrierefrei ist?

Nach der Umsetzung bewährter Praktiken zur Barrierefreiheit besteht der nächste Schritt darin, die Website kontinuierlich zu bewerten und zu überwachen, um sicherzustellen, dass sie konform und benutzerfreundlich bleibt. Barrierefreiheit erfordert regelmäßige Überprüfungen, Tests und Verbesserungen im Zuge der Weiterentwicklung Ihrer Website.

Dies umfasst:

• Automatische Scans der Website auf Barrierefreiheit, um technische Probleme zu erkennen
• Manuelle Tests (Tastaturnavigation, Screenreader-Checks usw.))
• Überprüfung der Struktur des Inhalts, des Kontrasts und der Zugänglichkeit der Medien
• Überprüfung der Einhaltung der WCAG (A, AA und AAA)-Richtlinien
• Überwachung von Aktualisierungen, Plugins und Designänderungen, die neue Barrieren einführen könnten

Für viele Organisationen kann die konsequente Durchführung dieser Prüfungen jedoch komplex, zeitaufwendig und ressourcenintensiv sein.

Die Aufrechterhaltung der Zugänglichkeit von Websites sollte Ihr Unternehmen nicht bremsen, sondern stärken. An dieser Stelle unterstützt DrupalFit Unternehmen durch kontinuierlichen Support und Wartung, damit Drupal-Websites zugänglich, konform und leistungsfähig bleiben.

Mit DrupalFit erhalten Sie:

1. Kontinuierliche Überwachung der Barrierefreiheit: Regelmäßige Audits helfen dabei, Lücken in der Barrierefreiheit von Websites zu identifizieren und zu beheben.
2. Standardkonforme Verbesserungen: Hervorhebung der Korrekturen im Einklang mit den WCAG-Empfehlungen und den sich entwickelnden Anforderungen an die Konformität.
3. Proaktive Wartung: Zugänglichkeit wird neben Leistung, Sicherheit und Verbesserungen der Benutzerfreundlichkeit gepflegt.
4. Experten-Support für Drupal: Unser Team bietet Unterstützung auf Abruf, um den Benutzern zu helfen, alle Probleme, die bei der Verwendung von DrupalFit auftreten, schnell zu lösen.
5. Zukunftssicherer Ansatz: Wenn sich Vorschriften und Benutzererwartungen weiterentwickeln, bleibt Ihre Website angepasst, ohne dass ein ständiger interner Aufwand erforderlich ist.

Zu Ende

Wenn sich Technologien weiterentwickeln und die Erwartungen der Nutzer mit ihnen wachsen, müssen Unternehmen ihre digitalen Erlebnisse kontinuierlich bewerten und verfeinern, um sicherzustellen, dass die Barrierefreiheit im Mittelpunkt ihrer Strategie steht. Durch die Einbindung der Barrierefreiheit in Design, Entwicklung und Wartung von Workflows können Unternehmen die Compliance-Anforderungen erfüllen und gleichzeitig Vertrauen, Loyalität und langfristigen Wert aufbauen.

Mit dem richtigen Know-how und der kontinuierlichen Unterstützung von Partnern wie DrupalFit können Unternehmen sicherstellen, dass ihre Websites zugänglich, konform und zukunftssicher bleiben und digitale Erlebnisse bieten, die wirklich für alle funktionieren.

Überprüfen Sie jetzt die Barrierefreiheit Ihrer Website!