Web Content Accessibility Guidelines des W3C 7 Tipps für mehr digitale Barrierefreiheit

Viele User nutzen das Internet intuitiv, für Menschen mit körperlichen oder kognitiven Einschränkungen stellt die Bedienung hingegen mitunter eine große Herausforderung dar. Dieser Beitrag verrät, worauf Entwickler besonders achten müssen und gibt Tipps, wie digitale Produkte und insbesondere Websites am zugänglichsten entwickelt werden können.

Sowohl der Zugriff auf Informationen als auch die Interaktion mit verschiedenen Elementen von digitalen Produkten sind nicht für jedermann gleichermaßen zugänglich. Dies gilt für nahezu alle Elemente, darunter auch Navigationsleisten und Formulare.

E-Book zum Thema

Das eBook „Barrierefreie Software-Entwicklung“ zeigt die zukünftigen Anforderungen an Unternehmen und warum das Thema rasant an Bedeutung zunimmt.

eBook herunterladen

Mit der Übernahme der Konzepte aus den Web Content Accessibility Guidelines des W3C können Developer Nutzern mit kognitiven oder körperlichen Einschränkungen ein wesentlich verbessertes Nutzererlebnis bieten. Doch auch alle anderen Nutzer profitieren von den neuen Richtlinien, die vor allem auf eine bessere Nutzbarkeit der digitalen Produkte abzielen. Allgemein berücksichtigt ein barrierefreies digitales Produkt vier Komponenten:

• Wahrnehmbarkeit – Informationen und die Komponenten der Benutzeroberfläche müssen durch mindestens einen Sinn identifizierbar sein: visuell, akustisch oder über ein druckbares Transkript.

• Bedienbarkeit – Benutzer müssen in der Lage sein, über verschiedene Eingabemethoden wie Maus, Tastatur, Touch oder Sprachbefehl zu mit dem digitalen Produkt zu interagieren.

• Verständlichkeit – Nutzer müssen in der Lage sein die Navigationshinweise der Seite verstehen zu können. Daher muss die Benutzeroberfläche gestaltet intuitiv sein.

• Robustheit – Seiteninhalte müssen von mehreren Arten von Eingabegeräten und -techniken genutzt werden können, auch wenn sich die zugrunde liegende Technologie dieser Geräte weiterentwickelt.

An dieser Stelle folgen konkrete Anwendungstipps, die Developer dazu befähigen, ihre digitalen Produkte ein Stückchen näher in Richtung Barrierefreiheit zu bringen.

1. Farbkontrast

Für Menschen mit Sehbehinderungen ist ein hoher Farbkontrast ein wesentliches Element eines guten Website-Designs. Bei der Gestaltung von Farben ist es auch wichtig zu verstehen, dass schlechtes Sehen sich nicht auf Blindheit beschränkt. So gibt es viele Menschen, die durch verschwommene, schwebende dunkle Flecken behindert werden, oder am Verlust der peripheren oder zentralen Sicht leiden, die das Lesen und Navigieren auf einer Website erschweren und manchmal sogar unmöglich machen.

Menschen mit eingeschränkter Sehkraft verwenden oft Hilfsmittel, um den Bildschirminhalt zu vergrößern. Wenn also Designaspekte Vorrang vor der Benutzerfreundlichkeit haben, werden diese Personen Schwierigkeiten haben, die Website zu nutzen.

Tipps für die Zugänglichkeit:

• Achten Sie darauf, dass die Farben einen ausreichenden Hintergrundkontrast aufweisen. Achten Sie auf ein Kontrastverhältnis von 4,5:1 für alle Textelemente, insbesondere bei der Gestaltung für mobile Geräte.

• Verwenden Sie für alle aktiven Bedienelemente einen Farbkontrast von mindestens 3:1.

2. Alt-Attribute und Screenreader

Menschen, die blind sind, unter Sehstörungen oder kognitiven Beeinträchtigungen leiden, navigieren oft mit Screenreadern, die die Inhalte laut vorlesen. Während Screenreader alle Arten von Text lesen können, können Informationen in Bildern oder anderen Nicht-Text-Elementen wie Auswahlknöpfen oder Schiebereglern nur dann gesprochen werden, wenn eine geeignete Textalternative zur Verfügung steht.

Tipps für die Zugänglichkeit:

• Stellen Sie sicher, dass Bilder mit geeigneten beschreibenden Alt-Attributen versehen sind, die den Inhalt und die Funktion des Bildes oder Bildschirmelements genau wiedergeben.

• Fügen Sie keine Alt-Attribute in dekorative Seitenelemente ein, damit Screenreader sie ignorieren.

3. Screenreader und Seitenstruktur

