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