Kontakt
Fritz Huhn & Söhne
Willkommen auf newsQFritz Huhn & Söhne
Bild
Neues Gesetz - Ihre Chance

Das Bar­riere­frei­heits­stär­kungs­ge­setz (BFSG)

Ab dem 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft und bietet Unternehmen sowie öffentlichen Stellen die Möglichkeit, ihre digitalen und physischen Angebote zukunftsorientiert und inklusiv zu gestalten. Ob Websites, Apps, Automaten oder Dienstleistungen – durch barrierefreie Angebote wird nicht nur die Lebensqualität von Menschen mit Einschränkungen verbessert, sondern auch ein wichtiger Beitrag zu Chancengleichheit, Nachhaltigkeit und digitaler Innovation geleistet.

BFSG-Check

Das BFSG betrifft Unternehmen im B2C Bereich, die 10 oder mehr Mitarbeiter und mehr als 2 Mio Jahresumsatz oder Bilanzsumme erzielen. Die Bundesfachstelle Barrierefreiheit sagt: Das BFSG gilt auch für Websites, die darauf abzielen, Produkte oder Dienstleistungen direkt zu verkaufen, zur Buchung anzubieten oder einen späteren Verkauf vorzubereiten.

ieQ-Partner haben jetzt die Gelegenheit, den untenstehenden Quick-Check zu nutzen und das Ergebnis direkt an ihren Ansprechpartner zu senden. Da die Anpassungen an Ihrer Website umfassend sein können, empfiehlt es sich, frühzeitig aktiv zu werden.

Mehr als nur eine gesetzliche Vorgabe

BFSG Chancen

  • Verbesserte Suchmaschinenoptimierung (SEO) durch barrierefreie Inhalte
  • Potenzielle Ranking-Vorteile in Suchmaschinen durch zukunftsweisende Standards
  • Erweiterter Nutzerkreis durch die Berücksichtigung von Menschen mit Einschränkungen – allein in Deutschland gibt es rund 8 Millionen Menschen mit einer schweren Behinderung
  • Imagegewinn und positive Markenwahrnehmung durch eine inklusive Unternehmenspräsenz

Nutzen Sie diese Chance, um sich als modernes, zukunftsorientiertes Unternehmen zu positionieren!

Häufige Beeinträchtigungen

Ein Symbol für eine Person, die einen Gehstock hält und sich darauf stützt.

Visuell

Menschen mit Sehbehinderungen sind auf alternative Textbeschreibungen für bedeutungsvolle Bilder angewiesen und verwenden zur Bedienung interaktiver Elemente die Tastatur anstelle der Maus.

Ein Symbol für eine Person, die im Rollstuhl sitzt.

Auditiv

Gehörlose oder schwerhörige Menschen benötigen Untertitel bei Videoinhalten sowie visuelle Signale anstelle von akustischen Hinweisen.

Ein Symbol für einen alten Menschen, der sich mit beiden Händen an einer Gehhilfe festhält.

Motorisch

Personen mit motorischen Einschränkungen brauchen eventuell spezielle Tastaturen, Augensteuerung oder andere unterstützende Geräte, um das Tippen und Navigieren zu erleichtern.

Ein Symbol für einen alten Menschen, der sich mit beiden Händen an einer Gehhilfe festhält.

Kognitiv

Klare Gestaltung, durchgehende Navigation und einfache Sprache unterstützen Menschen mit verschiedenen Lernschwierigkeiten optimal.

Grundpfeiler

Die vier Prinzipien der Barrierefreiheit

  • Wahrnehmbarkeit - Verbesserte Text-Alternativen, optimierte Mediennutzung und klare visuelle Gestaltung
  • Bedienbarkeit – Erleichterte Navigation, alternative Eingabemöglichkeiten und durchdachte Nutzerführung
  • Verständlichkeit – Intuitive Benutzerführung, Fehlervermeidung und optimierte Lesbarkeit
  • Robustheit – Maximale Kompatibilität mit gängigen Technologien und assistiven Systemen
Einordnung

Rechtliche Relevanz

Das BFSG betrifft Unternehmen, die ihre Angebote (Produkte & Dienstleistungen) im B2C-Bereich platzieren, die mehr als 10 Mitarbeiter und mehr als 2 Millionen Jahresumsatz oder Bilanzsumme erzielen.

