data/primitives/docs/utilities/accessible-icon.mdx
<Description>Makes icons accessible by adding a label.</Description>
<Highlights features={[ "Quickly make any icon accessible by wrapping it and providing a meaningful label.", "No visual difference, but announced correctly by screen readers.", ]} />
Install the component from your command line.
npm install @radix-ui/react-accessible-icon
Import the component.
import { AccessibleIcon } from "radix-ui";
export default () => <AccessibleIcon.Root />;
Contains the icon to make accessible.
<PropsTable data={[ { name: "label", required: true, type: "string", description: ( <span> The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to <Code>alt</Code> text for <Code>img</Code> tags. </span> ), }, ]} />
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.