6 einfache Möglichkeiten zur Verbesserung der Webzugänglichkeit

Praktisch jeder weiß, dass die Benutzererfahrung (UX) eine wichtige Überlegung bei der Erstellung einer Website oder App ist. Niemand möchte eine unintuitive App mit einer schrecklichen Benutzeroberfläche (UI) verwenden.

Aber was ist mit der Benutzererfahrung von Menschen mit Behinderungen?

Seit den frühen 2000er Jahren setzt sich die Bewegung für Web-Barrierefreiheit für ein Webdesign ein, das die Bedürfnisse von Menschen mit Behinderungen berücksichtigt. Einige Unternehmen wurden verklagt, weil sie nicht barrierefreie Websites unterhalten, wobei die Kläger sich auf Bestimmungen des Americans with Disabilities Act berufen.

Web-Barrierefreiheit wächst als Studienfeld, und Fachleute nehmen Notiz davon. Web-Barrierefreiheit wird für Unternehmen und Entwickler immer wichtiger, und einige UX-Designer haben begonnen, barrierefreies Design in ihre Arbeit zu integrieren.

Dennoch sind Web-Barrierefreiheit und ihre Praktiken für die meisten Menschen noch ein Rätsel.

Was sind Barrierefreiheitspraktiken? Wie wird eine Website mit Blick auf Barrierefreiheit erstellt? Welche Technologien nutzen Menschen mit Behinderungen, um auf das Internet zuzugreifen, und wie können wir Websites mit diesen Technologien im Hinterkopf erstellen?

Wie man die Web-Barrierefreiheit verbessert

Bevor Sie an der Barrierefreiheit einer Website arbeiten, sollten Sie zunächst die Arten von Beeinträchtigungen berücksichtigen, für die Sie optimieren. Typischerweise sollen Barrierefreiheitsüberlegungen die Bedürfnisse derjenigen adressieren, die Folgendes haben:

• Sehbehinderungen (schwaches Sehen, teilweise oder vollständige Blindheit, Farbenblindheit)
• Hörbehinderungen (Taubheit, Schwerhörigkeit, Tinnitus, Hyperakusis)
• Motorische oder Geschicklichkeitsbeeinträchtigungen (Lähmung, Zerebralparese, wiederholte Belastungsverletzungen wie das Karpaltunnelsyndrom)
• Kognitive Beeinträchtigungen, die Problemlösungsfähigkeiten, Gedächtnis und Aufmerksamkeit, Entwicklungsstörungen oder Lernschwierigkeiten wie Legasthenie betreffen

Es gibt ein wachsendes kulturelles Bewusstsein für Web-Barrierefreiheit. Dennoch gibt es noch viel Unklarheit über unterstützende Technologien, die Menschen mit Behinderungen helfen, das Internet zu nutzen.

Das Verständnis dieser Werkzeuge ist der Schlüssel zur Implementierung erfolgreicher Barrierefreiheitsstrategien. Wie können Sie effektive Praktiken schaffen, wenn Sie die Technologie, um die Sie herum bauen und integrieren, nicht kennen?

In einigen Fällen benötigen Menschen mit Behinderungen keine spezielle Software oder Hardware, um effektiv auf das Internet zuzugreifen. Stattdessen müssen Website-Besitzer oder Inhaltsanbieter Werkzeuge oder andere Überlegungen bereitstellen, damit ihre Barrierefreiheitsbedürfnisse erfüllt werden.

Arten von unterstützender Technologie

Unterstützende Technologie ist der Oberbegriff für unterstützende, adaptive und rehabilitative Geräte und Werkzeuge, die von Menschen mit Behinderungen verwendet werden. Im Kontext der Web-Barrierefreiheit ist unterstützende Technologie die Software und Hardware, die von Menschen mit Behinderungen genutzt wird, um auf das Internet zuzugreifen und es zu nutzen.