Die Bundesfachstelle für Barrierefreiheit sagt: Das BFSG gilt auch für Websites, die darauf abzielen, Produkte oder Dienstleistungen direkt zu verkaufen, zur Buchung anzubieten oder einen späteren Verkauf vorzubereiten.

Webseiten mit B2B Ausrichtung sind somit nicht relevant. Sollten Sie aber einen Karriere-Content oder gar eine Karriere-Website betreiben, so fällt dieser aufgrund der B2C Regelung auch unter das BFSG.

Chancen zur Stärkung der Marktposition

Haftung & Risiko

FAQ

Wer ist betroffen?

Neben dem Verkauf physischer Produkte gilt das übrigens auch, nach Ansicht der meisten Juristen, für Dienstleistungen. Auch die Möglichkeit für Nutzer, auf der Website eines Unternehmens beispielsweise einen Termin für eine Beratung zu buchen, um unter das BFSG zu fallen. Es reicht hier bereits aus, wenn eine Dienstleistung auf den Abschluss eines Verbrauchervertrages abzielt.

Welche Produkte und Dienstleistungen sind betroffen?

Das Gesetz gilt für eine Vielzahl von Produkten und Dienstleistungen, darunter:

  • Produkte:
    • Geldautomaten und Zahlungsterminals
    • Mobiltelefone, Computer und andere elektronische Geräte
    • E-Book-Reader
  • Dienstleistungen:
    • Elektronischer Handel (Online-Shops)
    • Kommunikationsdienste (z. B. Websites und Apps)
    • Bankdienstleistungen
    • Verkehrsdienste (z. B. Ticketbuchungssysteme)
Welche unterschiedlichen Auslegungen des BFSG gibt es derzeit?

Wie immer in der Rechtswissenschaft geht es um die Auslegung einer Norm bzw. eines Paragraphen. Diese Auslegung kann unterschiedlich ausfallen. Die Beurteilung durch unseren Juristen und einer renommierten Kanzlei aus Düsseldorf dazu lautet:

Nach jetzigem Stand und Auslegung des §2 Abs. 26 BFSG ist der direkte Verkauf nicht erforderlich. Die Möglichkeit der individuellen Anfrage eines Verbrauchers auf Abschluss eines Kaufvertrages reicht nach derzeit herrschender Meinung bereits aus. Kommunikations- und Anfragetools dürften somit ausreichend sein.

Welche Unternehmen sind betroffen?

Das Gesetz richtet sich an Hersteller, Händler und Dienstleister, die Produkte und Dienstleistungen in der Europäischen Union anbieten. Kleinstunternehmen sind von den Anforderungen ausgenommen.

  • 10 oder mehr Vollzeitmitarbeitende: Die Mitarbeiterzahl ermittelt sich aus der Zahl der Jahresarbeitseinheiten. D.h. Anzahl der während eines Jahres beschäftigten Vollzeitarbeitnehmer. Teilzeitbeschäftigte, Zeitarbeitskräfte und Saisonarbeiter werden nur entsprechend ihres Anteils an den JAE berücksichtigt. Auszubildende und Mitarbeiter im Mutterschafts- oder Elternurlaub sind nicht zu berücksichtigen.
  • und mehr als 2 Mio. Jahresumsatz/ Bilanzsumme.
Was hat es mit der Bilanzsumme eigentlich auf sich?

Da die Bilanzsumme nicht genauer erklärt wird gilt die allgemeine Begrifflichkeit, die zum Beispiel die Immobilienwerte einschließt. Dies bedeutet aktuell, dass ein Unternehmen mit größen Lagerhallen oder Ausstellungen mit einem Wert von 2 Mio. auch unter die Regelung fallen wenn sie keinen Jahresumsatz von 2 Mio. erzielen. Praxen bei Zahnärzten, die sich im Eigentum befinden, zählen bei entsprechendem Wert ebenafalls dazu. Diese Regelung wird mit an Sicherheit grenzender Wahrscheinlichkeit in Kürze vor Gericht anders entschieden, hat aber heute Bestand.

Gibt es Ausnahmen?

