日本語のページに英語の用語や引用文が入ること自体は珍しくありません。
アクセシビリティ上の課題は、その部分の言語をブラウザや支援技術が正しく判断できない場合に生じます。
HTMLのlang属性を使うと、ページの途中で言語が変わる範囲を明示できます。
スクリーンリーダーが発音に適した読み上げ方を選ぶ手掛かりになるため、内容を聞き取りやすくするうえで有効です。
「一部分の言語」とは何か
一部分の言語とは、ページの基本言語とは異なる言語で書かれた語句や文章のことです。
ページ全体が日本語でも、本文の一部だけが英語なら、その英語部分が該当します。
具体的には、次のような場面があります。
- 日本語の文章に英語の単語やフレーズを入れる
- 英語を基本とするページに日本語の語句や文章を入れる
- 技術用語や専門用語を原語のまま記載する
- 引用文や固有名詞を原文の言語で掲載する
ページ全体の基本言語と一部分の言語は、設定する範囲が異なります。
ページ全体の設定から確認したい場合は、HTMLのlang属性でページの言語を指定する方法も参考になります。
言語の切り替わりを伝える理由
スクリーンリーダーの読み上げを助ける
スクリーンリーダーは、画面上の情報を音声などで伝える支援技術です。
言語の指定がない英語を日本語の読み上げ設定で処理すると、発音が不自然になり、語句を聞き取りにくくなる可能性があります。
英語部分にlang="en"を指定すれば、その範囲が英語であることを機械的に伝えられます。
ただし、実際の読み上げ方は利用する環境にも左右されるため、設定後の確認も必要です。
翻訳機能などが言語を判断する手掛かりになる
lang属性は、翻訳機能などがテキストの言語を判断する際の手掛かりにもなります。
人には言語の違いが明らかに見えても、ソフトウェアが文字列だけから意図どおりに判定できるとは限りません。
見た目の工夫とは役割が異なる
括弧、フォント、文字サイズなどを整えると、視覚的な読みやすさを補助できます。
一方、見た目を変えるだけでは、その語句が何語なのかを支援技術へ伝えられません。
言語情報はlang属性で示し、必要に応じて控えめな視覚表現を加えると、役割を混同せずに済みます。
lang属性を設定する方法
日本語の文中に英語のフレーズが入る例を考えます。
言語が変わる範囲をspan要素で囲み、その要素にlang="en"を指定します。
<p>このページでは、<span lang="en">web accessibility</span>の基本概念について説明します。</p>このコードでは、「web accessibility」だけが英語として指定されています。
文全体に英語を指定しないため、前後の日本語は日本語として扱われます。
設定範囲を決める手順
- ページ全体の基本言語を確認する
- 基本言語とは異なる語句、引用文、固有名詞などを洗い出す
- 実際に言語が切り替わる範囲を要素で囲む
- 英語なら
en、日本語ならjaのように、対象の言語をlang属性で指定する
文字の見た目だけで一律に判断するのではなく、どの範囲を別の言語として読ませたいかを確認して指定します。
長い引用文であれば引用全体、短いフレーズであればそのフレーズだけを囲むと、設定範囲が分かりやすくなります。
実装後の確認項目
マークアップした後は、コードと実際の読み上げの両方を確認します。
- ページ全体の基本言語が正しく設定されているか
- 別の言語に切り替わる範囲だけに
lang属性が付いているか - 指定範囲が広すぎたり、必要な語句が漏れたりしていないか
- スクリーンリーダーで聞いたときに内容を理解しやすいか
- 括弧やフォントなどの視覚表現が過度になっていないか
lang属性は、短いコードで追加できる言語情報です。
ページ内に複数の言語が混在する場合は、見た目だけで区別せず、言語が変わる範囲をHTMLでも明示してください。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。
アクセシビリティ向上にご興味がある方は、詳細をご覧ください。