視覚的に非表示

アクセシブルな方法で画面からコンテンツを隠します。

• 補助技術のために保持しながら、コンテンツを視覚的に隠します。

構成

コンポーネントをインポートします。

<script setup lang="ts">
import { VisuallyHidden } from 'radix-vue'
</script>

<template>
  <VisuallyHidden>
    <slot />
  </VisuallyHidden>
</template>

基本例

視覚的に非表示のプリミティブを使用します。

<script setup lang="ts">
import { VisuallyHidden } from 'radix-vue'
import { GearIcon } from '@radix-icons/vue'
</script>

<template>
  <button>
    <GearIcon />
    <VisuallyHidden>Settings</VisuallyHidden>
  </button>
</template>

APIリファレンス

ルート

このコンポーネント内に配置したものはすべて画面からは隠されますが、スクリーンリーダーによって読み上げられます。

プロパティ	デフォルト	タイプ
as	span	string | Component このコンポーネントがレンダリングする要素またはコンポーネント。`asChild` で上書きできます。
asChild	false	boolean 子として渡された要素のデフォルトのレンダリング要素を変更し、そのプロパティと動作をマージします。 詳細はコンポジションガイドをご覧ください。

アクセシビリティ

これは、従来の`aria-label`または`aria-labelledby`によるラベル付けに代わるものとして、特定のシナリオで役立ちます。