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