Barrierefreiheitsstärkungsgesetz: ab 2025 müssen alle Websites diese Standards erfüllen. Bist du vorbereitet?

Barrierefreie Webseiten – alles Wichtige im Überblick

Für alle Bereiche, in denen eine Barrierefreiheitsregelung gilt, muss der WCAG Compliance Level AA erfüllt sein.

• Richtlinie 1.1: Textalternativen für Nicht-Text-Inhalte

Warum ist das wichtig? Nicht jeder kann Bilder sehen oder Videos hören. Deshalb ist es wichtig, alternative Texte oder Transkripte anzubieten.

Was bedeutet das? Nicht-textuelle Inhalte wie Bilder und Formularelemente benötigen äquivalente Alternativtexte, um für Menschen mit Sehbehinderungen zugänglich zu sein.

Beispiel: Wenn Du ein Bild eines Sonnenuntergangs auf Deiner Website hast, sollte das alt-Attribut eine Beschreibung enthalten wie „Sonnenuntergang über dem Meer, orangefarbene und rosa Wolken am Himmel“. Wenn das Bild nur dekorativ ist und keine zusätzliche Information bietet, kannst Du das alt-Attribut leer lassen (alt="").

Für komplexe Bilder wie Infografiken ist es hilfreich, eine detaillierte Beschreibung entweder direkt auf der Seite oder über einen Link bereitzustellen.

• Richtlinie 1.2: Alternativen für zeitbasierte Medien

Warum ist das wichtig? Menschen mit Hör- oder Sehbehinderungen benötigen zusätzliche Informationen, um Audio- oder Videoinhalte vollständig zu verstehen.

Was bedeutet das? Diese Richtlinie fordert, dass Du zusätzliche Hilfsmittel bereitstellst, damit alle Nutzer - insbesondere diejenigen mit Hör- oder Sehbehinderungen - den vollen Inhalt von Audio- und Videomedien verstehen können.

Beispiel: Für ein voraufgezeichnetes Video, das auf einer Seite eingebettet ist, solltest Du Untertitel bereitstellen, damit Menschen, die das Audio nicht hören können, die gesprochenen Inhalte lesen können. Ebenso sollte ein Transkript zur Verfügung stehen, das den gesamten gesprochenen Inhalt und relevante visuelle Informationen beschreibt.

• Richtlinie 1.2.4 Untertitel für Live-Medien

Warum ist das wichtig? Menschen mit Hörbehinderungen haben sonst keinen Zugang zu den gesprochenen Inhalten und sind von wichtigen Informationen ausgeschlossen.

Was bedeutet das? Live-Übertragungen, die Audio enthalten (wie Live-Streams, Webinare oder Video-Konferenzen), sollten synchronisierte Untertitel haben. Das hilft Menschen mit Hörbehinderungen, die Inhalte zu verstehen.

Beispiel: Du veranstaltest ein Live-Webinar. Stelle sicher, dass Du einen Dienst oder eine Software nutzt, die Live-Untertitel bereitstellt, sodass alle Teilnehmer den gesprochenen Inhalten folgen können.

• Richtline 1.2.5 Audiobeschreibung für vorab aufgezeichnete Videos

Warum ist das wichtig? Blinde und sehbehinderte Menschen können die visuellen Informationen eines Videos ohne Audiobeschreibung nicht erfassen und verstehen.

Was bedeutet das? Für vorab aufgezeichnete Videos solltest Du Audiobeschreibungen bereitstellen. Das sind gesprochene Beschreibungen, die relevante visuelle Informationen liefern, die nicht durch den Ton vermittelt werden.

Beispiel: Du hast ein Erklärvideo erstellt, das wichtige Diagramme zeigt. Eine Audiobeschreibung würde die Diagramme so beschreiben, dass auch blinde oder sehbehinderte Personen die Informationen verstehen können.

• Richtlinie 1.3: Strukturierte Inhalte

Warum ist das wichtig? Damit Benutzer, die auf Screenreader angewiesen sind, die Struktur und den Inhalt der Seite verstehen können, ist es wichtig, semantische HTML-Elemente richtig zu verwenden.

Was bedeutet das? Richtlinie 1.3 fordert, dass Du auf Deiner Website semantische HTML-Elemente richtig verwendest, um die Struktur und den Inhalt klar und verständlich zu gestalten. Das bedeutet, dass Du die Bedeutung und Beziehung von Inhalten durch geeignete HTML-Tags ausdrückst.

