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