lang属性とスクリーンリーダー
正しく発音されるようページと要素の言語を宣言します
「lang属性とスクリーンリーダー」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
lang属性の役割
lang属性は、BCP-47言語タグを使って要素のコンテンツの言語を宣言します。スクリーンリーダーはこれを使って正しい発音エンジンと音声を選択し、検索エンジンは言語別のインデックス作成に利用します。
html要素に設定する
すべてのページは、ルート要素で主要言語を宣言する必要があります。英語には<html lang="en">、トルコ語には<html lang="tr">、日本語には<html lang="ja">を使用します。指定しないと、スクリーンリーダーはユーザーのシステムのデフォルトに戻り、多くの場合、すべての単語を誤って発音します。
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>BCP-47タグ
タグはBCP-47に従います。言語コード（en、tr、ja）に、必要に応じて地域（en-US、en-GB、zh-Hant、zh-Hans）を加え、スクリプトを指定することもあります。正確な範囲で最も具体的なタグを使用してください。地域によるつづりの違いが問題にならない場合は、「en」だけで十分です。
ページ途中での言語変更
異なる言語のセクションには、独自のlang属性を設定します。<blockquote lang="fr">Bonjour</blockquote>のように記述すると、スクリーンリーダーはそのセクションで音声を切り替え、多言語ページでも正確に発音できます。
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>CSSの言語セレクター
CSSでは:lang(en)を使って言語を対象にできます。blockquote:lang(fr)::before { content: "« "; }のように記述します。セレクターは最も近い祖先のlang属性に一致します。言語によって異なる引用符や間隔など、組版上の慣習に使用してください。
発音に重要な理由
英語とフランス語では「Live」の発音が異なります。ドイツ語の「Wir」は「veer」であり、「wear」ではありません。周囲のセクションがドイツ語またはフランス語であると伝えない限り、英語用に設定されたスクリーンリーダーはどちらも誤って発音します。
リンク先の言語を示すhreflang
リンクのhreflang属性（<a href="/fr/" hreflang="fr">Français</a>）は、リンク先ページの言語を検索エンジンと支援技術に伝えます。サイト全体のhreflangリンクタグと組み合わせることで、国際SEOを完全にカバーできます。
ユーザーの言語を検出する
JavaScriptでは、navigator.languagesからユーザーの優先言語を読み取れます。これは優先順位順のBCP-47タグの配列です。デフォルトのロケールを選択したり、言語切り替えを提案したりするために使用できます。ただし、ブラウザーのデフォルトよりも、ユーザーが明示的に選択した言語を必ず優先してください。
サーバー側で検出する
HTTPのAccept-Languageリクエストヘッダーには、ブラウザー設定から取得したユーザーの言語設定が一覧表示されます。サーバーでこれを使用して、初回リクエスト時に適切なローカライズ済みHTMLを返せば、JavaScriptが実行される前にユーザーへ正しい言語を表示できます。
1ページ内の複数言語
Wikipediaの記事、言語学習アプリ、辞書では、日常的に複数の言語を混在させます。短い文章であっても、すべての文章に独自のlang属性を設定してください。セクションごとのlangがないと、スクリーンリーダーの音声とCSSの引用符がページのデフォルトに戻ります。
よくある間違い
<html>にlangを設定しないこと（非常によくあります）、誤った言語コードを使うこと（lang="en"の代わりにlang="english"とするなど）、言語だけで十分なのに地域コードを使うことが、よくある間違いです。W3C validatorとLighthouseのアクセシビリティ監査を使って、CIでこれらを検出してください。
理解度チェック
スクリーンリーダーのユーザーにとって、<html>のlang属性が特に重要なのはなぜですか？
まとめ
BCP-47タグ（en、tr、ja、zh-Hant）を使って、<html>にページの言語を宣言します。ページ途中で言語が変わる場合は、spanやsectionのlang属性で示し、スクリーンリーダーが音声を切り替えられるようにします。CSSの:lang()で言語固有の組版を適用できます。langは必ず設定してください。コストをかけずに、スクリーンリーダーの発音、SEO、CSSによる対象指定を大幅に改善できます。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「lang属性とスクリーンリーダー」レッスンは無料ですか？
はい。「lang属性とスクリーンリーダー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「lang属性とスクリーンリーダー」で何を学びますか？
正しく発音されるようページと要素の言語を宣言します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「lang属性とスクリーンリーダー」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- lang属性とスクリーンリーダー
- 右から左へ書くテキストのdir=rtl
- bdi要素とbdo要素
- charsetとUnicodeの処理：特殊文字