Beispiel: Verwende Überschriftselemente (<h1>, <h2>, usw.) in der richtigen Reihenfolge, um die Hierarchie und Struktur der Seite zu verdeutlichen. Tabellen sollten nur für tabellarische Daten verwendet werden, nicht für Layoutzwecke. Jeder Datenzelle (<td>) sollte klar sein, zu welcher Kopfzeile (<th>) sie gehört.

➔ Auf Lesbarkeit für Screenreader prüfen

• Richtline 1.3.4 Orientierung

Warum ist das wichtig? Menschen nutzen Geräte unterschiedlich. Einige bevorzugen Hochformat, andere Querformat. Flexibilität erhöht die Benutzerfreundlichkeit.

Was bedeutet das? Deine Inhalte sollten sowohl im Hoch- als auch im Querformat funktionieren, es sei denn, eine spezifische Ausrichtung ist notwendig.

Beispiel: Deine Webseite sollte auf einem Smartphone sowohl im Hochformat als auch im Querformat lesbar und bedienbar sein, ohne dass Inhalte abgeschnitten werden oder das Layout zerfällt.

• Richtlinie 1.3.5 Zweck von Eingabefeldern identifizieren

Warum ist das wichtig? Autocomplete reduziert die Eingabezeit und minimiert Eingabefehler, was besonders für Menschen mit motorischen Einschränkungen hilfreich ist.

Was bedeutet das? Eingabefelder, die bestimmte Informationen sammeln (wie Name, E-Mail-Adresse, Telefonnummer), sollten ein geeignetes Autocomplete-Attribut haben. Das erleichtert den Benutzern das Ausfüllen von Formularen, da ihre Browser automatisch passende Informationen vorschlagen können.

Beispiel: In einem Anmeldeformular könntest Du das Feld für die E-Mail-Adresse mit autocomplete="email" kennzeichnen, damit der Browser des Benutzers die richtige E-Mail-Adresse vorschlägt.

• Richtlinie 1.4: Bessere Sicht- und Hörbarkeit von Inhalten

Einsatz von Farben

Warum ist das wichtig? Farben sollten nicht die einzige Methode sein, um Informationen zu vermitteln, da nicht alle Menschen Farben unterscheiden können.

Was bedeutet das? Farben sollten nicht das einzige Mittel sein, um Informationen oder Funktionen auf einer Website zu vermitteln. Es ist wichtig, zusätzliche visuelle Hinweise zu bieten, da nicht alle Menschen Farben korrekt wahrnehmen oder unterscheiden können.

Beispiel: Wenn ein Link auf Deiner Seite nur durch eine andere Farbe hervorgehoben wird, stelle sicher, dass er auch unterstrichen wird, wenn er mit der Maus überfahren wird oder den Tastaturfokus erhält. So können alle Benutzer den Link als solchen erkennen, unabhängig von ihrer Fähigkeit, Farben zu unterscheiden.

Audiokontrolle

Warum ist das wichtig? Automatisch abgespielte Audiodateien können für Menschen mit Hörbeeinträchtigungen oder in lauten Umgebungen problematisch sein.

Was bedeutet das? Automatisch abgespielte Audiodateien auf einer Website müssen steuerbar sein. Dies bedeutet, dass Nutzer die Möglichkeit haben sollten, das Audio zu pausieren, zu stoppen oder die Lautstärke anzupassen.

Beispiel: Wenn auf Deiner Seite automatisch Audio abgespielt wird, wie z.B. Hintergrundmusik oder eine Begrüßung, solltest Du eine Möglichkeit bieten, diese zu pausieren oder die Lautstärke anzupassen.

• Richtlinie 1.4.3 Kontrast (Minimum)

Warum ist das wichtig? Guter Kontrast verbessert die Lesbarkeit für alle, besonders für Menschen mit Sehbehinderungen oder Farbsehschwächen.

Was bedeutet das? Text und Bilder von Text sollten einen Kontrastverhältnis von mindestens 4,5:1 haben. Bei großem Text (mindestens 18 Punkt oder 14 Punkt fett) sollte das Verhältnis mindestens 3:1 betragen.

Beispiel: Wenn Du dunkelgrauen Text auf einem hellgrauen Hintergrund verwendest, stelle sicher, dass der Kontrast stark genug ist, damit der Text gut lesbar ist. Es gibt online Tools, um das Kontrastverhältnis zu überprüfen.

➔ Kontraste deiner Website überprüfen 

• Richtlinie 1.4.4 Textgröße anpassen