Die Implementierung von Web-Barrierefreiheitsmethoden wird einfacher, wenn Sie die spezifischen Bedürfnisse von Menschen mit Behinderungen berücksichtigen. Es gibt keine pauschalen Lösungen, und je nach Behinderung sollten unterschiedliche Ansätze gewählt werden, um eine optimale Benutzererfahrung zu bieten.

Unterstützende Technologie für Menschen mit Sehbehinderungen

Menschen mit Sehbehinderungen wie schwachem Sehen oder Blindheit benötigen möglicherweise Screenreader-Software. Screenreader-Software übersetzt Website-Anzeigen in nicht-visuelle Informationen über Text-zu-Sprache-Konverter, Tonsignale und aktualisierbare Braille-Displays. Bildschirmvergrößerungs-Software ist, wie der Name schon sagt, eigenständige Programmierung, die digitale Anzeigen vergrößert, um Menschen mit schwachem Sehen eine einfachere Betrachtung zu ermöglichen.

Unterstützende Technologie für Menschen mit motorischen Beeinträchtigungen

Motorische oder Geschicklichkeitsbeeinträchtigungen beinhalten den teilweisen oder vollständigen Funktionsverlust eines Körperteils und können den Verlust der groben oder feinen motorischen Kontrolle einer Person umfassen. Dies kann Lähmungen, Zerebralparese und wiederholte Belastungsverletzungen wie das Karpaltunnelsyndrom umfassen.

Menschen mit motorischen oder Geschicklichkeitsbeeinträchtigungen benötigen möglicherweise ein alternatives Eingabegerät, anstelle einer herkömmlichen Tastatur und Maus, um einen Computer zu verwenden und zu navigieren. Alternative Eingabegeräte umfassen Bewegungs- oder Augenverfolgungsgeräte, Kopfzeiger und Einzelschalter-Eingabegeräte. Später werden wir die Designentscheidungen besprechen, die Website-Besitzer treffen können, um die Erfahrung von Menschen zu erleichtern, die diese Geräte nutzen. 

Unterstützende Technologie für Menschen mit kognitiven Beeinträchtigungen oder Lernschwierigkeiten

Im Gegensatz zu Seh- oder motorischen Beeinträchtigungen werden kognitive oder Lernbeeinträchtigungen in Web-Barrierefreiheits-Techniken und -Leitfäden nicht oft berücksichtigt. Während die meisten Werkzeuge zur Unterstützung von Menschen mit kognitiven oder Lernbeeinträchtigungen auf der Seite des Entwicklers oder Webdesigners erstellt werden, können bestehende Werkzeuge die Entwicklung solcher benutzerdefinierten Programme unterstützen.

Textleser sind Softwareprogramme, die Text auf einem Bildschirm in einer synthetisierten Stimme wiederholen. Zur Klarheit heben einige Optionen das gesprochene Wort hervor. Textleser sind jedoch normalerweise nicht in der Lage, komplizierten Text (wie Menüs) oder nicht-textliche Elemente (wie Bilder) zu lesen.

1. HTML-Markup richtig verwenden

Unabhängig davon, ob ein Webdesigner manuell HTML eingibt oder nicht, ist es wichtig, Überschriften in einer sinnvollen Reihenfolge zu platzieren. Screenreader, die Informationen auf einer Webseite artikulieren, verwenden Überschriften als Wegweiser.

Mit freundlicher Genehmigung von Prototypr.io

Wenn das HTML einer Seite unordentlich ist oder Überschriften nicht richtig verwendet werden, haben Benutzer, die mit einem Screenreader auf eine Website zugreifen, Schwierigkeiten bei der Navigation.

Das H1-Element sollte für Hauptideen auf einer Seite verwendet werden, wobei nachfolgende Überschriften (H2, H3 usw.) einem logischen, themenbasierten Muster folgen. Dies hilft Benutzern, die Seite und die Beziehung zwischen den Elementen darauf zu verstehen.

