Alle erreichen: Best Practices für Web-Barrierefreiheit

Die Nichtbeachtung von Web-Accessibility-Standards bei der Entwicklung/Überarbeitung Ihrer Website bedeutet, dass Sie die Anzahl potenzieller Besucher um mindestens 19 % reduzieren.

Jahrelange Arbeit an der Perfektionierung der Benutzerfreundlichkeit und des Gesamterlebnisses Ihrer Website für den Besucher bedeutet nur, dass Sie nicht bei 81 % stecken bleiben wollen. Richtig?

Die restliche Bevölkerung besteht aus Millionen von Menschen mit Behinderungen, die nicht auf herkömmliche Weise auf Websites zugreifen oder mit ihnen interagieren können. So, wie Sie es für richtig halten. 

Das Kernprinzip der Web-Accessibility

POUR ist die Grundlage der Web-Accessibility. Wenn Sie daran arbeiten, die Accessibility zu implementieren, decken die Prinzipien von POUR alles ab. 

Die Richtlinien werden vom W3CG festgelegt. Sie legen den Grundstein für alle, die Web-Inhalte aufrufen und nutzen möchten. 

1. Wahrnehmbar (Perceivable) - Informationen und Komponenten der Benutzeroberfläche müssen den Benutzern auf eine Weise präsentiert werden, dass sie diese wahrnehmen können. Das bedeutet, dass die Benutzer die präsentierten Informationen wahrnehmen können müssen (sie dürfen nicht für alle ihre Sinne unsichtbar sein).
    
2. Bedienbar (Operable) - Komponenten der Benutzeroberfläche und Navigation müssen bedienbar sein. Das bedeutet, dass die Benutzer die Benutzeroberfläche bedienen können müssen (die Benutzeroberfläche darf keine Interaktion erfordern, die ein Benutzer nicht ausführen kann).
    
3. Verständlich (Understandable) - Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein. Das bedeutet, dass die Benutzer sowohl die Informationen als auch die Bedienung der Benutzeroberfläche verstehen können müssen (der Inhalt oder die Bedienung darf ihr Verständnis nicht übersteigen).
    
4. Robust - Inhalte müssen so robust sein, dass sie von einer Vielzahl von User Agents, einschließlich assistierender Technologien, zuverlässig interpretiert werden können. Das bedeutet, dass die Benutzer auch bei fortschreitender Technologie auf die Inhalte zugreifen können müssen (wenn sich Technologien und User Agents weiterentwickeln, sollten die Inhalte weiterhin zugänglich bleiben).

Vermeiden Sie diese Fehler auf dem Weg

1. Hinzufügen von Bildern ohne Alt-Text 
   
   Bilder auf Ihrer Website dienen nicht nur dem SEO-Zweck, sondern können Ihre Website auch für alle zugänglicher machen. Wenn Bilder in dem von Ihnen verwendeten Browser nicht angezeigt werden, liefert das ALT-Attribut eine Beschreibung des Inhalts des Bildes. 
   
   Eines der Attribute von Suchmaschinen verwendet dieses Attribut, um das passende Bild für eine Suchanfrage zu bestimmen. Web-Indizes nutzen diese Information, um zu entscheiden, welches Bild für eine Suchanfrage zurückgegeben werden soll.
    
2. Eingabefelder ohne Label-Tags
   
   Alle Eingabefelder müssen über korrekte Labels verfügen, um den Benutzern/Besuchern eine Vorstellung davon zu vermitteln, welche Informationen sie in ein bestimmtes Eingabefeld eingeben sollen.
   
   Die Info-Felder müssen über entsprechende Namen verfügen, um den Clients/Gästen eine Vorstellung davon zu vermitteln, welche Daten sie in ein bestimmtes Informationsfeld eingeben sollten.
    
