Barrieren-Brecher Bary

Flexibles Tool für Barrierefreiheit

Ab dem 28. Juni 2025 ist durch das Barrierefreiheitsstärkungsgesetz Barrierefreiheit auf vielen Webseiten verpflichtend einzuhalten.

Barrieren-Brecher Bary bietet dir eine einfache und umfangreiche Möglichkeit, Barrierefreiheit auf Webseiten zu implementieren. Da das Tool ausschließlich mit JavaScript und CSS geschrieben ist, funktioniert es ohne Einschränkung auf jeder Webseite.

Features

Das Tool erstellt ein Overlay, das über einen Button geöffnet wird und folgende togglebare Funktionen bietet:

Schrifteinstellungen

  • Schriftgrößen erhöhen
  • Zeichen-Abstand vergrößern
  • Zeilen-Abstand vergrößern
  • Schriftart ändern auf eine leicht lesbare Schriftart oder eine speziell für Legastheniker entwickelte Schriftart

Farbeinstellungen

  • Blaufilter
  • Farbänderung zu Graustufen
  • Erhöhte/Verringerte Sättigung
  • Kontrast Dunkelmodus/Heller Modus
  • Individuelles Farbschema

Inhaltseinstellungen

  • Großer Mauszeiger
  • Lese-Führung Linie für Zeilenführung/Bereich hervorheben für bessere Fokussierung
  • Links hervorheben
  • Tastatur Helfer, zeigt einen roten Rahmen um das derzeit fokussierte Element
  • Webseite vorlesen (nur Desktop)
  • Animationen pausieren (konfigurierbar)
  • Bilder ausblenden

Zusätzliche Features

  • Auflistung der Struktur der Seite nach Überschriften, Links oder Inhalten
  • Einstellungen zurücksetzen

Automatische Funktionen

Das Tool bietet zusätzlich einige Funktionen, die immer aktiv sind:

  • Titel und Aria-Label für Input, Select und Textareas automatisch setzen, wenn kein Label existiert
  • Navigation durch Drücken der Tabulatortaste zwischen Elementen
  • Tastenkombinationen zum Sprung auf definierte Elemente
  • HTML-Attribute an Elemente vergeben (z.B. Aria-Attribute, Tabindex)
  • Automatischer Sprung zu ausgewähltem Inhalt bei Klick auf bestimmte Elemente
  • Leertaste zum Klicken verwenden
  • Öffnen und Schließen von Containern bei Klick auf Auslöser
  • Jede Funktion aus Schrift-, Farb- und Inhaltseinstellungen setzt bei Aktivierung eine CSS-Klasse im HTML-Tag