Links sollten auch genau beschreiben, zu welcher Seite die Benutzer geführt werden. Links, die einfach "Hier klicken" oder "Mehr lesen" lauten, sagen den Benutzern nichts über den Inhalt der Webseite aus.

2. Prägnanten, beschreibenden Bild-Alt-Text einfügen

Alt-Text wird oft vergessen, wenn Bilder zu Webseiten hinzugefügt werden. Schließlich verwenden die meisten Menschen Alt-Text nur, wenn sie in einer Suchmaschine nach Bildern suchen oder eine umgekehrte Bildsuche durchführen.

Aber für Menschen, die Screenreader verwenden, ist Alt-Text alles, worauf sie sich verlassen können, um etwas über ein angezeigtes Bild zu erfahren. Benutzer können verwirrt werden, wenn der Alt-Text eines Bildes nicht geändert wird oder nicht unbedingt das darstellt, was das Bild zeigt. Dies ist besonders schädlich, wenn das Bild entscheidend für das Verständnis der Webseite ist.

Mit diesem Wissen im Hinterkopf ist es eine gute Praxis, Bilder nicht als Navigationselemente oder als einzigen Inhalt in einem Blog zu verwenden. Beim Schreiben von Alt-Text sollte sichergestellt werden, dass die Beschreibung genau, aber nicht zu wortreich ist. Dies wird auch bei der Suchmaschinenoptimierung (SEO) helfen. Die Verwendung von sauberem und durchdachtem HTML unterstützt sowohl SEO als auch Web-Barrierefreiheit, sodass Sie zwei Fliegen mit einer Klappe schlagen können.

3. CAPTCHA-Optionen in Betracht ziehen

Ein completely automated public Turing test to tell computers and humans apart, oft abgekürzt als CAPTCHA, ist ein treffend — wenn auch schrecklich — benanntes Werkzeug. CAPTCHAs sind besonders häufig auf Anmeldeseiten zu finden, um zu überprüfen, ob die Person, die sich anmeldet, tatsächlich ein Mensch und kein Spam-Bot ist.

CAPTCHAs präsentieren den Benutzern oft ein Bild von verzerrten Buchstaben, die in ein Textfeld eingegeben werden müssen, bevor die Benutzer weitermachen können. So nützlich sie auch bei der Verhinderung von Spam sind, sie stellen eine Reihe von Problemen für Menschen mit Barrierefreiheitsbedürfnissen dar.

CAPTCHAs können besonders verwirrend für Menschen mit Legasthenie oder einigen kognitiven Schwierigkeiten sein. Einige CAPTCHA-Bilder berücksichtigen nicht Menschen mit Farbenblindheit, die möglicherweise die Buchstaben nicht vom Hintergrund unterscheiden können. CAPTCHA-Bilder sind auch für Screenreader unlesbar, aber das Hinzufügen der richtigen Antwort zum Alt-Text auf der Seite könnte den Zweck des Tests zunichtemachen.

Wenn CAPTCHAs für Ihre Website ein Muss sind, stellen Sie sicher, dass sie barrierefreie Optionen wie audiobasierte Tests oder Googles reCAPTCHA v3 haben, das es Benutzern ermöglicht, einen CAPTCHA-Test einfach durch Klicken auf ein Kästchen zu bestehen.

4. Videoinhalte zugänglich machen

Während Menschen mit Hörbehinderungen das Internet in der Regel mit wenigen Schwierigkeiten nutzen können, sollten Website-Besitzer Überlegungen zu den Hindernissen anstellen, auf die diese Benutzer stoßen. Wenn eine Website beispielsweise Tonsignale ohne begleitende visuelle Signale bereitstellt, können Benutzer mit Hörbehinderungen nicht mit der Website interagieren.

