ウェブアクセシビリティ基準における「パーツの言語」は、ページ内のテキストやコンテンツの言語が適切に指定されていることを求める基準です。多言語対応が必要なウェブサイトにおいては、ユーザーがスムーズに情報を理解できるようにするため、コンテンツごとの言語設定が不可欠です。この基準に従うことで、特にスクリーンリーダーのユーザーが正しい言語でコンテンツを読み上げられるようになり、アクセシビリティが向上します。
「パーツの言語」の重要性
異なる言語が混在するウェブサイトやコンテンツで言語指定が適切に行われていない場合、以下のような問題が発生する可能性があります：
-
スクリーンリーダーが誤った言語で読み上げる
スクリーンリーダーは、言語設定に基づいて発音方法を切り替えますが、言語指定がないと、正しく読み上げられない場合があります。 -
ユーザーの混乱や理解度の低下
言語が正しく設定されていないと、特に多言語話者にとっての理解が難しくなる可能性があります。 -
検索エンジンによる認識精度の低下
検索エンジンもコンテンツの言語設定を参照するため、言語が正しく指定されていないとSEOにも影響が出ることがあります。
「パーツの言語」を実現するための実装方法
1. ページ全体の言語を指定する
ページ全体の言語は、HTMLタグのlang属性で指定します。たとえば、日本語のウェブページであれば以下のように指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブアクセシビリティについて</title>
</head>
<body>
<!-- コンテンツ -->
</body>
</html>
- パーツごとに言語を切り替える ページ内に異なる言語のコンテンツが含まれる場合、該当する部分だけの言語を指定することで、ユーザーが自然に内容を理解しやすくなります。
例：以下のコードでは、日本語のページ内に英語の引用を挿入し、言語を英語に指定しています。
html コードをコピーする <p>以下は著名な英語のことわざです。</p> <blockquote lang=“en”>“Actions speak louder than words.”</blockquote> <p>意味：行動は言葉よりも雄弁である。</p> 3. 動的なコンテンツの言語設定 JavaScriptなどで動的に生成するコンテンツにも言語を適用しましょう。たとえば、JavaScriptで生成した要素にlang属性を設定する方法です。
javascript コードをコピーする const message = document.createElement(“p”); message.lang = “en”; // 言語を英語に設定 message.textContent = “This content is in English.”; document.body.appendChild(message); 4. 短いフレーズや単語に適切な言語設定を行う 文章中に短いフレーズや単語で他言語が混ざる場合でも、該当部分の言語を指定することで、支援技術が適切に対応します。
例：「インターネット」は英語の"Internet"として紹介される場合：
html コードをコピーする <p>インターネット (<span lang=“en”>Internet</span>) は、現代の情報社会に不可欠な技術です。</p> 「パーツの言語」実装時のチェックポイント 全体とパーツで言語が適切に指定されているか確認する ページ全体の言語が<html lang=“ja”>のように指定されているかを確認します。
スクリーンリーダーでのテスト 実際にスクリーンリーダーを使用して、多言語コンテンツが正しく読み上げられるかを確認します。
自動翻訳ツールの動作確認 言語指定が適切かどうかを確認するため、ブラウザの翻訳機能やツールでページを確認するのも効果的です。
まとめ 「パーツの言語」は、ウェブアクセシビリティを向上させるための重要な要素です。コンテンツごとに言語を正しく指定することで、視覚障害者や多言語ユーザーにも配慮したウェブサイトを提供することが可能になります。これにより、すべてのユーザーが情報にアクセスしやすく、理解しやすいウェブ体験を実現しましょう。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。