ユーザー補助ツリーの概要
スクリーン リーダー ユーザー専用のユーザー インターフェースを作成しているとします。ここでは、ビジュアル UI を作成する必要はなく、スクリーン リーダーが使用するのに十分な情報を指定するだけです。
ここで作成するのは、DOM API と同様にページ構造を記述する一種の API ですが、情報の多くは視覚的な表示にのみ有用であるため、使用する情報とノードの数が少なくなる可能性があります。次のようになります。
これは基本的に、ブラウザがスクリーン リーダーに実際に表示する内容です。ブラウザは DOM ツリーを取得し、支援技術に役立つ形式に変換します。Google では、この変更されたツリーをユーザー補助ツリーと呼んでいます。
ユーザー補助ツリーは、1990 年代の古いウェブページのように見えるかもしれません。いくつかの画像、多くのリンク、フィールドとボタンなどで構成されています。
このようなページを下に目視でスキャンすると、スクリーン リーダーのユーザーと同様のエクスペリエンスが得られます。インターフェースはありますが、シンプルかつ直接的であり、ユーザー補助ツリーのインターフェースに似ています。
ユーザー補助ツリーは、多くの支援技術がやり取りする要素です。フローは次のようになります。
- アプリ（ブラウザまたは他のアプリ）は、API を介してセマンティック バージョンの UI をアシスト技術に公開します。
- 支援技術は、API を介して読み取った情報を使用して、ユーザーに対する別のユーザー インターフェース表示を作成する場合があります。たとえば、スクリーン リーダーは、アプリの音声表現をユーザーが聞くインターフェースを作成します。
- 支援技術は、ユーザーが別の方法でアプリを操作できるようにする場合もあります。たとえば、ほとんどのスクリーン リーダーには、ユーザーがマウスクリックや指タップを簡単にシミュレートできるフックが用意されています。
- 支援技術は、Accessibility API を介してユーザーの意図（「クリック」など）をアプリにリレーします。アプリは、元の UI のコンテキストでアクションを適切に解釈する必要があります。
ウェブブラウザの場合、各方向に追加のステップがあります。これは、ブラウザが実際にウェブアプリ用のプラットフォームであるためです。そのため、ブラウザはウェブアプリをユーザー補助ツリーに変換し、支援技術からユーザー アクションに基づいて適切なイベントが JavaScript で呼び出されるようにする必要があります。
ブラウザの役割はこれだけです。ウェブ デベロッパーとしての私たちの仕事は、このような現状を認識し、このプロセスを利用してユーザーがアクセスしやすい環境を作るウェブページを開発することです。
そのために、ページのセマンティクスを正しく表現するようにしています。つまり、ページ内の重要な要素にアクセス可能なロール、状態、プロパティを適切に設定し、アクセス可能な名前と説明を指定しているのです。ブラウザは、支援技術にその情報へのアクセスを許可し、カスタマイズされたエクスペリエンスを作成します。
ネイティブ HTML のセマンティクス
DOM の多くはセマンティックな意味が暗黙的にあるため、ブラウザは DOM ツリーをユーザー補助ツリーに変換できます。つまり、DOM は、ブラウザで認識され、さまざまなプラットフォームで想定どおりに動作するネイティブ HTML 要素を使用します。したがって、リンクやボタンなどのネイティブ HTML 要素のユーザー補助機能は自動的に処理されます。組み込みのユーザー補助機能を利用するには、ページ要素のセマンティクスを HTML で記述します。
しかし、ネイティブ要素のように見えるがそうではない要素を使用する場合もあります。たとえば、この「ボタン」はボタンではありません。
HTML で作成する方法はいくつかありますが、その 1 つを以下に示します。
<div class="button-ish">Give me tacos</div>
実際のボタン要素を使用しない場合、スクリーン リーダーはどの要素が表示されたかを把握できません。また、キーボードのみを使用するユーザーでも使用できるようにするには、tabindex を追加する作業が必要になります。これは、現在コーディングされているように、マウスでのみ使用できるためです。
これは、div ではなく通常の button 要素を使用することで簡単に修正できます。ネイティブ要素を使用すると、キーボード操作に対処できるという利点もあります。また、ネイティブ要素を使用するからといって、洗練された視覚効果を失うことはありません。ネイティブ要素のスタイルを設定して、暗黙的なセマンティクスと動作を維持できます。
先ほど説明したように、スクリーン リーダーは要素の役割、名前、状態、値を読み上げます。適切なセマンティック要素、ロール、状態、値の使用について説明しますが、要素の名前を検出可能にする必要があります。
名前には大きく分けて 2 つのタイプがあります。
- 表示ラベル: すべてのユーザーが要素の意味を関連付けるために使用されます。
- 代替テキスト。ビジュアル ラベルが必要ない場合にのみ使用されます。
テキストレベルの要素の場合、定義上なんらかのテキスト コンテンツが含まれるため、何もする必要はありません。ただし、入力要素やコントロール要素、画像などのビジュアル コンテンツについては、名前を指定する必要があります。実際、テキスト以外のコンテンツに代替テキストを提供することは、WebAIM チェックリストの最初の項目です。
その方法の一つは、「フォームの入力にはテキストラベルが関連付けられている」という推奨に従うことです。ラベルをチェックボックスなどのフォーム要素に関連付ける方法は 2 つあります。どちらの方法でも、ラベルテキストがチェックボックスのクリック ターゲットにもなります。これは、マウスやタッチスクリーンを使用するユーザーにとっても有用です。ラベルを要素に関連付けるには、次のいずれかを行います。
- 入力要素をラベル要素内に配置する
<label>
<input type="checkbox">Receive promotional offers?
</label>
or
- ラベルの
for属性を使用して、要素のidを参照する
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
チェックボックスのラベルが正しく設定されていれば、スクリーン リーダーは、要素にチェックボックスの役割があること、オンの状態であること、名前が「プロモーションの特典を受け取りますか？」と報告できます。
