VisuallyHidden 视觉隐藏

只对屏幕阅读器可见的文字。

import { Star } from 'lucide-react'
import { Button, VisuallyHidden } from '@hina-ui/react'

export default function Demo() {
  return (
    <Button variant="ghost" tone="neutral" iconOnly>
      <Star />
      <VisuallyHidden>收藏这部作品</VisuallyHidden>
    </Button>
  )
}

tsx

用法

import { VisuallyHidden } from '@hina-ui/react'

VisuallyHidden 把内容从画面上移开，但保留在无障碍树中：屏幕阅读器照常读出，视觉上不占位置。

它用于视觉上已经表达清楚、但辅助技术拿不到的信息。最常见的是只有图标的控件——图形对屏幕阅读器没有意义，需要另给一段文字。

当前评分 8.9，满分 10 分

括号内的补充只有屏幕阅读器会读到。

import { Stack, Text, VisuallyHidden } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack gap="sm">
      <Text>
        当前评分 8.9
        <VisuallyHidden>，满分 10 分</VisuallyHidden>
      </Text>
      <Text size="sm" tone="faint">
        括号内的补充只有屏幕阅读器会读到。
      </Text>
    </Stack>
  )
}

tsx

它不是用来藏东西的。真正不需要被感知的内容用 aria-hidden 或者干脆不渲染；把无用信息塞进这里，只会让屏幕阅读器的用户听到更多噪音。

行为

内容被压缩到一像素并裁去可见部分，不占据布局空间，也不影响周围文字的排版。
它不改变焦点行为：内部若有可聚焦元素，仍会进入 tab 序列。

API

内容属性

属性	说明
`children`	只对屏幕阅读器可见的内容