Eines der bemerkenswertesten Hindernisse für Menschen mit Hörbehinderungen ist das Fehlen von Untertiteln. Videos ohne Untertitel können für Menschen mit Hörbehinderungen völlig unzugänglich sein. Für diejenigen, die ein Video auf eine Plattform wie YouTube oder Facebook hochladen, kann es einfach sein, sich auf die automatisch generierten Untertitel zu verlassen, aber diese sind oft ungenau und bieten keine kontextuellen Untertitel für Musik oder Soundeffekte.

Audio-Beschreibungen helfen auch Benutzern mit Sehbehinderungen, Videos ohne Audio zu folgen und Menschen zu zeigen, die keine Sprechrollen haben. Es ist auch wichtig,  Transkripte von Videos für diejenigen hinzuzufügen, die Screen- oder Textleser verwenden.

5. Barrierefreie Farbwahl treffen

Typischerweise beinhalten Farbentscheidungen für Websites das, was im UX am trendigsten ist. Das bedeutet normalerweise eine ganze Menge unauffälliges, definitiv originelles Blau. Aber Farbe ist eine wichtige Überlegung in der Web-Barrierefreiheit. Insbesondere sollten Designer die Bedürfnisse von Benutzern mit Farbenblindheit berücksichtigen.

Um mir zu helfen, schauen Sie sich dieses Bild von G2s einzigem Monty an, der die Skyline von Chicago genießt.

Benutzer mit Rot-Grün-Farbenblindheit (Deuteranopie) werden Schwierigkeiten haben, Rot, Grün, Braun und Orange zu unterscheiden. Wenn ein Designer sich entscheidet, roten Text über einen braunen Hintergrund zu legen, können farbenblinde Benutzer ihn wahrscheinlich nicht lesen.

Und Deuteranopie ist nur eine Art von Farbenblindheit. Während es schwierig erscheinen mag, jede Art von Farbenblindheit zu berücksichtigen, die existiert, stehen viele kostenlose Werkzeuge zur Verfügung, mit denen Website-Ersteller Farben auf einer Webseite testen können. Andere Werkzeuge können barrierefreiheitsfreundliche Farbpaletten generieren, die die Entscheidungsfindung vereinfachen können.

6. Sicherstellen, dass die Website nur mit der Tastatur navigiert werden kann

Für Menschen, die alternative Eingabegeräte verwenden, kann die Navigation durch unendlich scrollende Websites mit asymmetrischen Layouts ein Albtraum sein. Während diese Designentscheidungen im Trend liegen, sind sie unglaublich unzugänglich für diejenigen, die auf alternative Eingabegeräte angewiesen sind oder nur eine Tastatur verwenden.

Trendige Designentscheidungen umfassen Navigationsleisten oder Optionen, die nur erscheinen, wenn ein Cursor über eine bestimmte Schaltfläche schwebt. Oft reicht es nicht aus, eine bestimmte Dropdown-Schaltfläche mit der Tastatur hervorzuheben, um das Dropdown zu aktivieren. Das bedeutet, dass Benutzer, die nur die Tastatur verwenden, keine Möglichkeit haben, auf diese Webseitenoptionen zuzugreifen.

Das Hinzufügen von Sprunglinks am Anfang einer Webseite kann auch Benutzern, die nur die Tastatur verwenden, und Benutzern mit Screenreadern ermöglichen, Inhalte zu überspringen, ohne jedes Mal eine vollständige Webseite zu navigieren.

Ihre Website zugänglicher machen

Das Hinzufügen von Barrierefreiheitsverbesserungen ist nicht immer einfach, insbesondere wenn man sie mit modernen Designpraktiken und UX-Techniken für Menschen ohne Behinderungen in Einklang bringen muss. UX und Web-Barrierefreiheit sind jedoch sicherlich nicht unvereinbar.

Designern stehen viele kreative Optionen zur Verfügung, um hervorragende Erlebnisse für Benutzer mit oder ohne Beeinträchtigungen zu bieten. Solange Barrierefreiheit von Anfang an eine Überlegung ist, kann die Implementierung von Barrierefreiheitspraktiken einfach sein und muss dem gesamten UX-Designprozess nicht schaden.