Warum ist das wichtig? Menschen mit Sehbehinderungen vergrößern oft den Text. Deine Webseite muss auch dann noch gut bedienbar bleiben.

Was bedeutet das? Deine Webseite sollte auch dann noch lesbar und funktional sein, wenn der Benutzer die Seite auf 200 % vergrößert.

Beispiel: Teste Deine Webseite, indem Du die Ansicht in Deinem Browser auf 200 % zoomst. Alle Inhalte sollten weiterhin gut lesbar und alle Funktionen zugänglich sein, ohne dass horizontales Scrollen notwendig ist.

• Richtlinie 1.4.5 Bilder mit Text

Warum ist das wichtig? Echter Text ist zugänglicher, besser lesbar und kann von assistiven Technologien genutzt werden.

Was bedeutet das? Verwende keine Bilder mit Text, wenn der gleiche visuelle Effekt auch mit echtem Text erreicht werden kann. Text in Bildern kann von Bildschirmlesern nicht gelesen und bei Vergrößerung nicht korrekt dargestellt werden.

Beispiel: Anstatt Dein Logo als Bilddatei zu verwenden, schreibe den Text direkt in den HTML-Code und style ihn mit CSS.

• Richtlinie 1.4.10 Reflow

Warum ist das wichtig? Viele Benutzer surfen auf mobilen Geräten. Eine gute Anpassung an kleine Bildschirme erhöht die Zugänglichkeit und Benutzerfreundlichkeit.

Was bedeutet das? Deine Inhalte sollten auch bei einer Breite von 320 Pixeln (typische Smartphone-Breite) ohne Funktions- oder Inhaltsverlust darstellbar sein. Horizontales Scrollen sollte vermieden werden.

Beispiel: Erstelle ein responsives Design für Deine Webseite, das sich an unterschiedliche Bildschirmgrößen anpasst. Verwende Flexbox oder Grid, um ein flexibles Layout zu erstellen, das sich automatisch neu anordnet.

• Richtlinie 1.4.11 Nicht-textuelle Kontraste

Warum ist das wichtig? Klare visuelle Abgrenzungen helfen allen Benutzern, insbesondere denen mit Sehbehinderungen, die interaktiven Elemente zu erkennen und zu verwenden.

Was bedeutet das? Graphische Objekte und benutzerdefinierte Interface-Komponenten sollten ein Kontrastverhältnis von mindestens 3:1 aufweisen, um sichtbar zu sein.

Beispiel: Stelle sicher, dass Buttons, Icons und andere interaktive Elemente gut sichtbar sind, indem Du sie in einer Farbe gestaltest, die sich deutlich vom Hintergrund abhebt.

• Richtlinie 1.4.12 Textabstände

Warum ist das wichtig? Benutzer mit Sehbehinderungen oder kognitiven Einschränkungen können den Text besser lesen und verstehen, wenn sie die Abstände anpassen können.

Was bedeutet das? Es sollte kein Inhalt verloren gehen oder die Funktionalität beeinträchtigt werden, wenn Benutzer die Textabstände anpassen.

Beispiel: Teste Deine Webseite mit erhöhten Zeilenabständen und Wortabständen, um sicherzustellen, dass der Text weiterhin lesbar ist und keine Inhalte überlappen oder abgeschnitten werden.

• Richtlinie 1.4.13 Inhalt bei Hover oder Fokus

Warum ist das wichtig? Es hilft Benutzern, insbesondere denen mit motorischen Einschränkungen oder Sehbehinderungen, den zusätzlichen Inhalt einfach zu nutzen und zu schließen.

Was bedeutet das? Wenn zusätzlicher Inhalt beim Hover oder Fokus angezeigt wird, muss dieser Inhalt leicht zu schließen sein, ohne die Position des Zeigers oder die Tastaturfokussierung zu ändern.

Beispiel: Wenn Du ein Tooltip oder ein Dropdown-Menü verwendest, stelle sicher, dass es mit der Esc-Taste geschlossen werden kann und der Benutzer problemlos zum Hauptinhalt zurückkehren kann.

• Richtlinie 2.1: Tastaturzugänglichkeit

Tastatur

Warum ist das wichtig? Viele Benutzer, darunter Menschen mit motorischen Einschränkungen, nutzen Tastaturen statt Mäusen. Daher muss jede Funktion einer Webseite per Tastatur zugänglich sein.

Was bedeutet das? Alle Funktionen und Interaktionen auf einer Website müssen über die Tastatur zugänglich sein, ohne dass eine Maus benötigt wird.

