スクリーンリーダー テキストプレビューとは？
スクリーンリーダーテキストプレビューは、支援技術がHTMLコンテンツをどのように読み上げるかを表示します。各要素のアクセシブルな名前、ロール、読み上げ順序を示すので、実際のユーザーがつまずく前にラベルの欠落、崩れた見出し構造、ARIAの問題を見つけられます。
スクリーンリーダーがアクセシビリティツリーを組み立てるのと同じ要領で HTML を解析します。視覚レイアウトを取り除き、aria-label や aria-labelledby を解決し、img の alt を拾って、結果を線形の読み上げ順序に平坦化します。Issues パネルは、アクセシブル名のないリンク、見出し階層の飛び、alt のない画像、ラベルのないフォーム要素を指摘します。
使い方
- HTMLコンテンツを貼り付けるか、分析するURLを入力します。
- 線形化された読み上げ順序と要素のアクセシビリティツリーを確認します。
- 指摘された問題を修正し、読み上げフローが明確になるまで再テストします。
使用するタイミング
- WCAG AA 監査を通す予定のランディングページを公開する前に。
- NVDA や VoiceOver のユーザーから「ナビが分かりにくい」と報告が来たとき。
- サードパーティ製ウィジェットの HTML を更新後にチェックして、アクセシビリティ退行を検出するとき。
結果
開発者がナビゲーションメニューを貼り付けると、3つのリンクにアクセシブルな名前がなく、見出しの順序がh1からh4に飛んでいることが判明し、スクリーンリーダーのユーザーに混乱を引き起こす問題が明らかになります。
よくある質問
- これで本物のスクリーンリーダー検証は不要になりますか？
- なりません。NVDA・JAWS・VoiceOver はライブ領域・表ヘッダ・動的コンテンツの読み上げ方にそれぞれクセがあります。このツールで明らかな問題（ラベル不足、見出し階層の崩れ）を先に潰しておくと、実機検証の効率が大きく上がります。
- 装飾用のアイコンが「問題あり」と表示されるのはなぜ？
- スクリーンリーダーはデフォルトで img をすべて読みます。純粋に装飾なら alt=""（空文字）と aria-hidden="true" を付けるとツールが読み上げ順序からスキップします。alt="アイコン" や alt="装飾" は付けないほうがマシです。
- 正しい見出し階層とは？
- 1 ページに h1 は 1 つだけで、下方向に階層を飛ばしてはいけません（h2 のあとに h4 はだめ）。戻るのは大丈夫です。スクリーンリーダーユーザーは見出し間をジャンプして移動するため、階層が壊れていると迷路のように感じます。
- すべてのインタラクティブ要素に aria-label が必要ですか？
- 必要ありません。可視テキストのあるボタンには不要で、その可視テキストが自動的にアクセシブル名になります。可視テキストがない（アイコンのみ）場合や、可視テキストが説明的でない（「もっと見る」が並ぶ場合）にだけ aria-label を補います。
- ページ全体を貼り付けても大丈夫ですか？
- 大丈夫です。HTML ソース全体を貼ってください。ツールは script・style・meta を無視し、body に集中します。巨大なページの場合は、セクションごとに分けて確認すると問題リストが読みやすくなります。