AccessibilitySettings
AccessibilityProvider applies the reader settings to the page and stores them on the device; useAccessibility reads them, for example to skip an animation. AccessibilitySettings is the ready settings section, and takes extra rows such as a ThemeToggle.
- AccessibilityProvider
- AccessibilitySettings
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, AccessibilitySettings
Makes the whole interface larger, layout included.
Stops transitions and animations.
A thicker outline around the element the keyboard is on.
Links stand out by more than colour.
Puts every setting in this section back.
Sample text with a link in it.
Motion: full.
Dark theme, AccessibilitySettings
Makes the whole interface larger, layout included.
Stops transitions and animations.
A thicker outline around the element the keyboard is on.
Links stand out by more than colour.
Puts every setting in this section back.
Sample text with a link in it.
Motion: full.
High contrast theme, AccessibilitySettings
Makes the whole interface larger, layout included.
Stops transitions and animations.
A thicker outline around the element the keyboard is on.
Links stand out by more than colour.
Puts every setting in this section back.
Sample text with a link in it.
Motion: full.
UsageLink to the section Usage
import { AccessibilityProvider, AccessibilitySettings } from '@skribly/ui/theme'<AccessibilityProvider>
<AccessibilitySettings labels={labels}>
<ThemeToggle label="Theme" options={options} />
</AccessibilitySettings>
</AccessibilityProvider>
const { motionReduced } = useAccessibility()Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Text size is a spin button: arrow keys, Page Up, Page Down, Home and End step it, and the minus and plus buttons give pointer users 44px targets.
- Each setting is a switch named by its title and described by its hint.
- A system request for reduced motion always wins and locks that switch on.
- Restore defaults is confirmed through a polite live region.
This demo runs through axe in all three themes on every test run. See what the tests check.