Caution

This document is an English translation of the “freee Accessibility Guidelines.” The normative version of this document is in Japanese, and the English version is informational. The English translation is incomplete, and any links with their link texts left in Japanese are untranslated. Please be aware that there may be inaccuracies in the translation or parts that are outdated.

lang属性と音声読み上げ

スクリーン・リーダーの中には、html要素やその他の要素に指定されたlang属性の値に応じて、読み上げに用いる音声合成エンジンを切り替えるものがあります。freeeで標準環境としているNVDAでも、音声設定を調整することで、多言語の読み上げに対応した状態になります。（How to Perform Checks with Screen Readersの「その他の初期設定」、「音声」の項を参照）

このようなスクリーン・リーダーでは、例えばhtml要素にlang="en"が指定されているページにアクセスすると、英語用の音声合成エンジンが利用されます。多くの英語用の音声合成エンジンは日本語を正しく扱えませんので、もしそのページのコンテンツが主に日本語で書かれている場合には正しい読み上げが行われず、半角の英数字のみを読み上げるような状態になってしまいます。

特にhtml要素のlang属性はページ全体の処理に影響しますので、適切な値をlang属性に指定することは重要ですが、それ以上に誤った値を指定しないことが重要です。

例えば、以下のようにhtml要素のlang属性に誤った値が指定されているページは、画面表示に問題はありませんが、多言語の読み上げに対応しているスクリーン・リーダーでは適切に読み上げられません。

lang-incorrect.html：

コードを表示
 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8"/>
 5     <title>誤ったlang属性の指定</title>
 6   </head>
 7   <body>
 8     <p>日本語のテキストは日本語の合成音声で読み上げられます。</p>
 9     <p>HTML要素のlang属性には、ページ全体で主に使われている言語を指定します。</p>
10     <p>Web Content Accessibility Guidelines 2.1や、それを元に作ったfreeeアクセシビリティー・ガイドラインでは、html要素に適切なlang属性を指定することを必須としています。</p>
11   </body>
12 </html>

もし主に日本語で書かれていてhtml要素のlang属性にjaが指定されているページ中に英語のテキスト情報がある場合、その部分も含めて日本語用の音声合成エンジンが用いられます。

“freee”や“Web”といった単語単位であったり、“Web Content Accessibility Guidelines”のように数単語程度のフレーズであれば、このことが問題になることは少ないのですが、例えば1段落以上の長さに渡ってhtml要素のlang属性に指定されているのとは異なる言語のテキストがあるような場合などにおいては、その言語に対応した音声合成エンジンが用いられる方が望ましいことがあります。

以下のように、引用されている英文の箇所にlang="en"を指定してある場合（12行目）、この部分と他の日本語で書かれた部分で読み上げに用いられる音声が変わります。

lang-partial.html：

コードを表示
 1 <!DOCTYPE html>
 2 <html lang="ja">
 3   <head>
 4     <meta charset="UTF-8"/>
 5     <title>lang属性 - 日英混在</title>
 6   </head>
 7   <body>
 8     <p>日本語のテキストは日本語の合成音声で読み上げられます。</p>
 9     <p>Webの考案者、Tim Berners-Leeは、以下のように言っています：</p>
10 
11     <blockquote>
12       <p lang="en">The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.</p>
13     </blockquote>
14 
15     <p>適切にlang属性を使うことで、複数の言語が混在しているときの使い勝手が変わってきますが、状況や想定ユーザーに応じて、最善の実装方法が異なることが考えられます。</p>
16   </body>
17 </html>