interface DemoWebsiteContentProps { fontSize: number // Die folgenden Props werden hier nicht direkt für das Styling verwendet, // sondern dienen dazu, die Daten an das Widget zu übergeben, das dann // globale CSS-Klassen auf das HTML-Element anwendet. removeImages: boolean grayscale: boolean // colorblindMode wurde entfernt disableAnimations: boolean dyslexiaFont: boolean highlightLinks: boolean invertColors: boolean highlightHeadings: boolean // readingMode wurde entfernt contrastMode: "normal" | "dark" | "light" saturationMode: "normal" | "low" | "high" contentScaling: number // lineHeight wurde entfernt letterSpacing: number // New props blueFilter: boolean muteSounds: boolean } export function DemoWebsiteContent({ fontSize }: DemoWebsiteContentProps) { // Die Schriftgröße wird NICHT mehr direkt als Inline-Style angewendet. // Sie wird stattdessen global über das -Element in widget.js gesteuert. // Die `fontSize` Prop ist weiterhin notwendig, um die Einstellung im Konfigurator zu speichern // und an das JS-Skript zu übergeben. return (

Willkommen auf unserer Demo-Website

Dies ist eine einfache Demo-Seite, um die Funktionen des Barrierefreiheits-Widgets zu veranschaulichen. Beachten Sie, wie sich die Inhalte basieren auf Ihren Einstellungen im Konfigurator ändern. Wir haben hier verschiedene Elemente eingefügt, um die Auswirkungen der Barrierefreiheitsoptionen zu demonstrieren.

Abstrakte Landschaft mit Bergen und See

Ein Bild mit einem beschreibenden Alt-Text. Wenn die Option "Bilder entfernen" aktiviert ist, sollte dieses Bild ausgeblendet werden.

Interaktive Elemente

Testen Sie die Tastatur-Navigation und die Fokus-Hervorhebung mit diesen Elementen:

Ein interaktiver Link

Wichtige Informationen & Textbeispiel

Dieser Textblock dient dazu, die Auswirkungen der Kontrast- und Schriftgrößenanpassungen zu demonstrieren. Achten Sie darauf, wie sich die Lesbarkeit verbessert oder verändert, wenn Sie die entsprechenden Optionen im Widget aktivieren. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Formularbeispiel

) }