ドキュメント

構造とともに、デジタル アクセシビリティを構築して設計する際に考慮すべきサポート HTML 要素が多数あります。「ユーザー補助を学ぶ」コースでは、多くの要素を扱います。

このモジュールでは、他のモジュールには当てはまらないものの理解に役立つ非常に具体的な要素に焦点を当てています。

ページタイトル

HTML の <title> 要素は、ユーザーに表示されるページまたは画面のコンテンツを定義します。HTML ドキュメントの <head> セクションにあり、ページの <h1> またはメイントピックと同じです。タイトル コンテンツはブラウザタブに表示され、ユーザーがどのページにアクセスしているかを把握できますが、ウェブサイトやアプリ自体には表示されません。

シングルページ アプリ（SPA）では、<title> の処理方法は若干異なります。これは、ユーザーは複数ページのウェブサイトとは異なり、ページ間を移動しません。SPA の場合、document.title プロパティの値は、JavaScript フレームワークに応じて手動で、またはヘルパー パッケージによって追加できます。更新されたページタイトルをスクリーン リーダーのユーザーに通知するには、追加の作業が必要になる場合があります。

わかりやすいページタイトルは、ユーザーにとっても検索エンジン最適化（SEO）にとっても効果的ですが、キーワードを増やしすぎないようにします。タイトルは、AT ユーザーがページを訪問したときに最初に通知されるため、正確で独自性があり、かつ簡潔でありながら、タイトルがなければなりません。

また、ページタイトルを記述する場合は、内部ページや重要なコンテンツを最初に「フロントローディング」し、その後に先行するページや情報を追加することをおすすめします。そうすることで、AT のユーザーは、これまでに聴いた情報についてじっくりと目を追う必要がなくなります。

すべきでないこと
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
すべきこと
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

言語

ページの言語

ページの言語属性（lang）では、ページ全体のデフォルト言語を設定します。この属性は <html> タグに追加されます。どの言語を使用すべきかを AT に知らせるために、すべてのページに有効な言語属性を追加する必要があります。

AT のサポート範囲を広げるには、2 文字の ISO 言語コードを使用することをおすすめします。ISO 言語コードの多くは拡張言語コードをサポートしていません。

言語属性が完全に欠落している場合、AT はデフォルトでユーザーのプログラム言語になります。たとえば、AT がスペイン語に設定されていて、ユーザーが英語のウェブサイトやアプリにアクセスすると、AT はスペイン語のアクセントとケイデンスで英語のテキストを読み上げようとします。この組み合わせにより、使用不能なデジタル製品となり、ユーザーは不満を感じます。

すべきでないこと
<html>...</html>
すべきこと
<html lang="en">...</html>

lang 属性に関連付けることができる言語は 1 つのみです。つまり、ページに複数の言語があっても、<html> 属性で指定できる言語は 1 つのみです。lang をページのメイン言語に設定します。

すべきでないこと
<html lang="ar,en,fr,pt">...</html>
複数の言語はサポートされていません。
すべきこと
<html lang="ar">...</html>
ページの第一言語のみを設定する。この例では、言語はアラビア語です。

セクションの言語

コンテンツ自体の言語の切り替えに、言語属性（lang）を使用することもできます。フルページ言語属性の場合と同じ基本的なルールが適用されますが、言語属性を <html> タグではなく適切なページ内要素に追加する点が異なります。

<html> 要素に追加した言語は、それに含まれるすべての要素にも適用されるため、必ず最初にページの最上位の lang 属性の第一言語を設定してください。

別の言語で記述されたページ内要素の場合は、その lang 属性を適切なラッパー要素に追加します。これにより、要素が閉じられるまで、最上位の言語設定がオーバーライドされます。

すべきでないこと
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        "Kas sa räägid inglise keelt?" when I met someone new.</p>
    </div>
  </body>
</html>
すべきこと
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

iFrames

iframe 要素（<iframe>）は、別の HTML ページまたはサードパーティのコンテンツをページ内でホストするために使用されます。基本的には、親ページ内に別のウェブページを配置します。iframe は、広告、埋め込み動画、ウェブ解析、インタラクティブ コンテンツによく使用されます。

<iframe> にアクセスできるようにするために考慮すべき点がいくつかあります。まず、個別のコンテンツを含む <iframe> ごとに、親タグ内に title 要素を含める必要があります。このタイトルは、<iframe> 内のコンテンツに関する詳細情報を AT ユーザーに提供します。

次にベスト プラクティスとして、<iframe> タグ設定でスクロールを「auto」または「yes」に設定することをおすすめします。これにより、ロービジョンの方も、他の方法では見ることができない <iframe> 内のコンテンツにスクロールできるようになります。<iframe> コンテナの高さと幅が柔軟であることが理想的です。

すべきでないこと
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
すべきこと
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

理解度チェック

ドキュメントのユーザー補助機能に関する知識をテストします。

サイトは多言語のオンライン教科書で、複数の言語が 1 ページに表示されます。支援技術にテキストのコピーの言語を伝える最良の方法はどれですか。

心配はいりません。AT は自動的に各言語を読み上げるからです。
AT にも言語検出のスキルがありますが、正確に推測できるとは限りません。
<html> 要素にすべての言語を含めます。例: <html lang="en,lt,pl,pt">
lang 属性に関連付けることができる言語は 1 つのみです。
<html> にはメインの lang を設定し、別の言語のコンテンツを持つ要素には追加の言語を設定します。
AT は主に <html> 言語属性を利用してドキュメントを読み込みます。複数言語のテキストがある場合は、対応する要素（セクションや段落など）に正しい 2 文字の ISO コードを含む lang 属性を追加してください。