ドキュメント

構造に加えて、サポートする HTML 要素も数多くあります。 デジタルアクセシビリティを念頭に置いて 開発、設計しています学習全体 多くの要素について説明しています。

このモジュールでは、どれにも当てはまらない非常に具体的な要素に焦点を当てています。 理解しておくと役立ちます。

ページのタイトル

HTML <title> 要素は、ユーザーがアクセスしようとしているページまたは画面のコンテンツを定義します 体験できますこちらの <head> セクション（ HTML ドキュメントで、<h1> またはページのメイントピックに相当します。「 タイトルのコンテンツはブラウザタブに表示され、ユーザーは そのページがウェブサイトやアプリ自体には表示されていない。

シングルページ アプリ（SPA）では、 <title> の扱いはやや異なるので、ユーザーがページを移動しなければ ページ間の移動も簡単になりますSPA の場合、 document.title プロパティは、環境変数に応じて、手動で追加することも、ヘルパー パッケージで追加することもできます。 使用できます。このたび、 更新されたページタイトル 追加の作業が必要になることがあります。

わかりやすいページタイトルは、ユーザーにとっても 検索エンジン最適化（SEO）を提供しているものの、 大量のキーワードを追加しましょうタイトルが 1 番目で、 AT ユーザーがページにアクセスしたときに通知される内容で、正確かつ一意で、 簡潔であるべきです。

ページのタイトルを記述する際は、「フロントローディング」も内部 先行するページや情報を追加する なります。これにより、AT のユーザーは入手した情報をじっくり確認する必要がなくなります。 聞いたことがあるかもしれません。

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

言語

ページの言語

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

1 文字目から 2 文字の ISO 言語コード サポートしていないことが多いため、 拡張言語コード。

言語属性が完全に欠落している場合、AT はデフォルトで ユーザーのプログラム言語。たとえば、AT がスペイン語に設定されていて、 ユーザーが英語のウェブサイトやアプリにアクセスした場合、AT は英語を読もうとする スペイン語のアクセントと頻度で示されます。この組み合わせでは、 不満を抱いているユーザーです

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

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

すべきでないこと
<html lang="ar,en,fr,pt">...</html>
<ph type="x-smartling-placeholder"></ph> 複数の言語はサポートされていません。
すべきこと
<html lang="ar">...</html>
<ph type="x-smartling-placeholder"></ph> ページのメイン言語のみを設定します。この場合、言語はアラビア語です。

セクションの言語

コンテンツ自体で言語を切り替えるために、言語属性（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>

iframe

iframe 要素 （<iframe>） 使用して別の HTML ページや第三者のコンテンツをページ内でホストできます。これは、 親ページ内に別のウェブページが配置されますiframe は一般的に 広告、埋め込み動画、ウェブ解析、インタラクティブな 説明します。

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

次に、スクロールを「自動」に設定することをおすすめします。または「はい」<iframe> タグ設定を使用します。これにより、ロービジョンの方が、他の方法では見えない <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 は言語検出スキルを備えていますが、AT が正しく推測するとは限りません。
<html> 要素にすべての言語を含めます。例: <html lang="en,lt,pl,pt">
lang 属性に関連付けることができる言語は 1 つのみです。
<html> にメインの lang を設定し、異なる言語のコンテンツを含む要素に追加の言語を設定します。
AT は、主に <html> 言語属性を使用してドキュメントを読み込みます。多言語テキストの場合は、対応する要素（セクションや段落など）に lang 属性を追加し、正しい 2 文字の ISO コードを指定します。