Da Benutzer von Screenreadern Überschriften und Seitenziele zur Navigation verwenden, profitieren sie von einer klaren Seitenstruktur. Das erste, was ein Screenreader-Benutzer z.B. beim Laden einer Seite hört, ist der Seitentitel. Seitentitel werden auch verwendet, um Seiten zu identifizieren, wenn mehr als ein Fenster oder Tab geöffnet wird, so dass die logische und sequenzielle Strukturierung dieser Seitenelemente von entscheidender Bedeutung ist.

Tipps für die Zugänglichkeit:

• Verwenden Sie eindeutige und aussagekräftige Seitentitel, damit Screenreader jede Seite leicht identifizieren können, selbst wenn mehrere Webseiten geöffnet sind.

• Verwenden Sie Überschriften und Unterüberschriften, um die Seite sinnvoll zu strukturieren. Verwenden Sie Überschriften nicht für “Stylingzwecke”.

• Verwenden Sie klar definierte Landmarken-Tags wie <nav>, <header>, <footer>, <main>, etc.

4. Animation und Ton

E-Book zum Thema

Das eBook „Barrierefreie Software-Entwicklung“ zeigt die zukünftigen Anforderungen an Unternehmen und warum das Thema rasant an Bedeutung zunimmt.

eBook herunterladen

Menschen mit kognitiven Behinderungen können durch Bewegen, Blinken oder Scrollen von Elementen auf einem Bildschirm abgelenkt werden. Sie können auch Schwierigkeiten haben, den Leser zu verstehen, wenn der Ton eines Videos oder einer Animation automatisch abgespielt wird. Und Menschen mit lichtempfindlicher Epilepsie können Anfälle erleiden, wenn Gegenstände mit einer bestimmten Geschwindigkeit blinken.

Tipps für die Zugänglichkeit:

• Spielen Sie den Ton nicht automatisch ab. Lassen Sie den Benutzer entscheiden, ob er den Sound abspielen möchte. Wenn der Ton automatisch abgespielt wird, bieten Sie eine einfache Möglichkeit, ihn zu stoppen oder zu unterbrechen.

• Bieten Sie eine Möglichkeit, andere Elemente des automatischen Scrollens oder der automatischen Aktualisierung, wie z.B. Newsticker, anzuhalten oder zu stoppen.

• Verwenden Sie keine Inhalte, die mehr als dreimal pro Sekunde blinken, da dies zu Anfällen führen kann.

5. Zugänglichkeit der Tastatur

Da Menschen mit Mobilitätseinschränkungen nicht immer mit einer Maus arbeiten können, ist eine Tastatur oder eine spezielle Ausrüstung zum Navigieren auf Webseiten erforderlich. Ein Großteil dieser Geräte emuliert die Nutzung der Tastatur. Blinde Menschen, die den Mauszeiger nicht auf dem Bildschirm sehen können, können beispielsweise mit einer Tastatur/Bildlesekombination durch eine Webseite navigieren. Alles, was auf einer Webseite mit der Maus gemacht werden kann, sollte auch über eine Tastatur verfügbar sein.

Tipps für die Zugänglichkeit:

• Entfernen Sie niemals die standardmäßige Fokussierungsumrandung aus interaktiven Elementen mit "outline:none". Dies kann Tastaturen unbrauchbar machen, da der Benutzer nicht weiß, wo er sich auf der Seite befindet.

• Denken Sie darüber nach, benutzerdefinierte, erweiterte Fokusindikatoren hinzuzufügen. Diese können Tastaturbenutzern helfen, da der Standardfokus oft schwer zu erkennen ist.

• Stellen Sie sicher, dass die Reihenfolge des Dokumenten-Objekt-Modells (DOM) mit der visuellen Ordnung übereinstimmt. Der Tastaturfokus bewegt sich in der Reihenfolge des DOM. Wenn Sie Elemente über CSS positionieren und die Reihenfolge von der DOM-Reihenfolge abweicht, wird der Tastaturbenutzer desorientiert.

• Verwenden Sie nach Möglichkeit native Elemente. Native Elemente haben alle das richtige Verhalten bereits vordefiniert. Wenn Sie andere Elemente wie <div onclick="DoThing();">Do something.</div> verwenden oder <a onclick="DoThing();">Platzhalter</a> Dies wird nicht fokussierbar mit der Tastatur sein und andere Probleme verursachen, wie z.B. nicht die richtige Rolle für einen Screenreader-Benutzer zu geben.

6. Formulare und Formularsteuerungen

Anwender von Hilfstechnologien benötigen eine eindeutige Zuordnung der sichtbaren Bezeichnungen von Formularfeldern und Controls zu ihrem jeweiligen Feld. Auf diese Weise können Screenreader die Zuordnung zwischen dem Feld und der Beschreibung bestimmen und korrekt ankündigen. Diese Felder sollten auch programmierbar sein, damit die Spracherkennungssoftware die entsprechende Steuerung aktivieren kann. Beschriftungen sollten auch sichtbar bleiben, wenn ein Feld ausgefüllt, aktiviert oder der Bildschirm vergrößert wird.

