Barrierefreiheits-Widget für persönliche Lesehilfen

Text, Farben und Orientierung anpassen

Schriftgröße, Zeilen-, Buchstaben-, Wort- und Absatzabstand lassen sich einzeln einstellen. Dazu kommen Farbsättigung, Helligkeit, sechs Kontrastdarstellungen, Textausrichtung, klare oder nichtproportionale Schrift, größere Mauszeiger und eine begrenzte Textbreite.

Leselinie und Lesemaske unterstützen die Orientierung. Links, Überschriften, Schaltflächen, Formularfelder und Tastaturfokus können hervorgehoben werden. Eine Seitenübersicht führt zu vorhandenen Überschriften; ein optionaler Sprunglink zum vorhandenen Hauptinhalt. Markierten Text kann der Browser vorlesen, wenn er diese Funktion unterstützt.

Schnellprofile und Systemeinstellungen

Die Profile Lesen, Konzentration, Größer und kontrastreicher, Tastatur, Weniger Bewegung und Weniger Farbe kombinieren mehrere Einstellungen. Du kannst sie anschließend einzeln verändern. Wenn gewünscht, übernimmt das Widget reduzierte Bewegung und erhöhten Kontrast aus dem Betriebssystem und reagiert auf Änderungen dieser Einstellungen.

Animationen und automatische Medien können pausiert, Medien stummgeschaltet sowie Bilder, dekorative Bilder oder Hintergrundbilder ausgeblendet werden. Alle Änderungen lassen sich zurücksetzen. Bereits vorhandene Einstellungen der Website werden beim Entfernen des Widgets wiederhergestellt.

Deutsch, Englisch und dein Design

Das Menü erkennt Deutsch und Englisch anhand der Seitensprache und erlaubt eine eigene Sprachwahl. Fünf Designvorlagen und eine Live-Vorschau helfen dir, das Widget an deine Marke anzupassen. Gestalte Farben, Schrift, Menübreite, Ecken und Schatten. Wähle ein Symbol oder einen beschrifteten Öffner und eigene Menütexte. Vier Positionen sowie getrennte Randabstände für Desktop und Smartphone schaffen Platz für Navigation und Cookie-Banner.

Speichere dein Design im Projekt, damit alle eingebundenen Seiten es automatisch übernehmen. Im WordPress-Plugin kannst du auch lokal gestalten. Alle Designoptionen sind im Free-Tarif verfügbar; dort bleibt der Accessonaut-Markenlink sichtbar. Besuchende können ihre persönlichen Leseeinstellungen im eigenen Browser speichern. Diese haben Vorrang vor Designvorgaben. Unleserliche Farbkombinationen werden für die Darstellung angepasst.

Freigegebene Bildbeschreibungen ergänzen

Scans erfassen fehlende Bildbeschreibungen im Arbeitsbereich. Du prüfst Vorschläge oder schreibst eigene Texte und gibst sie ausdrücklich frei. Erst wenn du die Veröffentlichung einschaltest, ergänzt das Widget passende fehlende alt-Attribute auf der registrierten Website. Wenn du zusätzlich die gesonderte Automatik im Arbeitsbereich aktivierst, können dort ausdrücklich als ungeprüft markierte neue Vorschläge ohne Einzelfreigabe angewendet werden; diese Einstellung ist standardmäßig aus.

Seite, Fundstelle und Bildquelle müssen übereinstimmen. Vorhandene alt-Attribute werden einschließlich leerer Beschreibungen für dekorative Bilder erhalten. Eine nachträgliche Ergänzung im Browser ersetzt die dauerhafte Korrektur im CMS nicht und kann anders wirken als ein bereits im HTML vorhandener Text.

Gespeicherte Befunde direkt auf deiner Website sehen

Kontoinhaber und Administratoren können im Arbeitsbereich eine persönliche Freigabe für den Browser-Assistenten erstellen. Auf der Website startest du ihn ausdrücklich im Widget. Er zeigt die gespeicherten Befunde des letzten abgeschlossenen Scans für die aktuelle Seite und hebt noch auffindbare Elemente hervor.

Die einmalige Freigabe gilt zehn Minuten und nur für die exakt registrierte Origin, also Protokoll, Hostname und Port. Die anschließende Sitzung läuft höchstens 30 Minuten und bleibt im Arbeitsspeicher des geöffneten Tabs. Private Befunde erscheinen nicht in der öffentlichen Widget-Konfiguration. Geänderte oder entfernte Elemente können nicht mehr auffindbar sein; starte bei Bedarf einen neuen Scan.

Barrieren an der Quelle beheben

Das Widget bietet persönliche Darstellungsoptionen und macht weder alle Inhalte noch alle Abläufe automatisch barrierefrei. Fehlerhafte Formulare, unverständliche Texte, unzugängliche Dokumente und fehlende Bedienelemente müssen im Quellcode beziehungsweise im Original behoben werden. Ergänze automatische Scans durch manuelle Tastatur- und Screenreader-Tests.

Praxiswissen für deine nächsten Schritte

• Accessibility-Widgets: Sinnvolle Hilfe mit klaren Grenzen

  Was ein Barrierefreiheitsmenü leisten kann, welche Probleme an der Quelle gelöst werden müssen und wie du die Einbindung praktisch prüfst.

• Tastaturnavigation testen: Ein Rundgang ohne Maus

  Fokus, Reihenfolge, Dialoge und Formulare praktisch prüfen. Mit einer einfachen Anleitung für deinen ersten Tastaturtest.

• Kontraste und Farben: Ein Prüfablauf für dein Webdesign

  Text, Buttons und Fehlermeldungen verständlich gestalten: WCAG-Kontraste richtig messen und Farben im gesamten Design prüfen.