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