デジタル アクセシビリティの最も重要な側面の 1 つは、ページの基盤となる構造です。スタイルのみに依存せずに構造要素を使用してウェブサイトまたはアプリを構築すると、スクリーン リーダーなどの支援技術（AT）を使用しているユーザーに重要なコンテキストを提供できます。
構造要素は、画面上のコンテンツの概要として機能しますが、コンテンツ内のナビゲーションを容易にするためのアンカーポイントとしても機能します。
セマンティック HTML 要素を使用すると、各要素に固有の意味はユーザー補助ツリーに渡され、AT によって使用されます。これにより、セマンティック以外の要素よりもコンテンツに意味が付与されます。関係を構築したり、全体的なユーザー エクスペリエンスを向上させたりするために、ARIA 属性を追加する必要がある場合がありますが、ほとんどの状況では、利用可能な 100 を超える HTML 要素のいずれかだけで十分に機能します。
このモジュールでは、デジタル アクセシビリティに不可欠で最も広く使用されている構造要素に焦点を当てていますが、ウェブサイトやアプリに構造を構築する際に考慮すべき要素や環境要因は他にもあります。これらの例は、網羅的なものではなく、トピックの概要を説明するものです。
ランドマーク
AT のユーザーは、構造要素を使用してページの全体的なレイアウトに関する情報を得ています。コンテンツの広い領域を区切る場合は、ARIA ランドマークのロールまたは新しい HTML ランドマーク要素を使用して、ページに構造的なコンテキストを追加できます。
ランドマークを使用すると、コンテンツがナビゲート可能な領域に配置されます。1 ページに少なくとも 1 つのランドマークを指定することをおすすめします。
一部のリソースでは、ARIA と HTML ランドマークを組み合わせて、AT の範囲を広げることが推奨されています。このタイプの冗長性がユーザーに問題を引き起こすことはないはずですが、スクリーン リーダーを使用してパターンをテストして確認してください。判断に迷う場合は、新しい HTML ランドマーク要素のみをデフォルトで使用することをおすすめします。ブラウザのサポートが非常に堅牢であるためです。
HTML ランドマーク要素を、対応する ARIA ランドマーク ロールにマッピングして比較してみましょう。
| HTML ランドマーク要素 | ARIA ランドマークのロール |
|---|---|
<header> |
バナー |
<aside> |
補完的 |
<footer> |
contentinfo |
<nav>
|
navigation |
<main> |
main |
<form> 1 |
フォーム |
<section> 1 |
region |
次に、アクセス可能なコンテンツ構造の例を比較します。
<div>
<div>...</div>
</div>
<div>
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</div>
<div>
<p>© 2022 - Stamps R Awesome</p>
</div><header>
<nav>...</nav>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>見出し
HTML のヘッダーレベルを正しく実装すると、ページ全体のコンテンツの概要を簡潔に示すことができます。
使用できる見出しレベルは 6 つあります。ヘディング レベル 1 <h1> は、ページで最も重要度の高い情報に使用し、ヘディング レベル 6 <h6> は、最も重要度の低い情報に使用します。
見出しレベルの順序は重要です。理想的には、セクションを <h1> で開始し、すぐに <h5> に続くなど、見出しレベルをスキップしないでください。代わりに、順番に <h5> に進む必要があります。ヘッダーレベルの順序は AT ユーザーにとって特に重要です。これは、コンテンツを移動する主な方法の一つです。
ヘッダーの適切なセマンティック構造と順序を遵守するには、CSS スタイルとヘッダーレベルの分離を検討してください。これにより、見出しレベルの順序を維持しながら、見出しスタイルをより柔軟に設定できます。スタイルのみを使用して見出しを作成しないでください。AT では、スタイルのみが使用されている見出しは見出しとして認識されません。
見出しを偽装すると、AT ユーザーに適切な構造が伝わりません。
見出しは、認知障がいや注意欠陥障がいのある方にも役立ちます。ページで最も重要な内容を理解できるように、見出しのコンテンツをわかりやすくすることが重要です。
<div>
<h3>Stamps</h3>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</div>
<div>
<h3>How do I start a stamp collection?</h3>
<h2>Equipment you will need</h2>
<h4>...</h4>
<h2>How to acquire stamps</h2>
<h4>...</h4>
<h2>Organizations you can join</h2>
<h4>...</h4>
</div><header>
<h1>Stamp collecting</h1>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<h2>What is stamp collecting?</h2>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</section>
<section aria-label="Start a stamp collection">
<h2>How do I start a stamp collection?</h2>
<h3>Required equiment</h3>
<p>...</p>
<h3>How to acquire stamps</h3>
<p>...</p>
<h3>Organizations you can join</h3>
<p>...</p>
</section>
</main>リスト
HTML リストは、買い物リストや、ついつい後回しにするやることが絶えない To-Do リストのように、類似するアイテムを意味論的にグループ化して、固有の意味を与える方法です。
HTML リストには次の 3 種類があります。
リストアイテム <li> 要素は、順序付きリストまたは順序なしリスト内のアイテムを表すために使用されます。説明用語 <dt> 要素と定義 <dd> 要素は、説明リストで使用できます。
これらの要素を正しくプログラムすると、視覚障がいのある AT ユーザーにリストの表示構造を伝えることができます。AT がセマンティック リストに遭遇すると、リスト名とリスト内のアイテム数をユーザーに伝えることができます。ユーザーがリスト内を移動すると、AT は各リスト項目を読み上げ、リスト内の番号（5 番目の項目、5 番目の項目など）を読み上げます。
アイテムをリストにグループ化すると、認知障害や注意障害のある視覚障がい者や、読字障がいのある視覚障がい者にも役立ちます。リスト コンテンツは通常、視覚的な空白スペースを多く含み、コンテンツが要点を絞って表示されるようにスタイル設定されているためです。
<div>
<p>How do I start a stamp collection?</p>
<p>Equipment you will need</p>
<div>
<p>Small tongs with rounded tips</p>
<p>Stamp hinges</p>
<p>Stockbook or albumn</p>
<p>Magnifying glass</p>
<p>Stamps</p>
</div>
</div><div>
<h1>How do I start a stamp collection?</h1>
<h2>Equipment you will need</h2>
<ol>
<li>Small tongs with rounded tips</li>
<li>Stamp hinges</li>
<li>Stockbook or albumn</li>
<li>Magnifying glass</li>
<li>Stamps</li>
</ol>
</div>テーブル
HTML では、テーブルは一般的にデータの整理やページ レイアウトに使用されます。
テーブルの目的によって、使用するセマンティック構造要素は異なります。テーブルの構造は非常に複雑になる可能性がありますが、基本的なセマンティック ルールに従えば、あまり手間をかけずにアクセスできます。
レイアウト
インターネットの初期の頃、レイアウト テーブルは視覚的な構造を構築するために使用される主な HTML 要素でした。現在、<div> やランドマークなど、セマンティック要素と非セマンティック要素を組み合わせてレイアウトを作成しています。
レイアウト テーブルを作成する時代はほとんど終わりましたが、視覚的に豊富なメール、ニュースレター、広告などでは、レイアウト テーブルが引き続き使用されることがあります。このような場合、レイアウト専用のテーブルでは、関係を伝え、コンテキストを追加する構造要素（<th> や <caption> など）を使用しないでください。
レイアウト テーブルは、ARIA のプレゼンテーション ロールまたは aria-hidden 状態を使用して、AT ユーザーに対して非表示にする必要があります。
<table>
<caption>My stamp collection</caption>
<tr>
<th>[Stamp Image 1]</th>
<th>[Stamp Image 2]</th>
<th>[Stamp Image 3]</th>
</tr>
</table><table role="presentation">
<tr>
<td>[Stamp Image 1]</td>
<td>[Stamp Image 2]</td>
<td>[Stamp Image 3]</td>
</tr>
</table>データ
AT ユーザーに対して非表示にする必要があるレイアウト テーブルとは異なり、データテーブルとそのすべての要素は公開する必要があります。データ表の構造は、単純な情報と複雑な情報をユーザーに伝えるために重要です。
テーブルが正しく構造化されている場合、列見出しと行、テーブル内のデータの間に関係が形成されます。構造が正しくないと、ユーザーは表内の情報が意味する内容とコンテキストを解読する必要があります。
テーブルの複雑さに応じて、コードを介して関係を形成する方法は異なります。テーブルをアクセス可能にするための最初のステップは、ヘッダーセルに <th> 要素を、データセルに <td> 要素をマークアップすることです。
より複雑なテーブルの場合は、<rowgroup>、<colgroup>、<caption>、scope などの追加の HTML テーブル要素を使用して、意味と関係を伝える必要がある場合があります。
<table>
<tr>
<td>Animal</td>
<td>Year</td>
<td>Condition</td>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table><table>
<caption>My stamp collection</caption>
<tr>
<th>Animal</th>
<th>Year</th>
<th>Condition</th>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>