ユーザー補助ツリーの概要
スクリーン リーダーのユーザーのみを対象としたユーザー インターフェースを構築しているとします。ここでは、視覚的な UI を作成する必要はまったくなく、スクリーン リーダーが使用するのに十分な情報を提供するだけで済みます。
作成するのは、DOM API と同様にページ構造を記述する API の一種ですが、情報の多くは視覚的な表示にのみ役立つため、情報やノードを少なくすることができます。次のようになります。
これは基本的に、ブラウザがスクリーン リーダーに実際に提示するものです。ブラウザは DOM ツリーを取得し、支援技術に役立つ形式に変更します。この変更されたツリーをユーザー補助ツリーと呼びます。
ユーザー補助ツリーは、90 年代の古いウェブページに少し似ているように見えるかもしれません。いくつかの画像、多くのリンク、おそらくフィールドとボタンがあります。
このケースのようにページを視覚的にスキャンすると、スクリーン リーダーのユーザーが得るものと同様のエクスペリエンスが得られます。インターフェースは存在しますが、ユーザー補助ツリー インターフェースと同様に、シンプルで直接的なものです。
ほとんどの支援技術は、アクセシビリティ ツリーを操作します。フローは次のようになります。
- アプリケーション（ブラウザまたはその他のアプリ）は、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 つあります。どちらの方法でも、ラベルテキストがチェックボックスのクリック ターゲットにもなります。これは、マウスやタッチスクリーンのユーザーにも役立ちます。ラベルを要素に関連付けるには、次のいずれかを行います。
- input 要素を label 要素内に配置する
<label>
<input type="checkbox">Receive promotional offers?
</label>または
- ラベルの
for属性を使用して、要素のidを参照する
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
チェックボックスに正しくラベルが付けられている場合、スクリーン リーダーは、要素のロールがチェックボックスであり、チェックされた状態にあり、「プロモーションの特典を受け取る」という名前であることを報告できます。
