アクセシビリティツリーを読んでARIAをデバッグする

ブラウザーはDOMからアクセシビリティツリーを構築します。これは、スクリーンリーダーが実際に読み上げる、必要な情報に絞った構造です。

ツリーを見ると、実際の状態がわかります。自分が期待したマークアップの結果ではなく、要素の本当の名前、role、stateを確認できます。

ChromeでDevToolsを開き、ElementsパネルのAccessibilityペインを選択します。任意のノードを選ぶと、計算済みのa11yデータを確認できます。

ペインには要素の計算済みのroleとname、およびstateが表示されます。これは支援技術が実際に通知する内容です。

FirefoxにはAccessibility inspectorが独立したDevToolsタブとして用意されており、コントラストや名前に関する一般的な問題も確認できます。

ツリーで見つかる最も一般的なバグは、空の名前を持つコントロールです。アイコンボタンに名前がないため、ユーザーにはbuttonとしか聞こえません。

buttonを想定していたのに、ツリーにgenericと表示されるなら、roleが適用されていません。さらにARIAを追加する前に、マークアップを修正してください。

ウィジェットを切り替えてツリーを確認します。ペインでaria-expandedが切り替わらない場合、JavaScriptがstateを同期できていません。

aria-hiddenを設定した要素は、ツリーから完全に除外されます。装飾的なコンテンツが正しくスキップされることを確認するために使ってください。

ツリーは意図を示しますが、実際のスクリーンリーダーはユーザー体験を示します。ツリーでデバッグした後、NVDAやVoiceOverでも確認してください。

次の習慣を身につけてください。マークアップを変更し、ノードを再選択して、名前、role、stateを確認します。この短いサイクルでARIAのミスをすぐに見つけられます。

カスタムボタンがラベルなしでbuttonとしか読み上げられません。不足している名前はどこで確認できますか。

アクセシビリティツリーはATが実際に読み取るものだと学びました。DevToolsで名前、role、stateを確認し、その後、実際のスクリーンリーダーでも確かめてください。🔍