Beispiel: Stell Dir vor, Du hast eine Bildgalerie auf Deiner Seite. Um sicherzustellen, dass auch Tastaturbenutzer die Bilder durchblättern können, musst Du sicherstellen, dass alle Steuerungen (wie Vor- und Zurück-Buttons) per Tabulator-Taste erreichbar und über die Enter- oder Leertaste aktivierbar sind.

Keine Tastaturfalle

Warum ist das wichtig? Viele Benutzer, darunter Menschen mit motorischen Einschränkungen, nutzen Tastaturen statt Mäusen. Daher muss jede Funktion einer Webseite per Tastatur zugänglich sein.

Was bedeutet das? Tastaturbenutzer dürfen an keiner Stelle auf der Webseite "festhängen". Sie müssen immer die Möglichkeit haben, weiterzunavigieren oder zurückzukehren.

Beispiel: In einem Popup-Fenster muss es möglich sein, den Fokus per Tabulator-Taste sowohl in das Popup hinein als auch wieder heraus zu bewegen. Eine Schließen-Schaltfläche sollte ebenfalls per Tastatur erreichbar sein.

• Richtlinie 2.2: Genügend Zeit bereitstellen

Zeitlimit einstellbar

Warum ist das wichtig? Einige Benutzer benötigen mehr Zeit, um Inhalte zu lesen oder Formulare auszufüllen, insbesondere Menschen mit kognitiven Beeinträchtigungen oder Sehbehinderungen.

Was bedeutet das? Wenn auf einer Webseite ein Zeitlimit für Aktionen besteht, muss den Benutzern die Möglichkeit gegeben werden, dieses Limit zu verlängern oder zu deaktivieren.

Beispiel: Wenn Deine Website einen Anmeldevorgang mit einem Zeitlimit hat, stelle sicher, dass Benutzer das Zeitlimit verlängern oder deaktivieren können. Das ist besonders wichtig bei komplexen oder langen Formularen.

Anhalten, Stoppen, Ausblenden

Warum ist das wichtig? Bewegliche oder blinkende Inhalte können ablenkend sein und sollten gestoppt oder ausgeblendet werden können, um eine bessere Lesbarkeit zu ermöglichen.

Was bedeutet das? Bewegliche, blinkende oder automatisch aktualisierte Inhalte müssen vom Benutzer angehalten, gestoppt oder ausgeblendet werden können.

Beispiel: Wenn Deine Webseite eine automatisch scrollende Bilderschau enthält, sollte es eine Möglichkeit geben, diese anzuhalten. Dies ermöglicht Benutzern, die Bilder in ihrem eigenen Tempo anzusehen.

• Richtlinie 2.3: Vermeidung von Inhalten, die Anfälle auslösen können

Warum ist das wichtig? Flashing-Inhalte können bei einigen Menschen epileptische Anfälle auslösen.

Was bedeutet das? Vermeide Inhalte, die schnell blinken oder flackern, da sie bei einigen Personen epileptische Anfälle auslösen können.

Beispiel: Vermeide Inhalte, die schneller als dreimal pro Sekunde blinken, oder stelle sicher, dass diese Inhalte ein geringes Kontrastverhältnis und keinen hohen Rotanteil haben, um das Risiko zu minimieren.

• Richtlinie 2.4: Navigation erleichtern

Überspringbare Blöcke

Warum ist das wichtig? Benutzer sollten schnell zu den Hauptinhalten einer Seite springen können, insbesondere wenn sie wiederholte Navigationsleisten oder Werbung überspringen möchten.

Was bedeutet das? Füge einen Link hinzu, der es Benutzern ermöglicht, schnell von der wiederholten Navigation oder anderen wiederkehrenden Inhalten direkt zu den Hauptinhalten der Seite zu springen.

Beispiel: Füge einen „Zum Inhalt springen“-Link am Anfang der Seite hinzu, der es Nutzern ermöglicht, die Navigation zu überspringen und direkt zum Hauptinhalt zu gelangen.

Seiten-Titel

Warum ist das wichtig? Der Titel einer Webseite hilft Nutzern und Suchmaschinen, den Inhalt und Zweck der Seite zu verstehen.

Was bedeutet das? Der Seiten-Titel ist der Text, der in der Titelleiste des Browsers und in den Suchergebnissen angezeigt wird und den Inhalt sowie den Zweck der Seite beschreibt.

Beispiel: Der Titel einer Seite sollte klar und informativ sein, wie „Online-Shop für nachhaltige Kleidung“ anstelle von „Startseite“.

