Accessibility is a top priority for Kumo Svelte. Components built on Bits UI handle many accessibility details including ARIA attributes, role attributes, pointer interactions, keyboard navigation, and focus management. The goal is to provide an accessible user experience out of the box, with intuitive APIs for configuration.
This page highlights some of the key accessibility features of Kumo Svelte, as well as some ways you will need to augment the library, in order to ensure that your application is accessible to everyone.
Keyboard Navigation
Kumo Svelte components adhere to the WAI-ARIA Authoring Practices to provide basic keyboard accessibility out of the box. This is critical for users who have difficulty using a pointer device, but it’s also important for users who prefer navigating with a keyboard or other input mode.
Many components provide support for arrow keys, alphanumeric keys, Home, End, Enter, and Esc.
Focus Management
Kumo Svelte components manage focus automatically following a user interaction. For overlays and composite widgets, Bits UI primitives provide the underlying focus behavior that Kumo Svelte styles and composes.
While Kumo Svelte components manage focus, it’s the developer’s responsibility to visually indicate focus. This is typically handled by styling the :focus or :focus-visible CSS pseudo-classes. WCAG provides guidelines on focus appearance.
Color Contrast
When styling elements, meet current WCAG contrast requirements between foreground elements and their backgrounds. APCA can be a useful additional contrast analysis tool.
Accessible Labels
Kumo Svelte provides components like Field, Input, and Checkbox to automatically associate form controls. Additionally, you can use the native HTML <label> element to provide context to corresponding inputs.
Most applications will present custom controls that require accessible names provided by markup features such as alt, aria-label or aria-labelledby. WAI-ARIA provides guidelines on providing accessible names to custom controls.
Testing
Kumo Svelte components, backed by Bits UI primitives where appropriate, should be tested in your application across browsers, devices, platforms, screen readers, and environments to ensure accessibility across different user contexts.
For more detailed information about the accessibility primitives Kumo Svelte builds on, see the Bits UI documentation.