コンテンツの構造

デジタル アクセシビリティの最も重要な側面の 1 つは、ページの基本的な構造です。ウェブサイトまたはアプリを作成する際に、スタイルのみを使用するのではなく、構造要素を使用すると、スクリーン リーダーなどの支援技術（AT）を使用するユーザーに重要なコンテキストを伝えることができます。

構造要素は、画面上のコンテンツの概要の役割を果たしますが、コンテンツ内の移動を容易にするためのアンカー ポイントとしても機能します。

セマンティック HTML 要素を使用すると、各要素の本来の意味がユーザー補助ツリーに渡され、AT によって使用され、非セマンティック要素よりもコンテンツに多くの意味が与えられます。関係を構築したり、全体的なユーザー エクスペリエンスを強化したりするために、ARIA 属性の追加が必要になる場合がありますが、ほとんどの場合、利用できる 100 種類以上の HTML 要素のいずれか自体で十分に機能します。

このモジュールでは、デジタル アクセシビリティに不可欠な、最も広く使用されている構造要素を中心に説明しますが、ウェブサイトやアプリに構造を組み込む際には、他にも考慮すべき要素や環境要因があります。これらの例は、すべてを網羅しているわけではありません。

ランドマーク

AT のユーザーは、構造要素からページ全体のレイアウトに関する情報を得ます。大量のコンテンツを切り分ける場合は、ARIA ランドマーク ロールまたは新しい HTML ランドマーク要素を使用して、ページに構造的なコンテキストを追加できます。

ランドマークは、コンテンツをナビゲート可能なリージョンに確実に配置します。ページごとに少なくとも 1 つのランドマークを指定することをおすすめします。

一部のリソースでは、AT のカバー率を高めるために ARIA と HTML ランドマークを組み合わせることを推奨しています。このような冗長性によってユーザーに問題が生じることはありませんが、確実にスクリーン リーダーを使用してパターンをテストしてください。判断に迷う場合は、ブラウザ サポートが非常に堅牢なため、デフォルトで新しい HTML ランドマーク要素のみを使用することをおすすめします。

マッピングされた HTML ランドマーク要素と、それに対応する ARIA ランドマーク ロールを比較してみましょう。

HTML ランドマーク要素 ARIA ランドマーク ロール
<header> バナー
<aside> 補完
<footer> コンテンツ情報
<nav> navigation
<main> メイン
<form> 1。 フォーム
<section> 1。 region
1 アクセス可能にするには、name 属性を含める必要があります。支援技術で認識されるには、region の暗黙的な ARIA 役割がsection アクセスしやすい名前を付いている必要があります。

次に、アクセス可能なコンテンツの構造の例を比較しましょう。

すべきでないこと
<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 リストは、類似するアイテムを意味的にグループ化する方法であり、食料品店リストや無視し続ける終わりのない ToDo リストのような、本質的な意味を与えます。

HTML リストには次の 3 種類があります。

リストアイテムの <li> 要素は、順序付けされたリストまたは順序なしリスト内のアイテムを表すために使用され、説明文の用語の <dt> と定義の <dd> 要素は、description リスト内で見つかります。

これらの要素を正しくプログラムすると、目の見えない AT ユーザーにリストの表示構造について通知できます。AT がセマンティック リストを見つけると、リスト名とリスト内のアイテム数をユーザーに知らせることができます。ユーザーがリスト内を移動すると、AT は各リスト項目を読み上げて、どの番号（5 の 1 項目、5 項目の 2 か、というように）内の番号を伝えます。

アイテムをリストにグループ化すると、認知障がい、注意障害がある目の見える人、読字障がいのあるユーザーにも役立ちます。通常、リストのコンテンツはより視覚的に空白が表示されるようにスタイル設定されており、コンテンツは要点に的を絞っています。

すべきでないこと
<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>

Tables

HTML では、表はデータやページ レイアウトを整理するためによく使用されます。

テーブルの目的に応じて、さまざまなセマンティック構造要素を使用します。テーブルの構造は非常に複雑になることがありますが、基本的なセマンティック ルールに従うと、あまり介入しなくてもかなりアクセスできます。

レイアウト

インターネットの初期には、レイアウト テーブルが視覚的な構造の作成に使用される主要な HTML 要素でした。現在では、セマンティックな要素と非セマンティックな要素（<div> やランドマークなど）を組み合わせてレイアウトを作成しています。

レイアウト テーブルを作成する時代はほとんど終わってしまいましたが、視覚に訴えるメールやニュースレター、広告など、まだレイアウト テーブルが使われている場合もあります。このような場合、レイアウトにのみ使用されるテーブルでは、関係を伝え、コンテキストを追加する構造要素（<th> や <caption> など）を使用しないでください。

また、ARIA プレゼンテーション ロールまたは ARIA 非表示状態を持つ 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>