Fokus-Reihenfolge

Warum ist das wichtig? Eine logische Reihenfolge der Tab-Reihenfolge hilft Nutzern, sich intuitiv auf einer Seite zurechtzufinden.

Was bedeutet das? Gestalte die Tab-Reihenfolge der interaktiven Elemente sinnvoll und teste sie, um eine intuitive Navigation zu gewährleisten.

Beispiel: Achte darauf, dass die Reihenfolge, in der die Elemente mit der Tabulatortaste erreicht werden, sinnvoll ist. Ein Benutzer sollte z.B. zuerst die Hauptnavigation und dann den Hauptinhalt erreichen.

• Richtlinie 2.4.5 Mehrere Wege

Warum ist das wichtig? Menschen navigieren unterschiedlich. Mehrere Wege erhöhen die Chance, dass jeder Benutzer findet, was er sucht.

Was bedeutet das? Es sollten mindestens zwei verschiedene Wege vorhanden sein, um andere Seiten auf Deiner Webseite zu finden. Dies kann über ein Menü, eine Suchfunktion, eine Sitemap oder verwandte Links geschehen.

Beispiel: Neben der Hauptnavigation könntest Du eine Suchleiste und eine Fußzeile mit Links zu den wichtigsten Seiten Deiner Webseite anbieten.

• Richtlinie 2.4.6 Überschriften und Labels

Warum ist das wichtig? Eindeutige Beschriftungen helfen allen Benutzern, besonders denen mit kognitiven Einschränkungen, die Inhalte schnell zu erfassen und zu verstehen.

Was bedeutet das? Überschriften und Beschriftungen sollten informativ und eindeutig sein, damit die Benutzer sofort wissen, was sie erwartet.

Beispiel: Verwende klare und beschreibende Überschriften wie „Kontaktieren Sie uns“ anstelle von allgemeinen Begriffen wie „Kontakt“. Stelle sicher, dass Formularfelder wie „E-Mail-Adresse“ klar beschriftet sind.

• Richtlinie 2.4.7 Sichtbarer Fokus

Warum ist das wichtig? Benutzer, die mit der Tastatur navigieren, müssen sehen können, welches Element gerade fokussiert ist, um sich effektiv durch die Seite zu bewegen.

Was bedeutet das? Es sollte einen sichtbaren Indikator geben, wenn ein Element den Tastaturfokus erhält.

Beispiel: Stelle sicher, dass Links und Buttons eine deutlich sichtbare Umrandung oder eine andere visuelle Änderung zeigen, wenn sie fokussiert werden, um Tastaturnutzern die Navigation zu erleichtern.

• Richtlinie 2.4.11 Fokus nicht verdeckt

Warum ist das wichtig? Benutzer müssen wissen, wo sie sich auf der Seite befinden und dürfen nicht den Überblick verlieren.

Was bedeutet das? Elemente, die den Tastaturfokus erhalten, dürfen nicht vollständig von anderen Inhalten verdeckt werden.

Beispiel: Achte darauf, dass Popup-Fenster oder modale Dialoge den Fokus nicht verdecken und der Benutzer weiterhin die wichtigsten Inhalte der Seite sehen kann.

• Richtlinie 2.5: Unterstützung für verschiedene Eingabemethoden

Zeigergesten

Warum ist das wichtig? Nicht alle Nutzer können komplexe Gesten wie Pinch-to-Zoom oder Swipe ausführen. Daher sollten alle Funktionen auch mit einfachen Berührungen oder Klicks erreichbar sein.

Was bedeutet das? Stelle sicher, dass alle interaktiven Funktionen deiner Webseite auch ohne komplexe Touch-Gesten wie Pinch-to-Zoom oder Swipe bedienbar sind.

Beispiel: Wenn eine Funktion zum Vergrößern eines Bildes durch eine Pinch-Geste verfügbar ist, sollte es auch eine Schaltfläche oder einen Link geben, um dieselbe Funktion zu aktivieren.

Label im Namen

Warum ist das wichtig? Für Nutzer von Sprachsteuerung und Screenreadern ist es wichtig, dass die sichtbaren Labels von Steuerelementen auch im zugänglichen Namen enthalten sind.

Was bedeutet das? Alle sichtbaren Beschriftungen von Steuerelementen (wie Buttons) müssen auch im zugänglichen Namen, der von Screenreadern und Sprachsteuerungssystemen verwendet wird, enthalten sein.