3. Fieldset-Tag wird nicht in Formularen verwendet
   
   Das HTML-Tag <fieldset> wird verwendet, um zusammengehörige Formularelemente zu gruppieren. Durch die Verwendung des Fieldset-Tags und des Legend-Tags können Sie Ihre Formulare für Ihre Benutzer viel verständlicher gestalten.
   
   Web-Accessibility in Webformularen ist ein oft ignoriertes Thema. Daher ist es wichtig, dass das Fieldset-Tag verwendet wird, um die zusammengehörigen Eingabefelder im Formular zu gruppieren. 
   
   Die durch Fieldset bereitgestellte Gruppierung hilft auch bei der Accessibility von Formularen für diejenigen, die "aurale" Browser verwenden, da sich diese Benutzer beim Ausfüllen eines großen Formulars leicht orientieren können.
    
4. Verwendung derselben ID
   
   Der dem Attribut id= "" zugewiesene Wert muss eindeutig sein, um zu verhindern, dass die zweite Instanz von assistierenden Technologien übersehen wird. Anders ausgedrückt: ID-Attribute dürfen nicht mehr als einmal im selben Dokument verwendet werden, um die einzelnen Elemente voneinander zu unterscheiden.
    
   IDs, die Sie in einem Dokument verwenden, müssen eindeutig sein und dürfen nur einmal verwendet werden.

Einige Best Practices für Web-Accessibility

Die Bereitstellung einer besseren Benutzererfahrung ist der Kern der Web-Accessibility. 

1. Tastaturkürzel sind eine der besten Ideen für Web-Accessibility-Designs. Der bessere Weg ist, Tastaturkürzel für alle Benutzer verfügbar zu machen. 

   Die Idee ist, dass das HTML-Attribut accesskey es Webentwicklern ermöglicht, bestimmten Web-Elementen bestimmte Tastaturkürzel zuzuweisen. 

2. Verwenden Sie ein for-Attribut für das <label>-Element, das mit dem id-Attribut des Formularelements verknüpft ist, oder verwenden Sie WAI-ARIA-Attribute. In bestimmten Situationen kann es akzeptabel sein, <label>-Elemente visuell auszublenden, aber in den meisten Fällen werden Labels benötigt, um allen Lesern zu helfen, die erforderliche Eingabe zu verstehen.

3. Stellen Sie Labels, Anleitungen und Anweisungen sowie Textalternativen für alle Nicht-Text-Inhalte bereit. Steuerelemente oder Eingabefelder müssen einen Namen haben, der ihren Zweck beschreibt.

4. Unterstützen Sie alle vorab aufgezeichneten Audioinhalte mit Gebärdensprachdolmetschung und stellen Sie erweiterte Audiobeschreibungen für alle vorab aufgezeichneten Videoinhalte bereit, bei denen es keine Möglichkeit gibt, den Vordergrund-Audio zu pausieren und Audiobeschreibungen bereitzustellen.

5. Stellen Sie die Sicherheit von rechtlichen und finanziellen Datentransaktionen sicher, indem Sie diese umkehrbar machen und dem Benutzer die Möglichkeit geben, die eingegebenen Daten und den Bestätigungsmechanismus vor dem endgültigen Absenden noch einmal zu überprüfen.

6. Im Falle eines Eingabefehlers durch den Benutzer geben Sie Textinformationen an, die das fehlerhafte Element und den Fehler selbst angeben.

7. Vermeiden Sie nach Möglichkeit die Verwendung von Text-Captchas. Im Falle von Text müssen Captchas das Audio für hörbehinderte Menschen bereitstellen. 

8. Verwenden Sie Farben, die visuelle Informationen vermitteln, visuelle Komponenten unterscheiden, Aktionen anzeigen oder zu einer Antwort auffordern.

Sich der Accessibility zu öffnen bedeutet, sich mehr Konversionsmöglichkeiten zu eröffnen, von denen Sie nicht wussten, dass Sie sie verpassen. Schreiben Sie eine E-Mail an [email protected], um mehr über Accessibility zu erfahren.