Richtlinien für die Zugänglichkeit von Webinhalten, um Ihre Website ADA-konform zu machen

Juli 16, 2022
Richtlinien für die Zugänglichkeit von Webinhalten, um Ihre Website ADA-konform zu machen

Michelle Meyer

Das ADA-Gesetz verpflichtet alle Unternehmen, eine zugängliche Website zu erstellen. Erfüllen Sie die ADA-Standards, indem Sie diese Regeln für die Zugänglichkeit von Websites befolgen.

Es ist verrückt, sich vorzustellen, dass es eine Zeit gab, in der Unternehmen keinen Zugang für Rollstuhlfahrer zu ihren Geschäftsräumen anbieten mussten. Aber wenn Ihre Website nicht den Richtlinien für barrierefreie Webinhalte entspricht, sind Sie wie ein Geschäft mit einer Treppe und einer fehlenden Zugangsrampe. Sie verstoßen gegen das Gesetz, übersehen Ihre Kunden mit Behinderungen und vergraulen potenzielle Kunden.

Der Americans with Disabilities Act schreibt vor, dass jede Website, nicht nur die Websites großer Unternehmen, für alle Nutzer zugänglich sein muss. Und es drohen empfindliche Strafen für diejenigen, die dem Gesetz nicht entsprechen. Außerdem ist es wirtschaftlich sinnvoll, Ihre Website für alle Benutzer zugänglich zu machen, da eine frustrierende Website potenzielle Kunden abschreckt.

Die Erstellung einer ADA-konformen Website ist keine einmalige Aufgabe. Keine Website ist zu 100 % barrierefrei – es ist ein ständiges Bestreben, immer besser zugänglich zu sein. Aber die Mühe lohnt sich – für Ihr Unternehmen und Ihre Kunden. Hier sind meine besten Tipps, um Ihre Website zugänglicher zu machen.

Wichtigste Aspekte der Barrierefreiheit einer Website

Zunächst werfen wir einen Blick auf die wichtigsten Elemente – diejenigen, die sich auf jede Seite Ihrer Website auswirken. Wenn Sie diese Punkte zuerst angehen, können Sie sicherstellen, dass Sie sozusagen den größten Nutzen für Ihr Geld erhalten.

Desktop- und mobile Navigation funktionieren auch ohne Maus

Viele Benutzer verlassen sich ausschließlich auf die Tastaturnavigation, und das ist eines der wichtigsten Elemente der Zugänglichkeit von Websites. enschen mit motorischen Behinderungen oder Zittern sind möglicherweise nicht in der Lage, eine Maus zu benutzen, daher sollte Ihre Website nur über die Tastatur vollständig navigierbar sein.

Alle Fokuselemente haben klare Umrisse

Website-Elemente sind dann “fokussiert”, wenn der Benutzer in irgendeiner Weise mit ihnen interagieren kann, z. B. durch Anklicken eines Links oder Ändern einer Option. Benutzer mit Behinderungen verwenden Bildschirmlesegeräte oder andere Hilfsmittel, um den Fokus zu ändern, so dass sie sich auf der Website bewegen und an die gewünschte Stelle klicken können. Alle Fokuselemente sollten mit Tastaturbefehlen interagieren und eine klare (mindestens 2 px) Umrandung haben, damit sie für alle Benutzer sichtbar sind.

Stellen Sie sicher, dass Ihr Farbkontrast den Anforderungen entspricht

Scharfe Farbkontraste helfen Nutzern mit Sehbehinderungen, Ihr Website-Design zu erkennen und Ihren Text leichter zu lesen. Standards für den Farbkontrast finden Sie in den Richtlinien von W3.org hier.

Verwenden Sie Sprunglinks

Die Aufnahme eines Skip-Links als erstes fokussierbares Element auf jeder Seite ermöglicht es Tastaturbenutzern und Benutzern von Hilfstechnologien, Teile der Seite zu überspringen, die sich auf jeder Seite wiederholen, wie z. B. die obere Navigation. Auf diese Weise können die Benutzer den Hauptinhalt schnell finden.

nur Linktexte unterstreichen

Unterstreichen Sie den Text nicht mehr, um ihn hervorzuheben. Nur verlinkter Text sollte unterstrichen werden. Andernfalls kann dies verwirrend und frustrierend für Benutzer sein, die erwarten, dass unterstrichener Text einen Link enthält.

Verwenden Sie für jede Seite eine Spracherklärung

Die Angabe der Hauptsprache einer Webseite in Ihrem Code ermöglicht es Bildschirmlesegeräten, den Inhalt korrekt zu lesen. Aus diesem Grund ist es auch wichtig, im Code alle Stellen anzugeben, an denen sich die Sprache auf der Seite ändern kann.