Beispiel: Ein Button, der sichtbar mit „Senden“ beschriftet ist, sollte auch im zugänglichen Namen (z.B. aria-label="Senden") diesen Text enthalten.

• Richtlinie 2.5.8 Mindestgröße von Zielen

Warum ist das wichtig? Menschen mit motorischen Einschränkungen oder großen Fingern auf Touchscreens können kleine Ziele nur schwer genau treffen.

Was bedeutet das? Interaktive Elemente, die mit dem Zeiger bedient werden, sollten mindestens 24x24 Pixel groß sein, um leicht anklickbar zu sein.

Beispiel: Stelle sicher, dass Buttons und Links groß genug sind, damit sie problemlos angeklickt werden können, ohne dass der Benutzer versehentlich daneben klickt.

• Richtlinie 3.1: Lesbare und verständliche Texte

Die verwendeten Schriftarten sollten gut lesbar sein und sich vergrößern lassen. Im Portal Barrierefreiheit heißt es: "Es sind klare Schriftarten mit deutlichem Kontrast und mit einer Schriftgröße von mindestens 1.2 em (120 Prozent) zu verwenden. Wichtige Informationen und Überschriften sind hervorzuheben. Es sind maximal zwei verschiedene Schriftarten zu verwenden."

Als barrierefrei gelten unter anderem: 

• Arial
• Calibri
• Century Gothic
• Georgia
• Helvetica
• Tahoma
• Times New Roman
• Verdana

➔ Verständlichkeit der Texte prüfen

Sprache der Seite

Warum ist das wichtig? Screenreader und andere Technologien müssen wissen, in welcher Sprache der Text verfasst ist, um ihn korrekt wiederzugeben.

Was bedeutet das? Lege die Sprache, in der der Inhalt verfasst ist, durch das lang-Attribut im HTML-Tag fest.

Beispiel: Setze das lang-Attribut im HTML-Tag, z.B. <html lang="de"> für eine deutschsprachige Seite.

• Richtlinie 3.2: Vorhersehbare Webseiten

Bei Fokus

Warum ist das wichtig? Wenn Elemente wie Links oder Formularelemente den Fokus erhalten, sollten sie keine unerwarteten Änderungen hervorrufen, die den Benutzer verwirren könnten.

Was bedeutet das? Verzichte, wo möglich, auf Popups oder andere interaktive Elemente.

Beispiel: Ein Dropdown-Menü sollte sich nicht automatisch öffnen, wenn es nur fokussiert wird, sondern erst bei einem bewussten Klick.

Bei Eingabe

Warum ist das wichtig? Benutzer sollten nicht überrascht werden, wenn sie Daten eingeben oder interagieren.

Was bedutet das? Verzichte auf unerwartete Layout-Änderungen, Pop-ups oder Inhaltsanpassungen dort, wo deine Besucher Daten eingeben.

Beispiel: Bei einem Formular sollte sich das Layout nicht plötzlich ändern, wenn ein Benutzer ein Feld ausfüllt oder ein Kontrollkästchen anklickt.

• Richtlinie 3.2.3 Konsistente Navigation

Warum ist das wichtig? Konsistenz hilft Benutzern, sich auf der Seite zurechtzufinden und reduziert Verwirrung.

Was bedeutet das? Navigationslinks sollten in der gleichen Reihenfolge auf allen Seiten erscheinen, um die Konsistenz zu wahren und Verwirrung zu vermeiden.

Beispiel: Die Hauptnavigation sollte auf jeder Seite in der gleichen Reihenfolge und am gleichen Ort sein, damit Benutzer sich leicht zurechtfinden.

• Richtlinie 3.2.4 Konsistente Identifikation

Warum ist das wichtig? Konsistente Benennungen erleichtern es den Benutzern, vertraute Funktionen schnell zu finden und zu nutzen.

Was bedeutet das? Elemente mit gleicher Funktionalität sollten auf allen Seiten gleich benannt sein.

Beispiel: Wenn Du eine Suchfunktion auf mehreren Seiten hast, sollte diese immer gleich aussehen und als „Suche“ bezeichnet werden, um Verwirrung zu vermeiden.

• Richtlinie 3.3: Fehlervermeidung und -behebung

Fehlerkennzeichnung

Warum ist das wichtig? Wenn Benutzer ein Formular ausfüllen, ist es wichtig, dass sie sofort erkennen, wenn etwas falsch eingegeben wurde. Fehler sollten klar und verständlich angezeigt werden, damit die Benutzer wissen, was korrigiert werden muss.

Was bedeutet das?

