A11y Preferences Panel
Accessibility settings panel with a text size selector, live sample line, and grouped vision, motion, and screen reader switches with helper text.
Accessibility settings panel with a text size selector, live sample line, and grouped vision, motion, and screen reader switches with helper text.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the account level accessibility preferences page. Other preference panel shapes:
Tip: default motion and contrast to the OS setting; users who set it there expect apps to respect it without flipping a second toggle.