Ja, das Gesetz sieht Ausnahmen vor, wenn die Umsetzung unverhältnismäßige Belastungen verursacht, insbesondere für kleine und mittlere Unternehmen. Diese müssen jedoch nachweisen, dass die Anforderungen nicht wirtschaftlich tragbar sind.

Gibt es Übergangsfristen?

Mit Blick auf den § 38 Abs.1 BFSG könnte man glauben, dass es noch eine Übergangsbestimmungen für Dienstleistungserbringer bis zum 27. Juni 2030 geben könnte. Doch wer das denkt liegt weit daneben. Diese Ausnahme gilt nur für Dienstleistungserbringer und deren Produkte. darunter fallen z.B. Dienstleister, die eigene Produkte zur Nutzung durch Endkunden verkaufen. Diese Produkte unterliegen dem Barrierefreiheitsstärkungsgesetz. Als Beispiel kann man hier Dienstleister nennen, die Router an Endkunden verkaufen. Der Router unterliegt dann dem BFSG und muss für Endkunden barrierefrei in den Verkehr gebracht werden. Für diese Produkte greift also die Übergangsbestimmung nach § 38 BFSG. Weitere Beispiele sind auch Terminals oder Check-In-Automaten. Websites sind von der Bestimmung der Übergangsfrist ausgeschlossen.

Nach jetzigem Stand und Auslegung des §2 Abs. 26 BFSG ist der direkte Verkauf nicht erforderlich. Die Möglichkeit der individuellen Anfrage eines Verbrauchers auf Abschluss eines Kaufvertrages reicht nach derzeit herrschender Meinung bereits aus. Kommunikations- und Anfragetools dürften somit ausreichend sein.

Welche Strafen drohen bei Nicht-Einhaltung?

Unternehmen, die die Vorgaben des BFSG nicht einhalten, können mit Bußgeldern belegt werden. Die genaue Höhe der Strafen hängt vom Einzelfall ab und wird von den zuständigen Behörden festgelegt

Wann wird meine Webseite umgestellt?

Sie erhalten in den kommenden Monaten immer wieder Updates zum Thema. Da wir aber zuerst alle technischen Kriterien umsetzen müssen, wird mit der Umstellung der Webseiten voraussichtlich ab dem 2. Quartal 2025 gestartet - zuerst alle BFSG-relevanten Unternehmen, darauffolgend alle weiteren Interessenten. Wir kommen diesbezüglich und hinsichtlich individuellem Aufwand rechtzeitig auf sie zu.

Wann erhalte ich weitere Informationen?

Wir melden uns in regelmäßigen Abständen bei Ihnen, eine Umstellung der Webseite ist allerdings erst möglich, nachdem ein Großteil der technischen Kriterien umgesetzt sind. Erste Umstellungen werden daher nicht vor Juni starten.

Eine Übersicht der 65 BFSG-Kriterien

Hat das Icon einen Link, gib mir einen Wink!

Kurzbeschreibung:

Wenn deine Icons oder deine Bilder klickbar sind und irgendwo hinführen oder eine Funktion auslösen, benötigen sie eine Textalternative, damit sie von Screenreadern verstanden werden.

Ich kann das Bild nicht sehen, drum schreib mir Text, ums zu verstehen!

Kurzbeschreibung:

Jedes Bild, das Infos vermittelt oder dazu beiträgt, die Inhalte deiner Seite besser zu verstehen, benötigt einen Alternativtext bzw. eine Textalternative (zum Beispiel neben dem Bild) für Screenreader.

Ist das Bild nur dekorativ, spar dir den Alt-Text definitiv!

Kurzbeschreibung:

Ein Bild sollte ein leeres Alt-Attribut haben, wenn es einen rein visuellen Mehrwert hat oder keine nützlichen Informationen vermittelt. Im Zweifel ist es besser, einen Alt-Text zu schreiben, als ihn wegzulassen.

Grafische CAPTCHAS? Dann bitte nicht nur eins – entweder mit Alternative, oder keins!

Kurzbeschreibung:

Wenn du ein grafisches CAPTCHA einsetzt, musst du mindestens eine Alternative dafür bereitstellen.