Tipps für die Zugänglichkeit:

• Vermeiden Sie es, Platzhalter als einzige Bezeichnung für ein Textfeld zu verwenden. Platzhalter verschwinden, wenn ein Tastaturbenutzer in das Feld eintippt oder das Feld abgeschlossen ist, was es schwierig macht, die Feldanforderungen nach der Aktivierung zu überprüfen. Auch Screenreader vokalisieren nicht immer Platzhalter, so dass sie nur Platzhalter für zusätzliche, unkritische Informationen verwenden.

• Platzieren Sie die visuellen Etiketten richtig. Bezeichnungen für Textfelder werden in der Regel links neben Textfeldern und Dropdown-Listen und rechts neben Auswahlknöpfen und Ankreuzfeldern platziert.

• Geben Sie deutlich an, wann Formularfelder erforderlich sind. Dies kann durch die Eingabe von "Erforderlich" in die Feldbezeichnung oder durch die Verwendung eines Sternchens und die Erklärung der Bedeutung des Sternchens am oberen Rand des Formulars erfolgen.

• Verknüpfen Sie Labels mit Formularsteuerelementen über das Tag <label> mit einem "for"-Attribut. Diese Zuordnung ermöglicht es Bildschirmlesern, das richtige Label für dieses Control anzugeben. Wenn es keine visuelle Beschriftung für ein Steuerelement (z.B. für eine Symbolschaltfläche) gibt, kann ein Attribut aria-label verwendet werden, um das Label bereitzustellen.

7. Fehler

Im Fehlerfall benötigen alle Anwender präzise und klare Informationen darüber, was schief gelaufen ist und wie dieser behoben werden kann. Insbesondere Benutzer mit kognitiven Herausforderungen sind möglicherweise nicht in der Lage, eine Aufgabe wie das Ausfüllen eines Formulars oder das Abschließen eines Kaufs abzuschließen, wenn sie nicht verstehen können, wo sie einen Fehler gemacht haben.

Tipps für die Zugänglichkeit:

• Wenn ein Eingabefehler auftritt, beschreiben Sie den Fehler deutlich im Text. Verwenden Sie nicht nur einen roten Rand oder ein Ausrufezeichen, um die Position des Fehlers zu markieren. Verwenden Sie keine allgemeinen Fehlermeldungen, wie z.B. "Ungültige Eingabe". Lassen Sie den Benutzer wissen, was falsch ist und wie er es beheben kann, indem Sie Anweisungen wie "Sie müssen eine gültige E-Mail-Adresse eingeben" oder "Ihr Passwort muss ein Symbol und einen Großbuchstaben enthalten" ausgeben.

• Validieren Sie die Eingaben für wichtige Daten, bevor sie übermittelt werden. Geben Sie dem Benutzer die Möglichkeit, die Daten vor der Übermittlung zu überprüfen.

Konsistente und fehlerfreie Nutzererfahrungen für Menschen mit körperlichen oder kognitiven Einschränkungen sind wichtiger denn je, denn egal wie nützlich eine digitale Anwendung ursprünglich gedacht war – funktioniert sie in der Praxis nicht wie vorgesehen für jeden Nutzer, ist die Frustration groß. Damit die Qualität digitaler Produkte für alle Zielgruppen gleich hoch ist und das über alle Kanäle hinweg, bedarf es eines nutzerzentrierten Ansatzes und zeitgemäßer Testmethoden und Technologien.

Jan Wolter

* Jan Wolter leitet als General Manager für Applause den europäischen Geschäftsbereich und ist verantwortlich für den Ausbau des Unternehmens im europäischen Markt. Seine Hauptaufgabe besteht darin, sicherzustellen, dass die Ziele von Applause Europe in Bezug auf das Umsatzwachstum und die Kundenakquisition umgesetzt werden. Außerdem sorgt er dafür, dass die Qualität und die Kundenzufriedenheit des Unternehmens auf höchstem Niveau bleiben.

E-Book zum Thema

Barrierefreie Software-Entwicklung

Zu kleine Schrift, die sich nicht vergrößern lässt, Farbschemata mit zu geringen Kontrasten, umständliches Scrollen durch Formulare u.v.m. – allgegenwärtige Barrieren bei der Nutzung digitaler Angebote. Alles bald Geschichte?

Dieses eBook greift folgende drei Aspekte auf:

• Trends der digitalen Barrierefreiheit
• Barrierefreies UI/UX-Design
• Hilfstechnologien für die barrierefreie Software-Entwicklung

eBook „Barrierefreie Software-Entwicklung“ herunterladen

(ID:45672662)