デジタル アクセシビリティを考慮して作成、設計する際には、構造に加えて、サポートする 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 が拡張言語コードをサポートしていないため、AT の範囲を広げるには、2 文字の ISO 言語コードを使用することをおすすめします。
language 属性が完全にない場合、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>
iframe
iframe 要素(<iframe>
)は、別の HTML ページまたはサードパーティのコンテンツをページ内にホストするために使用されます。基本的に、別のウェブページを親ページ内に配置します。iFrame は、広告、埋め込み動画、ウェブ分析、インタラクティブ コンテンツによく使用されます。
<iframe>
をアクセス可能にするには、考慮すべき点がいくつかあります。まず、個別のコンテンツを含む各 <iframe>
に、親タグ内に title 要素を含める必要があります。このタイトルは、AT ユーザーに <iframe>
内のコンテンツに関する詳細情報を提供します。
次に、<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 つのページに複数の言語が表示されている場合。支援技術にコピーの言語を伝える最適な方法はどれですか?
<html>
要素に含めます。例: <html lang="en,lt,pl,pt">
lang
属性に関連付けることができる言語は 1 つのみです。<html>
にプライマリ lang
を設定し、異なる言語のコンテンツを含む要素に追加の言語を設定します。<html>
言語属性を使用してドキュメントを読み取ります。複数言語のテキストがある場合は、対応する要素(セクションや段落など)に lang
属性を追加し、正しい 2 文字の ISO コードを指定してください。