Stecken in Audios und Videos wichtige Information, lohnt sich eine Alternative schon!

Kurzbeschreibung:

Für Audiodateien oder stumme Videos (Videos komplett ohne Audio) müssen Texte als Alternative bereitgestellt werden.

Ein Untertitel fürs Video macht dich und deine Umgebung froh!

Kurzbeschreibung:

Aufgezeichnete Videos benötigen Untertitel. Achte dabei darauf, dass genau das in den Untertiteln steht, was auch im Audio vorkommt.

Hast du Audiodeskription oder Volltext als Alternative, unterstelle ich dir edle Motive!

Kurzbeschreibung:

Deine Videos benötigen eine Audiodeskription, wenn wichtiger Inhalt darin vorkommt, der nicht auf der Tonspur beschrieben wird. Eine Volltext-Alternative ist nur WCAG-Level A und nicht AA.

Machst du deinen Live-Vortrag, sind Untertitel, was ich mag

Kurzbeschreibung:

Live-Vorträge benötigen Untertitel. Achte dabei darauf, dass genau das in den Untertiteln steht, was auch im Audio vorkommt.

Zeigen Bilder in Videos wichtige Information, brauchst du Audiodeskription!

Kurzbeschreibung:

Videos benötigen eine Audiodeskription, wenn sie wichtige Inhalte vermitteln, die nicht bereits über die Tonspur bereitgestellt werden.

Bleibe wirklich stur, bei der Überschriften-Struktur!

Kurzbeschreibung:

Überschriften müssen auch als solche im Code ausgezeichnet sein und sollten die richtige Reihenfolge einhalten (keine nach einer usw.).

Zeigst du eine Liste, nutze »ul« oder »ol« für die Kiste!

Kurzbeschreibung:

Listen müssen im HTML-Code auch als Listen ausgezeichnet sein. Sie benötigen also entweder ein <ul>, <ol> oder ein <dl>, je nachdem, für welchen Zweck du die Liste nutzt.

Zitierst du mich, so vergiss die Blockquote nicht!

Kurzbeschreibung:

Zitate (zum Beispiel von Kund*innen) benötigen die richtige Auszeichnung als <blockquote>, oder <q> für kurze Zitate in Fließtext.

Gib Absätzen ein »p«, sowie »strong« und »em«, damit ichs seh!

Kurzbeschreibung:

Paragrafen und Text-Formatierungen (fett, kursiv usw.) müssen die richtigen HTML-Elemente nutzen. Du darfst keine leeren Paragrafen und doppelte Zeilenumbrüche (<br>) für Abstände nutzen.

Hilf Datentabellen auf den Sprung, mit »th« oder ARIA-Rollen-Auszeichnung.

Kurzbeschreibung:

Deine Datentabellen müssen mit den richtigen HTML-Elementen ausgezeichnet sein, um auch von assistiven Technologien verstanden zu werden.

Stellst du auf der Seite Tabellen dar, mache den Bezug von Überschrift zu Inhalt klar.

Kurzbeschreibung:

Die Köpfe von Tabellen müssen als ausgezeichnet werden. Für komplexere Tabellen benötigst du außerdem das »scope«-Attribut.

Nutzt du Tabellen für dein Layout, habe keine Strukturelemente verbaut!

Kurzbeschreibung:

Wenn deine Webseite noch HTML-Tabellen fürs Layout nutzt, ist eh schon alles verloren…

Sei ein Held und verknüpfe Labels per Code mit dem Formularfeld.

Kurzbeschreibung:

Die Beschriftung (<label>) für Formularfelder (<input>) benötigt ein »for«-Attribut. So gibst du dem Feld einen zugänglichen Namen, damit Screenreader auch vorlesen können, um welches Feld es sich handelt.

Beeinflusst die Reihenfolge der Elemente den Sinn, kriegen das assistive Technologien auch hin?

Kurzbeschreibung:

Die visuelle Reihenfolge deiner Elemente sollte sich mit der Reihenfolge decken, wie man sie mit der Tastatur (Tab/Shift-Tab) oder dem Screenreader erlebt.

Beschreibst du Inhalte jeglicher Sorte, nutze nicht nur »grün, eckig« oder andere sensorische Worte.

Kurzbeschreibung:

