HPE Barrierefreiheitsassistentv1.0

Barrierefreiheit für www.hpe.de

Ein Embed-Widget, das Website-Besuchern Barrierefreiheits-Optionen bietet – als zweiter Button direkt über dem bestehenden HPE-Chatbot.

6 Barrierefreiheits-Funktionen

🔤

Schriftgröße

Text größer oder kleiner anzeigen (A+ / A−)

Hochkontrast

Maximaler Kontrast für bessere Lesbarkeit

T

Lesbare Schrift

Klare serifenlose Schrift aktivieren

Animationen

Bewegungen und Übergänge deaktivieren

Großer Cursor

Mauszeiger für bessere Sichtbarkeit

🔗

Links hervorheben

Alle Links deutlich markieren

Technische Highlights

CSS-Isolation

!important auf alle Regeln, universeller Reset zuerst – kein CSS der Host-Seite kann das Widget überschreiben.

Base-URL-Fix

script.src.split('?')[0] entfernt Cache-Buster vor der API-URL-Ableitung – verhindert stille Fehler.

CORS-Middleware

Vor allen Routen registriert – Widget kann von jeder Domain aus auf die API zugreifen.

State-Persistenz

localStorage speichert Einstellungen – Barrierefreiheits-Präferenzen bleiben über Seitenreloads erhalten.

WCAG AA konform

Tastatur-Navigation, ARIA-Labels, Fokus-Indikatoren – das Widget selbst ist barrierefrei.

Analytics-Tracking

Jede Aktion wird anonym erfasst – welche Funktionen werden wie oft genutzt?

Button-Stapelung auf hpe.de

bottom: 96px – A11y-Button (neu)
💬
bottom: 24px – Chat-Button (bestehend)

Beide Buttons: right: 10px – exakt bündig ausgerichtet