このページの本文へ移動

H57:html要素の言語属性を使用する

出典:WAIC. “ H57: html 要素の言語属性を使用する新しいウィンドウを開きます ” WCAG 2.0 達成方法集(参照2024年7月1日)

概要

H57は、ウェブページ全体の主言語を指定するためにhtml要素に言語属性langを使用する技術であり、WCAG 2.0の達成基準3.1.1「ページの言語」に対応しています。これにより、スクリーンリーダーなどの支援技術が正しい言語設定でページを読み上げ、視覚障害者や読み上げ技術を使用するユーザーがページの内容を正しく理解しやすくなります。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

適用(対象)

こちらは、次の達成基準に関連する達成方法です。

実践的な方法

言語属性の追加

html要素にlang属性を追加し、ページの主言語のコードを指定します。言語コードはISO 639-1標準に従います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>
    <p>これは日本語のサンプルページです。</p>
</body>
</html>

適切な言語コードの使用

ページの主言語に適した言語コードを使用します。以下に一般的な言語コードの例を示します。

  • 日本語:ja
  • 英語:en
  • フランス語:fr
  • ドイツ語:de
  • スペイン語:es
  • 中国語:zh
  • 韓国語:ko

まとめ

H57は、ウェブページの主言語を正確に指定するために不可欠です。html要素にlang属性を追加することで、支援技術がページの内容を適切に提供し、利用者の理解を助けます。正しい言語設定は、アクセシビリティを向上させ、ユーザーエクスペリエンスを改善するための基本的なステップです。

WCAG 2.0とその翻訳文書の利用について

本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0新しいウィンドウを開きます」、「WCAG 2.0 解説書新しいウィンドウを開きます」および「WCAG 2.0 達成方法集新しいウィンドウを開きます」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。

WCAG 2.0

この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンス新しいウィンドウを開きますの下に提供されています。

WCAG 2.0 解説書及び達成方法集

この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。

Contactお問い合わせ

当社ではウェブアクセシビリティ診断を提供しております。すべてのユーザーにアクセスできるウェブサイトを目指して、一緒に取り組みましょう。診断のご依頼や詳細については、お気軽にご連絡ください。

お問い合わせ