ユーティリティ

アクセシブルアイコン

ラベルを追加することで、アイコンをアクセシブルにします。

機能

    アイコンをラップして意味のあるラベルを指定することで、簡単にあらゆるアイコンをアクセシブルにします。

    視覚的な違いはありませんが、スクリーンリーダーによって正しく読み上げられます。

インストール

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

npm install @radix-ui/react-accessible-icon

構成要素

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

import * as AccessibleIcon from '@radix-ui/react-accessible-icon';
export default () => <AccessibleIcon.Root />;

APIリファレンス

ルート

アクセシブルにするためのアイコンを含みます。

プロパティデフォルト
label*
文字列
デフォルト値なし

アクセシビリティ

ほとんどのアイコンやアイコンシステムには、アクセシビリティが組み込まれていません。たとえば、同じ視覚的なクロスアイコンは、実際には「閉じる」または「削除」を意味する場合があります。このコンポーネントを使用すると、アプリケーション全体で使用されるアイコンに意味を与えることができます。

これは視覚的に非表示を使用して構築されています。