Häufige Verstöße

Die am häufigsten gefundenen Barrierefreiheitsprobleme und wie man sie behebt.

• Fehlender Alternativtext: Der am häufigsten zitierte Barrierefreiheitsverstoß

  Bilder ohne Alternativtext sind für Screenreader-Nutzer unsichtbar und das mit Abstand am häufigsten zitierte Problem in Klagen zur Web-Barrierefreiheit. Genau so beheben Sie es.

• Fehlende Formularbeschriftungen: Warum Platzhaltertext nicht ausreicht

  Ein Formularfeld ohne programmatisch zugeordnete Beschriftung ist ein Ratespiel für Screenreader-Nutzer, selbst wenn es visuell einwandfrei aussieht. Die Lösung, und warum Platzhaltertext nicht zählt.

• Unzureichender Farbkontrast: Die 4,5:1-Regel erklärt

  Text benötigt ein Mindestkontrastverhältnis zu seinem Hintergrund, um für Menschen mit Sehbehinderung lesbar zu sein. Die genaue Mathematik, häufige Fehlermuster und wie man sie behebt.

• Tastaturunzugängliche Steuerelemente: Warum 'funktioniert mit der Maus' nicht reicht

  Jedes interaktive Steuerelement, das nur auf die Maus reagiert, schließt Tastaturnutzer vollständig aus – einschließlich der meisten Screenreader-Nutzer und vieler Menschen mit motorischen Behinderungen. So testen und beheben Sie es.

• Fehlende Sprung-Navigation: Warum jede Seite einen Bypass-Link braucht

  Ohne eine Möglichkeit, wiederholte Navigation zu überspringen, müssen Tastatur- und Screenreader-Nutzer auf jeder einzelnen Seite dasselbe Menü durchtabben, bevor sie den eigentlichen Inhalt erreichen. So beheben Sie es.

• Leere Links und Schaltflächen: Wenn 'Hier klicken' nicht einmal da ist

  Ein Link oder eine Schaltfläche ohne barrierefreien Text wird einem Screenreader nur als 'Link' oder 'Schaltfläche' angekündigt – ohne sichtbaren Kontext völlig unbenutzbar. So passiert es und so beheben Sie es.

• Fehlende Seitensprache: Die Ein-Attribut-Lösung

  Ohne ein lang-Attribut am html-Element raten Screenreader bei den Ausspracheregeln und liegen oft falsch. Eine Ein-Wort-Lösung mit überproportionaler Wirkung darauf, wie eine Seite tatsächlich klingt.

• Fehlende oder generische Seitentitel

  Eine Seite ohne <title>, oder mit demselben Titel auf jeder Seite, lässt Screenreader-Nutzer und alle mit vielen offenen Browser-Tabs ohne Möglichkeit zurück, Seiten zu unterscheiden. Was einen guten Titel ausmacht.

• Falsche Überschriftenreihenfolge: Warum das Überspringen von Ebenen die Navigation zerstört

  Screenreader-Nutzer navigieren eine Seite oft, indem sie nur zwischen Überschriften springen. Von einer H1 direkt zu einer H3 zu springen oder Überschriften rein wegen ihrer visuellen Größe zu verwenden, zerstört dieses Navigationsmodell.

• Doppelte IDs: Ein kleiner Markup-Fehler mit überproportionalen Folgen

  Ein id-Attribut muss auf einer Seite eindeutig sein. Ist es das nicht, können Beschriftungszuordnungen, ARIA-Referenzen und Seiten-interne Links still und leise auf das falsche Element verweisen.

• Veraltetes präsentationsbezogenes Markup: <center>, <font> und das align-Attribut

  Tags wie <center> und <font> sowie das align-Attribut wurden aus HTML5 entfernt, weil sie Präsentation mit Struktur vermischen. Womit man jedes davon ersetzt.

• Fehlende iframe-Titel: Eingebettete Inhalte benennen

  Ein iframe ohne title-Attribut wird einem Screenreader als unbenannter, unerklärter Bereich angekündigt. So sieht ein guter iframe-Titel aus und warum er wichtig ist.

• Ungültige ARIA-Attribute: Wenn der Versuch zu helfen alles schlimmer macht

  Ein falsch geschriebenes ARIA-Attribut oder ein ungültiger Wert scheitert nicht einfach still – es kann aktiv zerstören, wie assistive Technologie ein Element versteht. So erkennen und beheben Sie es.

• Deaktiviertes Heranzoomen: Warum maximum-scale=1 niemals ausgeliefert werden sollte

  Ein Viewport-Meta-Tag, das Zoomen deaktiviert, schließt jeden aus, der Text vergrößern muss, um ihn zu lesen – eine Barriere ohne legitimen Anwendungsfall im modernen responsiven Design.

• Fehlende Tabellenüberschriften: Warum Datentabellen th brauchen, nicht nur fetten Text

  Eine Datentabelle, in der Überschriften nur fetter oder größerer Text sind – keine echten <th>-Elemente – gibt einem Screenreader-Nutzer keine Möglichkeit zu wissen, zu welcher Spalte oder Zeile eine gegebene Zelle gehört.

• Landmarken- und Bereichsprobleme: Screenreadern eine Karte der Seite geben

  ARIA-Landmarken lassen Screenreader-Nutzer direkt zwischen dem Header, der Navigation, dem Hauptinhalt und der Fußzeile einer Seite springen. Fehlende oder doppelte Landmarken zerstören diese Abkürzung.

• Fehlende Formular-Absende-Schaltflächen

  Ein Formular ohne echtes Absende-Steuerelement zwingt Nutzer zu raten, wie sie es abschließen sollen, oder blockiert Tastatur- und Screenreader-Nutzer vollständig, wenn das Absenden nur über ein maus-ausgelöstes Skript funktioniert.

• Ungruppierte Formularsteuerelemente: Warum zusammengehörige Radiobuttons und Kontrollkästchen ein fieldset brauchen

  Eine Gruppe zusammengehöriger Radiobuttons oder Kontrollkästchen ohne fieldset/legend-Umschließung gibt Screenreader-Nutzern keinen Hinweis darauf, dass die Optionen zusammengehören oder wonach die Gruppe als Ganzes fragt.