• Fehleranzeige: Fehler müssen deutlich gemacht werden. Ein Feld sollte visuell und/oder textlich anzeigen, dass ein Fehler aufgetreten ist. Zum Beispiel könnte ein Feld, das eine E-Mail-Adresse erwartet, eine Fehlermeldung wie „Bitte geben Sie eine gültige E-Mail-Adresse ein“ anzeigen, wenn der Benutzer eine ungültige Adresse eingibt.

• Schneller Zugang zum Fehler: Der Benutzer sollte sofort zum fehlerhaften Feld navigieren können. Wenn Fehler in verschiedenen Feldern auftreten, sollte der Benutzer mit einem einzigen Klick oder Tastaturbefehl zu jedem Fehler navigieren können.

• Fehlerbehebung und erneutes Einreichen: Die Korrektur der Fehler sollte einfach und intuitiv sein. Beispielsweise könnte eine automatische Überprüfung sicherstellen, dass alle erforderlichen Felder ausgefüllt sind, bevor das Formular eingereicht wird.

Beispiel: Bei einem Anmeldeformular, das eine E-Mail-Adresse erfordert, sollte eine Fehlermeldung direkt neben dem Eingabefeld angezeigt werden, wenn die eingegebene Adresse ungültig ist. Der Benutzer sollte das Feld schnell erreichen können, um die Eingabe zu korrigieren.

Labels oder Anweisungen

Warum ist das wichtig? Klare und präzise Beschriftungen und Anweisungen helfen den Benutzern, zu verstehen, welche Informationen benötigt werden und wie sie eingegeben werden sollten.

Was bedeutet das?

• Beschriftungen: Jedes Eingabefeld sollte eine klare Beschriftung haben, die beschreibt, welche Informationen eingegeben werden müssen. Beispielsweise sollte ein Feld für Telefonnummern mit „Telefonnummer“ beschriftet sein.

• Anweisungen und Beispiele: Wo es nötig ist, sollten zusätzliche Anweisungen oder Beispiele bereitgestellt werden. Dies kann durch Hilfetexte oder Platzhalter im Feld geschehen, die den Benutzern zeigen, in welchem Format die Daten eingegeben werden sollen.

Beispiel: Bei einem Feld für „Geburtsdatum“ könntest Du ein Formatbeispiel wie „TT/MM/JJJJ“ als Platzhaltertext anzeigen, um den Benutzern zu helfen, das Datum im richtigen Format einzugeben.

Redundante Eingaben

Warum ist das wichtig? Es kann frustrierend sein, wenn Benutzer dieselben Informationen mehrfach eingeben müssen. Daher sollten Informationen, die bereits bereitgestellt wurden, nicht erneut eingegeben werden müssen, es sei denn, es ist unbedingt notwendig.

Was bedeutet das?

• Automatische Vervollständigung: Wo immer möglich, sollten bereits eingegebene Informationen gespeichert und bei Bedarf automatisch ausgefüllt werden. Dies kann besonders nützlich sein, wenn Benutzer ein Formular mehrmals ausfüllen müssen oder wenn sie eine Bestellung aufgeben.

• Wahlmöglichkeiten bieten: Wenn Informationen bereits verfügbar sind, sollten Benutzer die Möglichkeit haben, sie aus einer Liste auszuwählen, anstatt sie erneut eingeben zu müssen.

• Sicherheitsaspekte: Wenn Informationen aus Sicherheitsgründen nicht gespeichert oder wiederverwendet werden dürfen (wie Passwörter), sollte dies klar angegeben werden, und es sollte ein sicherer Weg bereitgestellt werden, um diese Informationen einzugeben.

Beispiel: Bei einem Online-Shop sollten die Rechnungsadresse und die Versandadresse, wenn sie identisch sind, automatisch übernommen werden können. Der Benutzer sollte die Möglichkeit haben, die Adressen schnell und einfach zu übernehmen oder anzupassen, falls sie unterschiedlich sind.

• Richtlinie 3.3.3 Fehlerhinweise

Warum ist das wichtig? Detaillierte Fehlerhinweise helfen den Benutzern, ihre Fehler schnell zu erkennen und zu beheben, was den Frustrationsgrad senkt und die Benutzerfreundlichkeit erhöht.

Was bedeutet das? Wenn ein Fehler in einem Formular auftritt, sollten Vorschläge zur Behebung des Fehlers bereitgestellt werden.

