コンテンツの構造

デジタル アクセシビリティの最も重要な側面の一つは、 構成する必要がありますGoogle Cloud でウェブサイトまたはアプリを構築する際は、 構造要素を使用する 重要なコンテキストを補助的な手段でユーザーに提示します。 テクノロジー（AT）です。

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

セマンティック HTML 要素を使用する場合は、 各要素の本質的な意味がユーザー補助ツリーに渡され、 AT で使用されるため、セマンティックでない要素よりも意味のあるものになります。 作成するために ARIA 属性の追加が必要になる場合があります 全体的なユーザー エクスペリエンスの向上を目的としていますが、 100 を超える HTML 要素から 単独ではかなりうまく機能します。

このモジュールでは、最も広く使用されている構造要素に焦点を当てますが、 デジタル アクセシビリティには、明らかに他にも ウェブサイトを構築する際に考慮すべき環境要因や、 。これらの例はトピックの概要であり、すべてを網羅しているわけではありません。

ランドマーク

AT のユーザーは、構成要素から情報を得て、 ページ全体のレイアウトを変更できます。大きなコンテンツ領域を区切る場合は、 ARIA ランドマーク ロールまたは新しい HTML ランドマーク要素を使用して、 追加することをおすすめします

ランドマークは、コンテンツがナビゲーション可能な領域にあることを保証します。1 ページにつき少なくとも 1 つのランドマークを指定することをおすすめします。

一部のリソースでは、ARIA と HTML ランドマークの組み合わせが推奨されています。 AT カバレッジを拡大できますこのタイプの冗長性は スクリーン リーダーを使用してパターンをテストする ということです判断に迷う場合は、デフォルトで新しい HTML のみを使用することをおすすめします。 ランドマーク要素として、 ブラウザ サポートは非常に 構築できます

HTML ランドマーク要素を比較してみましょう。 割り当てられている 対応する ARIA ランドマーク ロールがあります。

で確認できます。 <ph type="x-smartling-placeholder">
HTML ランドマーク要素 ARIA ランドマーク ロール
<header> バナー
<aside> 補完的
<footer> contentinfo
<nav> navigation
<main> メイン
<form> 1 フォーム
<section> 1 region
</ph> 1 アクセス可能にするために name 属性を含める必要があります。暗黙的な ARIA ロール region が支援技術に表示されるようにするには、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 ユーザーにとって特に重要 コンテンツ内の主要な移動手段の 1 つだからです

見出しの適切な意味構造と順序を守るために、 見出しレベルから 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 種類があります。

  • <ol> を注文しました
  • 順序なし <ul>
  • 説明文 <dl>

リストアイテム <li> 要素は、順序付きリストまたは順序なしリスト内の項目を表すために使用されますが、 説明文の語句 <dt> と定義 <dd> 要素は、 説明リストをご覧ください。

これらの要素が正しくプログラムされると、目の見えない 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>

テーブル

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

テーブルの目的に応じて、異なるセマンティック構造を あります。テーブルの構造は非常に複雑ですが、 基本的なセマンティック ルールに従うため、ほとんど介入しなくても十分にアクセスできます。

レイアウト

インターネットの黎明期には、レイアウト テーブルが主要な HTML 要素でした。 視覚的構造を構築するために使われます。現在ではセマンティックと レイアウトを作成する <div> やランドマークなどのセマンティックでない要素。

レイアウト テーブルを作成する時代はほぼ終わりましたが、 レイアウト テーブルは、視覚に訴えるメール、ニュースレター、 表示されなくなります。このような場合、レイアウトにのみ使用されるテーブルは、 関係性を伝え、コンテキストを追加する構造要素を使用する。 <th> または <caption>。

レイアウト テーブルは、ARIA を使用している AT ユーザーに対しても非表示にする必要があります プレゼンテーションの役割 または aria-hidden 状態。

すべきでないこと
<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 ユーザーには表示されないレイアウト テーブルとは異なり、 データテーブルとそのすべての要素 公開する必要があります。データテーブルの構造は、 複雑な情報をユーザーに提示します。

テーブルが正しく構造化されていると、列と列の間に関係が形成されます。 テーブル内のデータです。正しく構成されていないと その中には、API ドキュメント内の情報の意味と文脈を解読しなければならない 表します

テーブルの複雑さによっては、コードを通じて関係を形成することも さまざまな方法があります。テーブルをアクセス可能にするための最初のステップは、 ヘッダーセルに <th> とデータセル <td> 要素を含む。

より複雑な表では、追加の HTML 表要素の使用が必要になる場合があります <rowgroup> <colgroup>, <caption>, および scope から 意味や関係性が伝わります。

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