Verzichte auf sensorische Hinweise. »Unten Links« kann ein Screenreader nicht finden, aber den Text eines Buttons oder Labels schon. Schreibe also eher: »Klicke auf den Button ‘Jetzt kaufen’!«

Lass User ihren Bildschirm drehen, sonst ist’s um die Nutzbarkeit geschehen.

Kurzbeschreibung:

Nutzende müssen deine Webseite oder App im vertikalen und horizontalen Format anschauen können.

Um Formulare automatisch zu befüllen, zeige mir den Zweck, um die Aufgabe zu erfüllen

Kurzbeschreibung:

Wenn Nutzende persönliche Daten, wie Name, Adresse oder Passwort, eingeben sollen, müssen die »autocomplete«-Attribute an den Eingabefeldern die richtigen Werte haben.

Muss ich Informationen verstehen, sollte das nicht nur durch Farbe gehen.

Kurzbeschreibung:

Verlasse dich nicht darauf, dass User Farben sehen können. Vermeide es, Dinge nur durch Farben zu zeigen oder zu beschreiben. Wir empfehlen: Deine Webseite sollte auch in Graustufen verständlich sein.

Zoome ich auch 400 % hinein, müssen deine Inhalte trotzdem lesbar sein!

Kurzbeschreibung:

Deine Webseite muss bei 1280 px Breite und 400 % Zoom oder bei 320 px Breite so funktionieren, dass alle Inhalte und Funktionen erhalten bleiben. Ich darf dabei bei Texten nicht zweidimensional (horizontal und vertikal) scrollen müssen. Bei Elementen, bei denen es nicht anders geht, wie Tabellen oder Videos, ist das Scrollen in zwei Dimensionen erlaubt.

Brauch ich das Element, um den Inhalt zu verstehen, ist es wichtig, es gut zu sehen!

Kurzbeschreibung:

Alle Elemente, mit denen ich interagieren kann (etwa Buttons), oder die wichtig fürs Verständnis sind, sollten sich über ein Kontrastverhältnis von mindestens 3:1 ausreichend vom Hintergrund abheben.

Entscheiden sich Nutzer für mehr Zeilenabstand, schneide ihnen die Texte nicht ab, am Rand!

Kurzbeschreibung:

Texte auf deiner Webseite dürfen, basierend auf der Schriftgröße, mit 1,5-facher Zeilenhöhe, 2-fachem Absatz-, 0,12-fachem Buchstaben- und 0,16-fachem Wortabstand weder abgeschnitten noch überlagert werden.

Blendest du zusätzlich Inhalte ein, lass sie auch bedienbar sein!

Kurzbeschreibung:

Eingeblendete Elementen (etwa Menüs oder Modale) sollten: a) Mit der Maus überfahrbar sein, ohne zu verschwinden. b) Sich nicht nach einer Zeit allein schließen. c) Sich schließen lassen, ohne den Fokus zu verschieben (zum Beispiel mit ESC oder Aktivieren des auslösenden Elements).

Geht der Ton per Knopfdruck nicht aus, bin ich auch schon direkt raus!

Kurzbeschreibung:

Wenn deine Webseite automatisch Geräusche abspielt, die länger als drei Sekunden dauern, musst du Nutzer*innen ermöglichen, sie abzuschalten.

Kann ich Farben nicht gut erkennen, werde ich mich von deiner Seite trennen.

Kurzbeschreibung:

Das Kontrastverhältnis von Text zu Hintergrund muss hoch genug sein. Der vorgeschriebene Kontrast liegt bei mindestens 4,5:1 für Texte unter 24 px Schriftgröße und bei mindestens 3:1 für Schriftgrößen größer 24 px.

Für manche ist dein Text zu klein, darum muss das Zoomen sein.

Kurzbeschreibung:

Stelle sicher, dass auf 200 % vergrößert werden kann. Dabei dürfen Texte oder andere Inhalte nicht verdeckt werden oder sogar ganz verschwinden. Alle Funktionen der Webseite müssen nutzbar bleiben.

Zeigst du wichtigen Text im Bild, dann ist das für mich zu wild!

Kurzbeschreibung:

Schreibe keine Infos als Text in Bilder. Nutzende können diese nicht anpassen und assistive Technologien können sie nicht lesen. Ausnahmen gelten für Bilder, bei denen der Text essenziell ist, wie Zertifikate oder Bücher, oder wenn die Grafik zu Doku-Zwecken dient.

Schließ mich nicht aus, nutze ich keine Maus!

Kurzbeschreibung:

Deine Webseite muss vollständig mit der Tastatur bedient werden können. Ich muss mit der Tastatur alle Seiten erreichen können und es darf keine Funktionalität verloren gehen.

Tu mir einen großen Gefallen, stell mir keine Tastaturfallen!

Kurzbeschreibung:

Wenn ich etwas mit Tastatur ansteuern kann, musst du sicherstellen, dass ich: a) nicht steckenbleibe und immer weg-navigieren kann und b) ich auch überall wieder hinkomme (zurück in ein Modal).

Hast du Tastatur-Kurzbefehle auf der Seite? Mach sie abschaltbar, sonst such ich das Weite.

Kurzbeschreibung:

Wenn deine Webseite einzelne Zeichen (Buchstaben, Ziffern, Sonderzeichen) mit Funktionen belegt, müssen diese anpassbar oder abschaltbar sein.

Gib mir genug Zeit, sonst tut es dir noch leid!

Kurzbeschreibung:

Haben Inhalte oder Funktionen auf deiner Seite zeitliche Begrenzungen, müssen diese abschaltbar, anpassbar oder mehrfach verlängerbar sein – außer sie sind essenziell (Beispiel: Auktionen oder Online-Prüfungen).

Willst du Elemente bewegen? Bei unter 5 Sekunden, hast du meinen Segen.

Kurzbeschreibung:

Animationen, die auf deiner Webseite automatisch starten, müssen pausiert, gestoppt oder versteckt werden können, wenn sie länger als fünf Sekunden dauern. Es sei denn, sie sind zwingend notwendig (wie Animation einer Zeitanzeige aus Sicherheitsaspekten).

Blitzt ein Element häufiger als dreimal auf, nehme ich das nicht mehr in Kauf!

Kurzbeschreibung:

Deine Webseite darf keine Inhalte beinhalten, die schneller als dreimal in einer Sekunde aufblitzen. Darunter fallen etwa wild blinkende Buttons oder hektische GIFs.

Kann ich mit assistiver Technologie Bereiche überspringen, wird mir die Navigation gelingen!

Kurzbeschreibung:

Auf deiner Seite muss es eine Möglichkeit geben, Bereiche, die sich wiederholen, wie Header und Footer, zu überspringen. Nutze dafür etwa Sprunglinks, Landmarks und eine gute Überschriften-Struktur.

Sei nicht gemein, lass den Fokus nicht verdeckt sein!

Kurzbeschreibung:

Interaktive Elemente dürfen, wenn sie per Tastatur fokussiert sind, nicht von anderen Inhalten verdeckt werden. Sticky-Header, ausklappbare Menüs oder Dialoge können hier zum Beispiel zu Problemen führen.

Schreibe den Titel jeder Seite gut, dann weiß ich, was die Seite tut.

Kurzbeschreibung:

Jede Seite benötigt einen sinnvollen HTML-Titel, damit ich sie im Browser leichter finden kann. Der Titel sollte den »Namen der momentanen Seite« plus den »Namen der ganzen Webseite« beinhalten.

Geh ich mit der Tastatur in deine Webseite rein, sollte die Reihenfolge logisch sein.

Kurzbeschreibung:

Mit der Tastatur (Tab-Taste) oder einem Screenreader sollten die Inhalte deiner Webseite in einer sinnvollen Reihenfolge angesteuert werden können. Im Normalfall folgt diese der visuellen Reihenfolge.

Nutzt du nur Linktexte, wie "Mehr Lesen" oder "Hier klicken", werde ich dich gehörig anzicken!

Kurzbeschreibung:

Der Text eines Links (und auch der Alternativtext eines verlinkten Bildes) sollte den Zweck des Links verständlich machen. Er sollte sagen, wohin der Link führt. Wenn das nicht geht, sollte der Linktext zumindest aus dem Kontext Sinn ergeben. Der Kontext kann die Überschrift vor dem Link sein oder wenn der Link sich im gleichen <p>-Tag, wie der beschreibende Text befindet.

