Accessibility
Kelp has a handful of built-in accessibility features.
Focus Styles
Kelp automatically applies consistent focus styles to focusable elements.
You can adjust them with a handful of CSS variables applied to the kelp.effects cascade layer.
@layer kelp.effects {
/* Light Theme (default) */
:where(:root),
.kelp-theme-light {
--focus-ring-color: var(--color-blue-50);
--focus-ring-style: solid;
--focus-ring-width: var(--size-6xs);
--focus-ring-offset: var(--size-6xs);
}
/* Dark Theme */
.kelp-theme-dark {
--focus-ring-color: var(--color-blue-60);
}
}Reduced Motion
Kelp automatically disables motion effects when the user has the prefers-reduced-motion setting enabled in their OS.
If your effect is CSS-driven, you don’t need to do anything to respect this setting. It happens automatically as long as the /css/utilities/accessibility.css class is included in your stylesheet (its automatically included in the main kelp.css file).
/**
* Remove all animations and transitions for people that prefer not to see them
*/
@media (prefers-reduced-motion: reduce) {
*, :after, :before {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}