スクリーン リーダーなどの支援技術は、どのようにユーザーに通知すべきかについて、疑問に思ったことはありませんか？その答えは、こうしたテクノロジーがもたらすのは、デベロッパーがセマンティック HTML でページをマークアップしているからです。セマンティクスとは何でしょうか。また、スクリーン リーダーはそれをどのように使用するのでしょうか。
アフォーダンスとセマンティクス
セマンティクスの説明に入る前に、アフォーダンスという用語を理解しておくことをおすすめします。アフォーダンスとは、ユーザーにアクションを実行する機会を提供（提供する）オブジェクトです。その典型的な例がティーポットです。
このティーポットには取扱説明書は必要ありません。代わりに、物理的デザインにより、操作方法がユーザーに伝わります。このオブジェクトにはハンドルがあり、類似のハンドルを持つオブジェクトを世界中で見られるため、それをどのように使用して操作すべきかを推測できます。
グラフィカル ユーザー インターフェースを構築する場合、CSS などを使用して UI にビジュアル アフォーダンスを追加します。たとえば、ボタンにドロップ シャドウと枠線を付けると、現実世界の実際のボタンのようになります。
しかし、ユーザーが画面を見ることができない場合、このようなビジュアル アフォーダンスはユーザーに伝えられません。そのため、支援技術でも同様のアフォーダンスを提供できるように UI を構成する必要があります。このように UI 要素のアフォーダンスを非視覚的に公開する操作を、セマンティクスと呼びます。
セマンティック HTML を使用する
適切なセマンティクスを伝える最も簡単な方法は、意味的にリッチな HTML 要素を使用することです。
CSS を使用すると、<div> 要素と <button> 要素のスタイルを設定して同じビジュアル アフォーダンスを提供できますが、スクリーン リーダーを使用した場合のエクスペリエンスは大きく異なります。<div> は単に汎用的なグループ化要素であるため、スクリーン リーダーは <div> のテキスト コンテンツのみを読み上げます。<button> は「ボタン」として通知されるため、操作できるものであることをユーザーに強く示すことができます。
この問題の最も簡単で、多くの場合最適な解決策は、カスタム インタラクティブ コントロールを完全に回避することです。たとえば、ボタンのように動作する <div> を実際の <button> に置き換えます。
セマンティック プロパティとユーザー補助ツリー
一般に、すべての HTML 要素には次のようなセマンティック プロパティがあります。
- ロールまたはタイプ
- 名前
- 値（省略可）
- state（省略可）
要素のロールは、そのタイプを表します。たとえば、「ボタン」、「入力」、または div 要素や span 要素などの場合は単に「グループ」です。
要素の名前は計算されたラベルです。スクリーン リーダーでは通常、要素の名前と役割を読み上げます（「登録、ボタン」など）。要素の名前を決定するアルゴリズムでは、要素内にテキスト コンテンツがあるかどうか、title や placeholder などの属性があるかどうか、要素が実際の <label> 要素に関連付けられているかどうか、aria-label や aria-labelledby などの ARIA 属性があるかどうかなどの要素が考慮されます。
一部の要素には値が存在することがあります。たとえば <input type="text"> は、ユーザーがテキスト フィールドに入力した内容を反映する値を持ちます。
一部の要素には、現在のステータスを伝える状態stateを含めることもできます。たとえば、<select> 要素は、開いているか閉じているかに応じて、展開状態または折りたたみ状態のいずれかになります。
ユーザー補助ツリー
ブラウザは、DOM の各ノードについて、そのノードが意味的に「興味深い」ものであるかどうかを判断し、そのノードをユーザー補助ツリーに追加します。スクリーン リーダーなどの支援技術でユーザーに代替 UI を提供する場合、多くの場合、このユーザー補助ツリーをたどって支援します。
Chrome の DevTools を使用すると、要素のセマンティック プロパティを検査し、ユーザー補助ツリー内での位置を確認できます。
次のステップ
セマンティクスと、セマンティクスがスクリーン リーダーのナビゲーションにどのように役立つかについて少し知ったら、別の方法で作成したページを見てみましょう。次のセクションでは、一歩引いて、効果的な見出しとランドマークを使用してページの概要全体を伝える方法について検討します。