SIEHE BILDER
Ich möchte auf meiner Webseite einen barrierefreien Funktionsbutton (Accessibility Widget) einbauen, der ein Menü öffnet, mit dem Nutzer ihre Darstellungselbst einstellen können.
Das Menü soll folgende auswählbare Einstellungen bieten (wie im angehängten Bild):
• Textgröße anpassen (vergrößern/verkleinern)
• Hoher Kontrast (z. B. Schwarz-Weiß)
• Farben invertieren
• Dyslexie-Schriftart aktivieren
• Zeilenabstand & Buchstabenabstand anpassen
• Bilder überspringen / Alt-Text anzeigen
• Lese-Modus (Vorlesefunktion)
Der Button soll:
• Tastaturbedienbar sein (Tab-Taste, Enter)
• Einen aussagekräftigen aria-label haben (z. B. “Barrierefreiheits-Einstellungen”)
• Sichtbaren Fokus-Indikator haben
• Responsive arbeiten (auch auf Mobile nutzbar)
• Die Einstellungen per JavaScript + CSS-Variablen umsetzen (ohne Overlay-Plugins)
Meine Fragen:
-
Wie ist der bestmögliche HTML/ARIA-Code für einen barrierefreien Toggle-Button + Dropdown-Menü?
-
Gibt es eine lightweight JavaScript-Lösung (vanilla JS, kein schweres Plugin), die ich einfach per CDN einbinden kann?
-
Wie speichere ich die Einstellungen dauerhaft (LocalStorage), damit sie beim nächsten Besuch erhalten bleiben?
-
Welche CSS-Klassen/Variablen brauche ich für die verschiedenen Modi (Kontrast, Schriftgröße etc.)?
