Accessible Icon
Makes icons accessible by adding a label.
Features
- Quickly make any icon accessible by wrapping it and providing a meaningful label.
- No visual difference, but announced correctly by screen readers.
Installation
Install the component from your command line.
cargo add radix-leptos-accessible-icon
Anatomy
Import the component.
use leptos::*;
use radix_leptos_accessible_icon::*;
#[component]
fn Anatomy() -> impl IntoView {
view! {
<AccessibleIcon />
}
}
API Reference
Root
Contains the icon to make accessible.
Prop | Type | Default |
---|---|---|
label | MaybeSignal<String> | - |
Accessibility
Most icons or icon systems come with no accessibility built-in. For example, the same visual cross icon may in fact mean "close" or "delete". This component lets you give meaning to icons used throughout your app.
This is built with Visually Hidden.