Zusätzlich zur Navigation, wird sich eine Suche oder Sitemap lohn.

Kurzbeschreibung:

Die Unterseiten deiner Webseite müssen auf mehr als einem Weg erreichbar sein. Zusätzlich zur Navigation musst du eine Suche oder eine Sitemap anbieten.

Ich komme mir vor, als stehe ich im Wald, beschreiben deine Überschriften nicht den Inhalt.

Kurzbeschreibung:

Deine Überschriften müssen klar den Inhalt oder den Zweck des Inhalts beschreiben, der auf sie folgt. Ebenso müssen die Beschriftungen von Formularen und Formularfeldern Sinn ergeben.

Zeig mir einen Rahmen an, damit ich den Tastaturfokus erkennen kann.

Kurzbeschreibung:

Interaktive Elemente, wie Links, Buttons oder Formularfelder, müssen klar erkennbar sein und sich vom Normalzustand unterscheiden, wenn sie mit der Tastatur fokussiert werden. Wir empfehlen, einen Fokusrahmen zu nutzen, da diese Variante auf jedem Elemente konsistent gleich aussieht und sehr robust ist.

Wenn der User drücken und ziehen kann, biete alternative Möglichkeiten an.

Kurzbeschreibung:

Jede Funktion einer Webseite muss mit einfachen Eingaben ausgelöst werden können. Komplexe Gesten wie »swipen« und »pinchen« oder Aktionen, die mehrere Finger brauchen, benötigen eine entsprechende Alternative, um sie »per Klick« auszulösen.

Mit dem Finger drücken und halten, sollt keine Konsequenzen entfalten!

Kurzbeschreibung:

Aktionen, die über eine einfache Eingabe ausgeführt werden, dürfen nicht bereits beim Tippen oder Klicken und Halten ausgeführt werden, sondern erst beim Loslassen, damit die Aktion auch abgebrochen werden kann.

Halte deine Beschriftungen gleich, im sichtbaren und im versteckten Bereich.

Kurzbeschreibung:

Nutzt du versteckte Texte in Aria-Labels oder sonstigem Code, um Links, Buttons oder Formularfelder genauer zu beschreiben, müssen diese die gleichen Worte enthalten und mit den Worten anfangen, wie der sichtbare Text.

Muss ich mein Handy schütteln, ist an Alternativen nichts zu rütteln.

Kurzbeschreibung:

Funktionen, die durch Bewegung des Gerätes ausgelöst werden können, benötigen eine Alternative, die ohne Bewegung funktioniert. Die Aktivierung über Bewegung muss außerdem abgeschaltet werden können.

Muss ein User Dinge ziehen, gib ihm Alternativen, sonst wird dir nicht verziehen.

Kurzbeschreibung:

Wenn deine Webseite Funktionen bietet, die Drag-and-drop-Gesten voraussetzen, müssen diese eine einfachere Alternative, wie das Klicken eines Buttons, haben.

Soll es gut bedienbar sein, mach die Dinge nicht zu klein!

Kurzbeschreibung:

Bedienelemente, wie Buttons oder Einträge in einem ausgeklappten Untermenü, müssen eine Klickfläche von größer oder gleich 24 × 24 px haben – noch besser 48 × 48 px.

Willst du, dass ich dich lesen kann, zeig mir deine Sprache an.

Kurzbeschreibung:

Gib am <html>-Element das »lang«-Attribut an, damit assistive Technologien die Seite in der richtigen Sprache wiedergeben oder auch die automatische Übersetzung im Browser richtig funktioniert.

Nutzt du andere Sprache in deinen Sätzen, musst du ein Lang-Attribut setzen.

Kurzbeschreibung:

Wenn du auf deiner Webseite Phrasen aus einer anderen Sprache als der Hauptsprache verwendest, muss an dem entsprechenden Element das »lang«-Attribut gesetzt werden.

Nur weil ich etwas fokussiere, heißt es nicht, dass was passiere!

Kurzbeschreibung:

