About this block

A11y Preferences Panel is the user facing accessibility settings surface for the Acme workspace. A text size card offers four sizes as pill buttons with a live sample line rendered at the selected size, then three ruled cards group the switches: Vision (high contrast, reduce transparency, always underline links), Motion (reduce motion, pause media previews), and Screen reader and keyboard (focus outlines, verbose announcements). A save action closes the panel.

Every toggle lives in one typed record keyed by a string union, so adding a preference is one data row and state stays exhaustive. Each switch pairs a Label with a helper line, and the sample line renders the actual class the selector controls rather than a mock.

When to use

Reach for this block as the Accessibility page inside your settings area, wired to the user preferences API. Persist choices per account and apply them on every device at sign in.

A natural flow around it on an Application Pro page:

Before

• Appearance settings

After

• Keyboard nav guide
• Contrast checker card

What you can display

One strong use is the account level accessibility preferences page. Other preference panel shapes:

• Reading preferences. Font family, line height, and paragraph spacing controls for long form content.
• Notification sensitivity. Flash, sound, and badge toggles for users who find alerts overwhelming.
• Per device overrides. The same toggles scoped to the current device instead of the whole account.

Tip: default motion and contrast to the OS setting; users who set it there expect apps to respect it without flipping a second toggle.