Unterstreichen Sie Links im Text

Verlassen Sie sich nicht allein auf die Farbe, um anzuzeigen, dass ein Satz oder ein Wort im Text verlinkt ist. Unterstreichen Sie stattdessen immer verlinkten Text. Das ist der Standard für alle Online-Inhalte, also befolgen Sie ihn. Bei den meisten WordPress-Themes können Sie dies für die gesamte Website aktivieren oder deaktivieren.

Andere wichtige Faktoren für die Barrierefreiheit

Viele dieser anderen Punkte betreffen nur bestimmte Teile oder Elemente Ihrer Website. Sie sind alle wichtig, aber Sie müssen vielleicht die Ärmel hochkrempeln, um sie alle herauszufinden.

Beseitigen Sie leere Schaltflächen oder Links

Die Beseitigung defekter oder leerer Schaltflächen und Links gehört zu den bewährten SEO-Praktiken und verbessert Ihr Suchranking. Aber es geht noch weiter. Leere und defekte Schaltflächen und Links sind für Nutzer mit Behinderungen verwirrend und frustrierend. Testen Sie daher Ihre Links und Schaltflächen regelmäßig, um sicherzustellen, dass sie alle funktionieren.

Stellen Sie sicher, dass die Formulare zugänglich sind

Wenn Ihre Formulare nicht zugänglich sind, besteht die Gefahr, dass Sie Nutzer abweisen und Leads verlieren. Um Ihre Formulare zugänglich zu machen, sollten Sie Folgendes überprüfen:

  • Die Felder sind beschriftet, und die erforderlichen Felder sind eindeutig mit “erforderlich” und nicht nur mit einem Sternchen gekennzeichnet.
  • alle CAPTCHAs zugänglich sind
  • Eingabefehler können von Bildschirmlesegeräten gelesen werden
  • Erfolgreiche Eingaben können von Bildschirmlesegeräten gelesen werden.

Untertitel für Ihre Videos

Wenn Ihre Videos keine präzisen Untertitel enthalten, wissen Nutzer mit Hörbehinderungen nicht, was sie sagen. Ihr teures Video ist also nutzlos, wenn es darum geht, eine Konversion zu erreichen, und Sie riskieren, einen potenziellen Kunden abzuschrecken, wenn Sie keine Videountertitel einfügen.

Verwenden Sie aussagekräftige Link-Anker

Ein Linkanker sollte beschreiben, was passiert, wenn er angeklickt wird. Anstelle von “Klicken Sie hier” könnte Ihr Ankertext also lauten “Klicken Sie hier, um Ihre Tickets zu buchen”.

Halten Sie sich an geordnete Überschriften

Wenn Sie Überschriften und Unterüberschriften in Ihrem Inhalt erstellen, verwenden Sie h1 für die Hauptüberschrift, h2 für die nächste wichtige Überschrift usw. Springen Sie nicht in der Reihenfolge herum. Wenn Sie zum Beispiel Ihre Seite mit h1 betiteln, verwenden Sie nicht h3 für die erste Unterüberschrift. Verwenden Sie h2. Weitere Informationen über Überschriftenstrukturen finden Sie hier.

Schaltflächen zum Anhalten von automatisch abgespielten Inhalten einfügen

Alle Video- oder Audiodateien, die automatisch abgespielt werden, wenn ein Benutzer Ihre Website besucht, sollten eine explizite Schaltfläche zum Anhalten enthalten. Video- und Audiodateien können für jeden verwirrend sein, wenn sie auf einer Website landen, nicht nur für Benutzer mit Behinderungen. Eine Möglichkeit zum Anhalten des Video- oder Audioinhalts wird von allen geschätzt.

Alt-Text sollte genau sein

Alt-Text, auch Alt-Tag oder Alt-Beschreibung genannt, ist der Text, der ein Bild begleitet. Wenn das Bild nicht geladen werden kann, wird der Alt-Text an seiner Stelle angezeigt. Wenn Sie sicherstellen, dass der Alt-Text korrekt ist, ist es nicht nur für die Benutzer einfacher, den Kontext des Bildes zu verstehen, das angezeigt werden soll, sondern es verbessert auch Ihre Suchmaschinenplatzierung und ist eine gute SEO-Praxis.

Vor dem Öffnen eines Links in einer neuen Registerkarte benachrichtigen

Das Öffnen einer neuen Registerkarte oder eines neuen Fensters ohne Vorwarnung kann für Menschen mit visuellen oder kognitiven Einschränkungen verwirrend sein. Wenn sie nicht sehen können, was in ihrem Browser passiert, verlieren sie die Möglichkeit, auf die Schaltfläche “Zurück” zu klicken und zu der Seite zurückzukehren, auf der sie zuvor waren. Stellen Sie also sicher, dass die Option zur Benachrichtigung der Benutzer vor dem Öffnen einer neuen Registerkarte oder eines neuen Fensters bei jeder Erstellung eines Links aktiviert ist.

