通过添加标签使图标可访问。
通过将任何图标包装并提供有意义的标签,快速使其可访问。
没有视觉差异,但被屏幕阅读器正确宣布。
从命令行安装组件。
npm install @radix-ui/react-accessible-icon
导入组件。
import { AccessibleIcon } from "radix-ui";
export default () => <AccessibleIcon.Root />;
包含要使其可访问的图标。
Prop | Type | Default |
---|---|---|
label* | string |
大多数图标或图标系统没有内置的可访问性。例如,相同的视觉 交叉 图标实际上可能表示 “关闭” 或 “删除”。该组件允许您为应用程序中使用的图标赋予意义。
这是使用 视觉隐藏 构建的。