デジタル アクセシビリティを構築して設計する際には、構造だけでなく、多くのサポート HTML 要素を考慮する必要があります。アクセシビリティを学ぶコースでは、多くの要素について説明します。
このモジュールでは、他のモジュールには当てはまらないものの、理解しておくと役立つ非常に具体的な要素に焦点を当てます。
ページのタイトル
HTML の <title>
要素は、ユーザーがこれからアクセスするページまたは画面のコンテンツを
定義します。HTML ドキュメントの
<head> セクションにあり、ページの <h1> またはメイン トピックに相当します。タイトル コンテンツはブラウザのタブに表示され、ユーザーがどのページにアクセスしているかを把握するのに役立ちますが、ウェブサイトやアプリ自体には表示されません。
シングルページ アプリ（SPA）では、ユーザーは複数ページのウェブサイトのようにページ間を移動しないため、single-page app（SPA）では、
the <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 は 拡張言語コードをサポートしていないため、AT のカバレッジを広げるには 2 文字の ISO 言語コードを使用することをおすすめします。
言語属性が完全に欠落している場合、AT はユーザーがプログラムした言語をデフォルトで使用します。たとえば、AT がスペイン語に設定されている場合、ユーザーが英語のウェブサイトまたはアプリにアクセスすると、AT は英語のテキストをスペイン語のアクセントとリズムで読み上げようとします。この組み合わせでは、デジタル プロダクトが使用できなくなり、ユーザーは不満を感じます。
<html>...</html>
<html lang="en">...</html>
lang 属性に関連付けることができる言語は 1 つだけです。つまり、
属性に設定できる言語は 1 つだけです。ページに複数の
言語が含まれている場合でも、<html>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 要素を含める必要があります。このタイトルにより、AT ユーザーは <iframe> 内のコンテンツに関する詳細情報を取得できます。
次に、ベスト プラクティスとして、スクロールを "auto" または "yes" に設定することをおすすめします。<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>