ユーザー補助ツリーの概要
スクリーン リーダーのユーザー専用のユーザー インターフェースを作成しているとします。 ここでは、ビジュアル UI を作成する必要は一切ありませんが、 情報を指定します。
作成するのは、同じようなページ構造を記述する一種の API です。 より少ない情報と少数のノードで実行できます 情報の多くは視覚的な表示にしか役に立たないからですこれは、 このようになります。
これは基本的に、ブラウザがスクリーン リーダーに実際に表示するものです。「 ブラウザは DOM ツリーを取り込み、わかりやすい形に変換する 支援技術ですこの変更されたツリーを、ユーザー補助機能 Tree。
ユーザー補助ツリーは古いウェブページのように見えるかもしれません いくつかの画像、多数のリンク、おそらくはフィールドとボタンです。
このようなケースのようにページを目視でスキャンすると、 スクリーン リーダーの機能です。インターフェースはあるが、シンプル 直接実行できることです。
ユーザー補助ツリーは、ほとんどの支援技術がやり取りするものです。「 次のような流れになります
- アプリケーション（ブラウザまたは他のアプリ）は、そのアプリケーションのセマンティック バージョンを公開します。 API を介した支援技術への UI。
- 支援技術は、API を介して読み取った情報を使用して、 ユーザー向けの代替のユーザー インターフェース表示を作成します。たとえば スクリーン リーダーは、ユーザーが音声を聞き取るインターフェースを作成します。 必要があります。
- この支援技術により、ユーザーが Google Chat でアプリを操作できる できます。たとえば、ほとんどのスクリーン リーダーには、 マウスのクリックや指によるタップを簡単にシミュレートできます。
- 支援技術はユーザーの意図（「クリック」など）をリレーして、 ユーザー補助 API を介してアプリを保護できます。この場合、アプリは次の役割を担います。 元の UI のコンテキストでアクションを適切に解釈する必要があります。
ウェブブラウザの場合、各方向に余分なステップがあります。これは、ブラウザが 内部で実行されるウェブアプリのプラットフォームですそのためブラウザは そのウェブアプリをアクセシビリティ ツリーに変換して、 イベント発生時に JavaScript で発生し、 理解が深まります
しかし、それがすべてブラウザの役割です。ウェブ デベロッパーとしての私たちの仕事は、 ソーシャル メディアでの利用を意識し、Google 広告を利用して ユーザーが利用しやすい環境を整えることを目的としています。
これは、ページのセマンティクスを正しく表現することで実現しています。 ページの重要な要素に正しくアクセスでき ロール、状態、プロパティが定義され、アクセス可能な名前と属性が 説明があります。ブラウザは、その情報を Google アシスタント技術に カスタマイズされたエクスペリエンスを構築します。
ネイティブ HTML のセマンティクス
ブラウザは DOM ツリーをアクセシビリティ ツリーに変換できる DOM には暗黙的なセマンティックな意味があります。つまり、DOM ではネイティブ HTML が ブラウザによって認識され、さまざまなデバイスで予想どおりに動作する 説明します。リンクやボタンなどのネイティブ HTML 要素のユーザー補助機能は、 自動的に処理されます。組み込みのユーザー補助機能を利用して ページ要素のセマンティクスを表現する HTML を作成します。
ただし、ネイティブ要素のように見えても、そうでない要素を使用する場合もあります。 たとえばこの「ボタン」はボタンではありません。
HTML でさまざまな方法で構築できます。1 つ示します。
<div class="button-ish">Give me tacos</div>
実際のボタン要素を使用しない場合、スクリーン リーダーは 確認できますさらに、追加の作業も必要になります。 tabindex を すでにコード化されているので、使用できるのはキーボードのみ できます。
この問題は、div ではなく通常の button 要素を使用すると簡単に修正できます。
ネイティブ要素を使用すると、キーボードを自動で処理できるというメリットもあります。
やり取りできますお気に入りのビジュアルを
ネイティブ要素を使用した場合のみ効果があります。ネイティブ要素のスタイルを
意図したとおりに見えるようにしつつ、暗黙的なセマンティクスと
確認します。
先ほど説明したように、スクリーン リーダーは要素のロール、名前、 状態、値によって決まります適切なセマンティック要素、ロール、状態、値を使用する 要素には必ず名前をつけて 見つけやすいようにします。
名前には、大きく分けて次の 2 種類があります。
- 表示されるラベル: すべてのユーザーが意味を関連付けて 要素
- 代替テキスト: 視覚効果が不要な場合にのみ使用します。 指定します。
テキストレベルの要素の場合、何もする必要はありません。定義上 テキスト コンテンツがあります。ただし、入力要素や制御要素、 名前を指定する必要があります。実際、 テキスト以外のコンテンツに対して代替テキストを提供することは、 WebAIM チェックリストの最初の項目をご覧ください。
そのための 1 つの方法は、「フォームへの入力は 表示されます。フォームにラベルを関連付ける方法は 2 つ チェックボックスなどの要素です。どちらの方法でもラベルのテキストは チェックボックスのクリック ターゲットになります。これは、マウス操作や サポートしています。ラベルを要素に関連付けるには、次のいずれかを行います。
- 入力要素をラベル要素内に配置する
<label>
<input type="checkbox">Receive promotional offers?
</label>
または
- ラベルの
for属性を使用して、要素のidを参照する
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
チェックボックスに正しいラベルが付けられている場合、スクリーン リーダーは 要素はチェックボックスのロールを持ち、オンになっています。名前は「Receive」 。
<ph type="x-smartling-placeholder">