Beispiel: Wenn ein Benutzer vergisst, ein Pflichtfeld auszufüllen, sollte eine Fehlermeldung wie „Bitte geben Sie Ihre E-Mail-Adresse ein“ angezeigt werden.

• Richtlinie 3.3.4 Fehlervermeidung bei rechtlichen und finanziellen Daten

Warum ist das wichtig? Dies verhindert kostspielige Fehler und gibt Benutzern die Möglichkeit, ihre Eingaben zu überprüfen, bevor endgültige Aktionen ausgeführt werden.

Was bedeutet das? Bei Änderungen oder Löschungen von rechtlichen, finanziellen oder wichtigen Daten sollten diese Änderungen reversibel sein oder eine Bestätigung erfordern.

Beispiel: Wenn ein Benutzer seine Kreditkarteninformationen ändert, sollte eine Bestätigung angezeigt werden, um unbeabsichtigte Änderungen zu vermeiden.

• Richtlinie 3.3.8 Barrierefreie Authentifizierung (Minimum)

Warum ist das wichtig? Benutzer mit kognitiven Einschränkungen oder Gedächtnisproblemen haben Schwierigkeiten mit traditionellen Passwort-Systemen. Alternative Methoden erhöhen die Zugänglichkeit.

Was bedeutet das? Eine Authentifizierung sollte keine kognitiven Tests wie das Erinnern eines Passworts erfordern, es sei denn, es gibt eine Möglichkeit, diese Tests zu umgehen oder mit Hilfe zu bestehen.

Beispiel: Biete alternative Anmeldemethoden wie Einmalcodes per E-Mail oder SMS an, um die Anmeldung zu erleichtern.

Robustheit in der Webentwicklung bedeutet, dass Deine Webseite zuverlässig von verschiedenen Browsern, Geräten und Assistenztechnologien interpretiert werden kann. Ein robuster Code stellt sicher, dass die Inhalte nicht nur korrekt angezeigt werden, sondern auch für die Nutzer mit speziellen Bedürfnissen zugänglich bleiben.

• Richtlinie 4.1: Maximale Kompatibilität

Warum ist das wichtig? Eine Webseite muss so strukturiert sein, dass Assistenztechnologien wie Screenreader korrekt interpretieren können, was auf der Seite vorhanden ist und wie es verwendet wird.

Was bedeutet das? Stelle sicher, dass deine Webseite so strukturiert und codiert ist, dass Assistenztechnologien wie Screenreader den Inhalt und die Funktionen korrekt erkennen und interpretieren können.

Beispiel: Wenn Du ein Formular mit verschiedenen Eingabefeldern und Schaltflächen hast, stelle sicher, dass diese korrekt mit label-Tags versehen sind. Ein Feld für die E-Mail-Adresse sollte z.B. so markiert sein:

Damit wird sichergestellt, dass ein Screenreader-Nutzer weiß, dass es sich um ein Eingabefeld für eine E-Mail-Adresse handelt.

• Richtlinie 4.1.3 Statusmeldungen

Warum ist das wichtig? Benutzer, die auf Bildschirmleser angewiesen sind, müssen über den Status ihrer Aktionen informiert werden, um sicherzustellen, dass sie ihre Aufgaben erfolgreich abgeschlossen haben.

Was bedeutet das? Wichtige Statusmeldungen sollten von Bildschirmlesern angekündigt werden, auch wenn der Fokus nicht auf der Meldung liegt.

Beispiel: Wenn ein Formular erfolgreich gesendet wurde, sollte eine Meldung wie „Ihr Formular wurde erfolgreich gesendet“ angezeigt und von einem ARIA-Alert angekündigt werden.

Für bestehende Websites gelten Übergangsfristen, um die Umsetzung der Anforderungen zu ermöglichen. Nutze die Zeit also gut für den Umbau deiner Website. 

Noch leichter ist es, gleich auf ein neues Website-System umzusteigen, das alle gesetzlichen Forderungen von Haus aus erfüllt.

Unsere Websites erfüllen mindestens das Compliance Level AA, sodass du nicht nur gesetzlich auf der sicheren Seite bist, sondern auch eine größere Zielgruppe erreichst, mehr Kunden gewinnst und deine Reichweite in deiner Region steigerst. Und das alles auf vielen Kanälen gleichzeitig, zentral gesteuert. 

Dann lass dich doch einfach mal beraten – wir von YPSOLUTION helfen Unternehmen dabei, noch sichtbarer und erfolgreicher zu werden mit einem Webseiten-System, das weit über das hinausgeht, was eine klassische Website von WordPress & Co. für dich leisten kann.