Accessibility Settings Onboarding Block for Svelte

High contrast swaps the sample to solid foreground with heavier borders. Reduce motion removes the pulse on its status dot. Large text raises the heading, the paragraph and the buttons by a size. Keyboard hints reveal a key on each button. Screen-reader hints reveal the spoken label of each button as a caption. The sample's box has a minimum height that holds the largest state, so nothing below it moves.

No. The note under the sample says it is a preview only, and the only element that reads the switches is the sample. In your app you would apply the real settings after Apply, usually as attributes or classes on the document root, and keep them in the account.

The sample's dot also has motion-reduce:animate-none, so it is still when your system asks for less motion, whatever the switch says. The block's own entrances respect the same setting.

Each switch is named by its title and described by its line (aria-labelledby and aria-describedby), so you hear “High contrast, switch, off, Solid black and white, with heavier borders”. The sample is a picture, so it is hidden from assistive technology; the status line says how many settings are on.

The switches live in the page and Apply only says it applied in this demo. In your app save the five flags to the account where apply says so and read them when the app loads. Starting from the visitor's system preferences (prefers-contrast, prefers-reduced-motion) is a good first default.

The sample comes first, at a shorter height, then the five switches; Apply pins to the foot of the screen with Skip for now beside it. The status line under the switches reserves its lines.