kaze風
VisuallyHidden
画面には出さず、読み上げソフトにだけ伝える文字を包む。
プレビュー
ボタンの名前は画面に見えませんが、読み上げでは「クイック実行」と伝わります。
使いどころ
使う場面
- 画面には出さず、読み上げソフトにだけ伝える文字を包む（アイコンだけのボタンの名前、グラフの要約）
- フォーカスしたときだけ見せたいスキップリンク（「本文へ移動」）は focusable を付ける。Tab で最初に届く位置に置く
- <a> など自分で用意した要素に当てたいときは asChild を使う
使わない場面
- 見えている文字をわざわざ隠して重複させること。見える文字があるなら、それを name に使う
- フォーカスできる要素を focusable なしで隠すこと。キーボードで操作する人には、フォーカスした先が見えなくなる
- 内容を隠して見せないための手段。display:none のような非表示とは違い、読み上げでは読まれる
使い方
<VisuallyHidden>検索</VisuallyHidden>
<VisuallyHidden asChild focusable>
<a href="#main">本文へ移動</a>
</VisuallyHidden>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
asChild | boolean | false | 子要素にスタイルを委ねる |
focusable | boolean | false | フォーカスされたときだけ画面に表示する（スキップリンク用） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | focusable のとき、フォーカスが届くと画面の左上に表示される |
| Enter | 中のリンクを開く（スキップリンクなら本文へ移動する） |
アクセシビリティ
- sr-only クラスを使うので、見えなくても読み上げられる。中の文字は支援技術に通常どおり届く
- focusable はフォーカスされたときに、文字色・背景・小さな角丸・フォーカスリングで控えめに表示される。フォーカスが外れると再び隠れる
- アイコンだけのボタンには VisuallyHidden で名前を入れるか、aria-label を使う。どちらか一方にする
文言
- 読み上げられる文として自然に書く（「検索」「本文へ移動」）。画面の文言と同じ語を使う