視覚的に隠す

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

機能

コンテンツを視覚的に隠しながら、支援技術のためにそれを保持します。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-visually-hidden

構成

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

import * as VisuallyHidden from '@radix-ui/react-visually-hidden';

export default () => <VisuallyHidden.Root />;

基本例

視覚的に隠すプリミティブを使用します。

import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
import { GearIcon } from '@radix-ui/react-icons';

export default () => (
  <button>
    <GearIcon />
    <VisuallyHidden.Root>Settings</VisuallyHidden.Root>
  </button>
);

API リファレンス

ルート

このコンポーネント内に入れたものはすべて画面から非表示になりますが、スクリーンリーダーによってアナウンスされます。

プロパティ	型	デフォルト
`asChild`	`真偽値`	`false`

アクセシビリティ

これは、aria-label または aria-labelledby を使用した従来のラベル付けの代替として、特定のシナリオで役立ちます。

前スロット

GitHub でこのページを編集します。

概要

ガイド

コンポーネント

ユーティリティ

機能

インストール

構成

基本例

API リファレンス

ルート

アクセシビリティ