Niemals Großbuchstaben verwenden

Wörter in Großbuchstaben können für jeden schwer zu lesen sein, insbesondere für Menschen mit Leseschwäche. Außerdem lesen Bildschirmlesegeräte den Text in Großbuchstaben oft Buchstabe für Buchstabe und nicht als ganzes Wort, was für Personen, die auf Bildschirmlesegeräte angewiesen sind, sehr verwirrend sein kann.

Verwenden Sie keine Parallaxe, Eingangsanimationen und Hintergrundvideos

Bewegungen auf dem Bildschirm können für manche Benutzer verwirrend oder schwer zu navigieren sein, und bei anderen können sie zu Reisekrankheit führen. Wenn Sie Animationen, Parallaxe oder Videos auf Ihrer Website verwenden müssen, sollten Sie den Benutzern die Möglichkeit geben, die Anzeige dieser Funktionen auf Ihrer Website zu deaktivieren.

Verwenden Sie eine numerische Paginierung anstelle eines unendlichen Scrollens

Websites, die beim Herunterscrollen immer mehr Inhalte laden, werden als “unendliches Scrollen” bezeichnet, und Designer lieben sie, weil sie den Bedarf an Seiten eliminieren. Allerdings ist das unendliche Scrollen ohne Maus oder für Benutzer, die auf ein Bildschirmlesegerät angewiesen sind, schwierig zu bedienen. Verwenden Sie stattdessen eine Paginierung, um die Navigation auf Ihrer Website für alle einfach zu gestalten.

Stellen Sie genaue Überschriften für Tabellen bereit

Für Menschen, die Bildschirmlesegeräte und andere Hilfsmittel für die Barrierefreiheit verwenden, ist es unerlässlich, dass Sie Ihre Tabellen korrekt organisieren. Hilfsmittel verwenden Markierungen im HTML-Code, um die Kopfzellen von den Datenzellen abzugrenzen und dem Benutzer ihre Beziehung zueinander mitzuteilen. W3 bietet hier einige Richtlinien für verschiedene Arten von Tabellen.

Sprung- und Ankerlinks verschieben den Tastaturfokus

Für Benutzer, die sich beim Scrollen und Klicken auf Links auf die Tastatur statt auf die Maus verlassen, ist es wichtig, dass der Fokus zusammen mit den angeklickten Sprung- oder Ankerlinks verschoben werden kann. Ein Beispiel dafür sehen Sie hier.

Pop-ups zugänglich machen

Prüfen Sie zunächst, ob Sie ein Popup benötigen, da es für bestimmte Benutzer verwirrend sein kann. Wenn Sie sich für ein Popup entscheiden, erstellen Sie ein Popup, das zugänglich ist:

den Fokus auf das Popup verschieben, wenn es sich öffnet, und es Screenreadern ermöglichen, anzuzeigen, dass sich ein Popup geöffnet hat.
Sperren Sie den Fokus der Tabulatortaste auf das Popup, damit die Benutzer das Popup nicht verlassen können, ohne es zu schließen.
Sicherstellen, dass die “Schließen”-Schaltfläche deutlich beschriftet ist und mit einer Tastatur oder der “Escape”-Taste zum Schließen des Popups funktioniert.

Der Fokus muss so gestaltet sein, dass er nach dem Schließen des Popup-Fensters an die vorherige Position auf der Seite zurückkehrt, damit der Benutzer nicht verliert, was er beim Öffnen des Popup-Fensters getan hat.
Lassen Sie sich von einem professionellen Webdesigner bei der Barrierefreiheit Ihrer Website helfen.
Ich weiß, dass die Erfüllung der Anforderungen an die Barrierefreiheit einer Website überwältigend sein kann. Aber sie ist aus rechtlicher, ethischer und geschäftlicher Sicht von entscheidender Bedeutung, so dass Sie sie nicht ignorieren können.

Wenn Sie Hilfe bei der barrierefreien Gestaltung Ihrer Website benötigen, füllen Sie unser kurzes Projektanfrageformular aus, und wir können einen Termin vereinbaren, um Ihr Projekt im Detail zu besprechen. Es ist nur ein Sondierungsgespräch – völlig kostenlos und unverbindlich. Aber es ist ein Gespräch, das Ihr Unternehmen vor einer Klage wegen Nichteinhaltung der Vorschriften bewahren könnte, und es könnte Ihnen helfen, mehr Kunden zu erreichen und mehr Leads zu konvertieren.