Barrierefreiheits-Widget für persönliche Lesehilfen

Der Öffner „Lesehilfen“ erscheint standardmäßig unten rechts auf jeder eingebundenen Seite. Mit Alt + A öffnest und schließt du das Menü auch per Tastatur, Esc schließt es. Das Menü startet im Reiter „Anpassen“.

• ProfileSechs Profile für typische Bedürfnisse, einzeln oder kombiniert.
• AnpassenStartansicht27 Kacheln in drei Gruppen und die Feineinstellungen.
• SeiteÜberschriften der Seite, Vorlesen markierter Texte und dein Browser-Assistent.

Jeder Klick auf eine Kachel schaltet eine Stufe weiter; nach der letzten Stufe ist sie wieder aus. Kleine Balken zeigen die aktuelle Stufe, Screenreader hören den Zustand, zum Beispiel „Stufe 2 von 3“. Kacheln wie Kontrast oder Mauszeiger wechseln zwischen benannten Varianten.

Ein Profil schaltet mehrere passende Einstellungen auf einmal ein. Du kannst Profile kombinieren und danach jede Kachel einzeln anpassen; der Schalter zeigt, ob alle Einstellungen eines Profils noch aktiv sind.

• Sehbeeinträchtigung: Größere Schrift, hoher Kontrast und deutlicher Fokus
• Legasthenie: Lesbare Schrift, mehr Zeilen- und Zeichenabstand, Leselinie
• ADHS: Lesemaske, ruhige Hintergründe, keine Animationen
• Epilepsie und Anfälle: Animationen stoppen, Medien anhalten, ruhiges Scrollen
• Motorische Einschränkungen: Deutlicher Fokus, Sprunglink, Schaltflächen und Felder hervorgehoben
• Weniger Farbe: Gedämpfte Farben, Links klar erkennbar

Mit „Systemeinstellungen übernehmen“ nutzt das Widget reduzierte Bewegung und erhöhten Kontrast aus dem Betriebssystem und reagiert auf Änderungen dieser Einstellungen.

Die Feineinstellungen am Ende des Reiters „Anpassen“ enthalten sieben Regler: Schriftgröße, Zeilenabstand, Buchstabenabstand, Wortabstand, Absatzabstand, Farbsättigung und Helligkeit. Dazu kommen die Textausrichtung und der Schalter „Mehr Textabstand“ für Buchstaben-, Wort- und Zeilenabstand nach WCAG 1.4.12.

Besuchende können dort auch die Darstellung des Menüs für sich ändern: das Menüdesign hell, dunkel oder automatisch, das Symbol und die Position des Öffners.

Der Reiter „Seite“ zeigt alle Überschriften der aktuellen Seite; ein Klick springt direkt zum Abschnitt. Markierten Text liest der Browser mit einer lokalen Stimme vor, wenn er diese Funktion unterstützt.

„Alles zurücksetzen“ stellt die ursprüngliche Anzeige wieder her. Die Auswahl wird nur im Browser der Besuchenden gespeichert. Bereits vorhandene Einstellungen der Website werden beim Entfernen des Widgets wiederhergestellt.

Das Menü erkennt Deutsch, Englisch und Spanisch 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.

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.

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; es öffnet dafür den Reiter „Seite“. 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.

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.

Für WordPress und WooCommerce gibt es ein Plugin. In allen anderen Systemen fügst du den Einbaucode einmal im gemeinsamen Layout ein. Wähle dein System für die passende Schritt-für-Schritt-Anleitung.

• WordPress, Plugin verfügbar, Einbauanleitung
• WooCommerce, Plugin verfügbar, Einbauanleitung
• Shopify, Einbauanleitung
• Webflow, Einbauanleitung
• Wix, Einbauanleitung
• Squarespace, Einbauanleitung
• Next.js / React, Einbauanleitung
• HTML / eigenes CMS, Einbauanleitung
• TYPO3, Einbauanleitung
• Contao, Einbauanleitung
• Joomla, Einbauanleitung
• Drupal, Einbauanleitung
• Ghost, Einbauanleitung
• Shopware 6, Einbauanleitung
• PrestaShop, Einbauanleitung
• Framer, Einbauanleitung
• HubSpot CMS, Einbauanleitung
• Google Tag Manager, Einbauanleitung