ウェブサイトを多言語展開する際のアクセシビリティ面での注意事項
海外に事業展開をしているなどの理由でウェブサイトを多言語展開する場合、思わぬところでアクセシビリティ対応が見落とされることがあります。制作 (ローカライズ作業) 時および品質チェック (QA) 時の備忘録として、注意すべき個所を挙げておきます。
表立って現われないテキストの翻訳
スクリーンリーダー向けの対応などで、表立って現われない (でも実は重要な) テキストが、ウェブページ上には多く含まれます。これらは翻訳またはローカライズをし忘れやすいので要注意です。
- 画像 (<img> 要素) の代替テキスト (alt 属性)
- アイコンフォントやセレクトメニュー (<select> 要素) などに付随する隠しラベル (aria-label 属性)
- CSS の「オフレフト」テクニックによって隠れているテキスト
- ページのタイトル (<title> 要素)
- <meta> 要素の description
なお、<table> 要素の summary 属性や <img> 要素の longdesc 属性も同様に要注意と言えそうですが、個人的には、これらの属性はなるべく使わず、目が見えるユーザーもブラウザ上で視覚的に認知できるように、表立ったテキストとして展開させるのがよいと考えます。
lang 属性の適切な設定
ウェブサイトの多言語展開においては、各言語版サイトごとに、それらのページの主たる言語の種類を正しく設定しておく必要があります。具体的には、以下のように HTML ソースコードに lang 属性を記述します。
- 英語版サイトのページであれば <html lang="en">
- 日本語版サイトのページであれば <html lang="ja">
- 中国語版サイトのページであれば <html lang="zh">
これは WCAG 2.0 のレベル「A」の達成基準ですが (達成基準 3.1.1)、よりアクセシブルに、レベル「AA」を満たすのであれば、主たる言語と異なる言語が部分的に用いられている箇所に対しても lang 属性を記述する必要があります (達成基準 3.1.2)。
非英語版ページにおける英語ラベル
非英語版ページ、つまり <html> 要素の lang 属性値が "en" でないページの場合、部分的に英語のラベルが用いられている箇所があるかもしれません。その場合、当該要素には lang="en" を記述します。たとえば、以下のようなケースです。
- フッターなどでコピーライトが英語で表記されている
- ヘッダーやフッターなどに親サイトへのリンクがある (「Worldwide Site」「Global Site」といった具合にラベルが英語で表記されている)
言語切り替え/国選択のリンクラベル
多言語展開しているウェブサイトでは、言語切り替えのリンクが用意されていてそのラベルがローカル言語で表記されていたり、国選択のリンクが用意されていてそのラベルがローカル言語で表記されていたりすることがあると思います。そのような場合は、各ローカル言語ラベルを括る要素に対して以下のように lang 属性を記述します。
言語切り替えのリンク :
- <a href="..." lang="en">English</a>
- <a href="..." lang="fr">Français</a>
国選択のリンク :
- <a href="..." lang="zh-cn">中国</a>
- <a href="..." lang="ko">대한민국</a>
- <a href="..." lang="zh-tw">台灣</a>
- <a href="..." lang="en">Singapore</a>
このように lang 属性を細かく (適切に) 設定しておくことで、スクリーンリーダー利用時に各ラベルにフォーカスが当たった際、そのローカル言語に対応した音声合成エンジンによって (より自然な発音で) 読み上げられることが期待できます。
なお、実際に音声読み上げを検証するには、スクリーンリーダーごとに、各ローカル言語に対応した音声合成エンジンをインストールしておく必要があります。iOS 機器 (iPhone や iPad) をお持ちでしたら、VoiceOver は初期状態で様々なローカル言語に対応した音声合成エンジンが用意されている (ウェブページ上の lang 属性の設定に応じて自動的に音声合成エンジンが切り替わってくれる) ので、手軽に試すことができます。