概要
スクリーンリーダーは、視覚障害者や弱視の人が使用するソフトウェアで、ページのコンテンツを音声に変換して読み上げます。それを正しく行うには、どの言語の発音と声を使うべきかを知る必要があります — フランス語の単語はフランス語の音声学で、英語の単語は英語の音声学で、といった具合です — そしてその情報は、ページの<html>タグに設定されたlang属性から取得されます。
これは、より広い技術的・SEO的な角度から扱っている別のlang属性ガイドと同じ属性ですが、ここでは、それが欠けているか間違っている場合に、実際にスクリーンリーダーに頼っている人に何が起こるかに焦点を当てています。
重要な理由
正しく設定されたlang属性がないと、スクリーンリーダーはどの言語と声を使うべきか推測しなければならず、間違った推測は本当に奇妙で、時には理解不能な結果を生みます — 例えば、外国語の発音規則で読み上げられる英語のページは、見慣れた単語をもはや本物の発話のように聞こえない何かに変えてしまうことがあります。これは、コンテンツにアクセスするためにその読み上げに依存している人にとって些細な不便ではありません — ページを機能的に使用不可能にすることさえあります。
この1つの属性は、利用可能な最も影響力が大きく、最も労力の少ないアクセシビリティ修正の1つです。修正がいかに小さいか(1つのタグの中の1つの単語)と、それが間違っているときにスクリーンリーダー利用者の体験をいかに完全に壊しうるかの、そのギャップのためです。
修正方法
<html>タグに、ページの実際の言語に一致するlang属性が含まれていることを確認しましょう。例:<html lang="ja">。- 複数の言語のコンテンツを持つサイトでは、サイト全体の単一のデフォルトではなく、各特定のページのlang属性がそのページ自身の言語と一致するようにしましょう。
- ページ内の特定のセクションが言語を切り替える場合(たとえば、別の言語で引用されたフレーズ)、そのセクションも独自の
lang属性を持つことができますが、まずはページレベルのものを正しく設定することが最も重要です。 - ほとんどのウェブサイトビルダーは、サイト全体の言語設定に基づいてこれを自動的に設定します — そのようなプラットフォームを使用している場合は、コードを直接編集するのではなく、その設定を確認しましょう。
- 可能であれば、無料のスクリーンリーダー(Windowsの場合はNVDA、macOS/iOSに組み込まれたVoiceOverなど)で実際にページをテストし、どのように読み上げられるかを聞きましょう。