以无障碍的方式隐藏屏幕上的内容。
视觉上隐藏内容,同时为辅助技术保留它。
从命令行安装组件。
npm install @radix-ui/react-visually-hidden
导入组件。
import { VisuallyHidden } from "radix-ui"; export default () => <VisuallyHidden.Root />;
使用视觉隐藏基元。
import { VisuallyHidden } from "radix-ui"; import { GearIcon } from "@radix-ui/react-icons"; export default () => ( <button> <GearIcon /> <VisuallyHidden.Root>Settings</VisuallyHidden.Root> </button> );
放入此组件中的任何内容都将从屏幕上隐藏,但会被屏幕阅读器朗读出来。
asChild
布尔值
false
在某些情况下,这作为使用 aria-label 或 aria-labelledby 进行传统标记的替代方案非常有用。
aria-label
aria-labelledby