Alleine mit der Tastatur den Fokus auf ein Element zu setzen, darf keine unerwartete Funktion auf deiner Webseite auslösen. Stelle sicher, dass Funktionen zum Beispiel nur bei Bestätigung per Enter, Space oder Klick ausgeführt werden.

Löst meine Eingabe Kontextänderungen aus, macht sie die Seite zu einem Graus!

Kurzbeschreibung:

Eine einfache Eingabe in ein Textfeld oder das Klicken von Elementen, wie Checkboxen, darf keine Kontext-Änderung auslösen (etwa eine neue Seite öffnen), wenn dieses Verhalten davor nicht beschrieben wurde oder zu erwarten war.

Halte die Navigation konsistent, damit der User sie wiedererkennt.

Kurzbeschreibung:

Navigations-Mechanismen auf deiner Webseite müssen immer an der gleichen Stelle zu finden sein, um eine nachvollziehbare Navigation über alle Seiten hinweg sicherzustellen.

Wer "A" sagt, muss auch immer "A" sagen!

Kurzbeschreibung:

Die Beschriftungen deiner Navigations- oder Interaktionselemente, wie Buttons, Icons, Formularfelder, müssen identisch sein, wenn sie die selbe Funktion haben.

Unterstützung und Support gehören immer an denselben Ort

Kurzbeschreibung:

Wenn du Hilfsmechanismen, wie Kontaktdaten oder einen Chatbot auf mehreren Seiten anbietest, müssen diese immer an der selben Stelle zu finden und zu erreichen sein.

Um Fehler wirklich zu verstehen, sollte ich Texte dazu sehen!

Kurzbeschreibung:

Fehlermeldungen bei Formularen müssen als solche erkennbar sein. Dafür müssen betroffene Felder gekennzeichnet und mit einer aussagekräftigen Beschreibung des Fehlers ergänzt werden.

Gib Formularfeldern Beschreibungen oder Namen, um sie als User zu erahnen.

Kurzbeschreibung:

Formularfelder (auch Checkboxen) benötigen sinnvolle Beschriftungen (Labels). Diese sollten dauerhaft angezeigt werden, weshalb Platzhalter nicht ausreichend sind.

Zeigst du mir im Formular Fehler an, häng ein Lösungshinweis mit dran.

Kurzbeschreibung:

Wenn du mir einen Fehler auf deiner Webseite anzeigst, schreibe den Fehlertext so, dass ich auch weiß, was ich tun muss, um den Fehler zu beheben.

Bestätigen, rückgängig machen und korrigieren, sollte bei wichtigen Daten funktionieren.

Kurzbeschreibung:

Beim Ausführen einer Transaktion oder einer Interaktion, die negative Konsequenzen haben kann, muss es eine Möglichkeit geben, die Aktion vor dem Absenden zu prüfen oder sie im Nachgang rückgängig zu machen.

Hab ich’s schon mal eingetragen, musst du's mich nicht noch mal fragen.

Kurzbeschreibung:

Ich sollte Informationen nur einmal eingeben müssen. Die Webseite sollte die Informationen dann beim nächsten Mal von allein eintragen oder Vorschläge machen. Ausnahme: Die Eingabe ist sicherheitsrelevant.

Log-in bitte nur ohne Denken, um meine Zeit nicht zu verschenken

Kurzbeschreibung:

Wenn User*innen die Identität bestätigen müssen, darf dafür kein kognitiver Funktionstest nötig sein. Dafür darf das Einfügen oder Befüllen durch einen Passwort-Manager nicht blockiert werden.

Stellst du programmierte Komponenten bereit, sorge für eine gute Bedienbarkeit.

Kurzbeschreibung:

Native HTML-Elemente bringen meist alles mit, um von assistiven Technologien verstanden zu werden. Entwickelst du selbst, musst du dafür sorgen, dass die Elemente für den Accessibility-Tree zugänglich sind.

Willst du ein reines Gewissen, lass mich von Veränderungen automatisch wissen!

Kurzbeschreibung:

Wenn du Statusnachrichten oder Benachrichtigungen einblendest, müssen diese auch assistiven Technologien automatisch mitgeteilt werden.

HINWEIS: Verantwortlich für den Inhalt dieser Seite ist die ieQ-systems SHK GmbH & Co. KG