読みやすさのガイドライン

読みやすさのガイドライン

3.1.1 ページの言語 (レベル A)

ページの基本となる言語(日本語や英語など)をプログラムが判別できるように設定する

作成日: 2024.4.10 / 最終修正日: 2026.5.12

この達成基準は、ブラウザやスクリーンリーダー、自動翻訳ツールなどのプログラムが、そのページで使われている主要な言語を正確に処理できるようにすることを目的としています。言語が正しく設定されていないと、スクリーンリーダーが日本語の文章を無理やり英語の発音エンジンで読もうとして「アルファベットの羅列」のように発声してしまい、利用者が内容を理解しづらくなる問題が起こります。

実践すべきこと

ページ全体の言語の宣言
  • HTMLのルート要素である <html> タグに lang 属性を用いて、ページの主要な言語(日本語であれば ja、英語であれば en)を正しく指定する。

運用者への注意

多言語サイトやページ複製時のチェック
  • 英語ページのテンプレートを複製して日本語のページを作成した際などに、HTMLタグが lang="en" のまま残ってしまっていないかを定期的にチェックする。

開発者への注意

lang 属性の確実な実装
  • すべてのウェブページの <html> タグに、適切な lang 属性(例:<html lang="ja">)を含める。

今のWeb環境で気をつけたい点

  • 自動翻訳との関係: ブラウザや拡張の翻訳機能は、lang を含む情報を手がかりに、ソース言語の推定や翻訳の提案を行います。本文が日本語なのに lang="en" のままだと、英語ページと誤判定され、日本語利用者には不要な翻訳の案内が出ることがあります。
  • ページ内で言語が切り替わるとき: 3.1.1 はページ全体の主要言語(多くは <html lang>)を示すことが中心です。日本語ページのなかに英語の引用や見出しなど別言語の塊がある場合は、その範囲に lang を付けて区別します。長い別言語の段落などは、達成基準 3.1.2「一部分の言語」の対象になることが多いです。

参考リンク

解説書 達成基準 3.1.1: ページの言語

3.1.2 一部分の言語 (レベル AA)

ページ内で基本の言語とは異なる言語が使われている部分に、その言語を設定する

作成日: 2024.4.10 / 最終修正日: 2026.5.12

この達成基準は、ページ全体の言語(例:日本語)の中に、別の言語(例:英語の長文など)が混ざっている場合、その部分だけをブラウザやスクリーンリーダーが正しく処理・発音できるようにすることを目的としています。正しく設定されていないと、スクリーンリーダーが日本語の発音ルールのまま外国語を読み上げようとして、意味不明な音声になってしまいます。

実践すべきこと

言語の明示(タグ付け)
  • ページの主要言語以外で記述されているテキストのまとまりには、<span> や <p> などのタグに lang 属性を用いて、その部分の言語を明示する(例:<span lang="en">...</span>)。
例外の理解(設定が不要なケース)
  • 固有名詞(人名や企業名)、技術用語、すでにその言語の一部として定着している外来語などには、個別に lang 属性を設定する必要はない。

運用者への注意

定期的な確認と執筆ルールの整備
  • 新規ページやブログ記事などで、海外の文献を引用したり、外国語の挨拶文を掲載したりする際に、コンテンツ作成者が適切に言語属性を指定できる運用ルールになっているかを確認する。

開発者への注意

lang 属性の適切な適用
  • 主要言語以外で記述された部分がある場合、HTMLタグに lang 属性(英語なら lang="en"、中国語(簡体字)なら lang="zh-Hans" など)を適切に設定する。
CSSとHTMLの役割分担
  • 「英語の部分だけ欧文フォントを適用したい」という視覚的な目的だけで <span class="english-font"> のようにマークアップするのではなく、アクセシビリティの観点から lang="en" も併用する。

今のWeb環境で気をつけたい点

  • 外来語・固有名詞と lang: 日本語のページには「Web」「UI」や企業名のラテン表記など、アルファベットが混ざることが多いです。語句ごとに lang="en" を付けすぎると、読み上げが細かく切り替わりすぎてかえって聞き取りにくくなることがあります。日本語文のなかでそのまま読んでも意味が通じる短い外来語や固有名詞は、無理に lang を付けない運用も広く行われています。迷うときは解説書や支援技術での実聴を参考にします。
  • lang を付けた方がよい例: 英語の段落をそのまま引用する、外国語の挨拶やキャッチコピーを文として掲載するなど、別言語として発音・翻訳の切り替えが効く塊は、該当する要素に lang を指定するとよいです。長さや文脈によって要否が変わるため、コンテンツの性質に合わせて判断します。

参考リンク

解説書 達成基準 3.1.2: 一部分の言語

3.1.3 一般的ではない用語 (レベル AAA)

専門用語や難解な言葉、独自の言い回しには「意味の説明」を添える

作成日: 2024.4.10 / 最終修正日: 2026.5.27

この達成基準は、長い文章や抽象的な表現の理解に時間がかかる利用者、その言語を母語としない利用者、あるいはその分野の知識がない利用者が、文章を読んで迷わないようにすることを目的としています。特定の業界だけで使われる「専門用語」や、文字通りの意味ではない「慣用句(例:耳にタコができる)」、独自の「言葉遊び」などが使われている場合、それらが何を意味しているのかをすぐに見つけて理解できる仕組みを提供します。

実践すべきこと

用語の定義(意味)の提供
  • 一般的ではない用語、専門用語、慣用句、俗語などがテキストに含まれる場合、利用者がそのページ内で、その言葉の意味を確認できるようにする。

運用者への注意

「プレーンランゲージ」の推進と用語集の整備
  • コンテンツを執筆する際、読み手が容易に理解できる様式(プレーンランゲージ)を使うことを基本ルールとする。
  • どうしても専門用語を使う必要がある場合は、記事の末尾に注釈をつけるか、サイト内に「用語集」ページを作成してリンクを張る運用フローを構築する。

開発者への注意

HTMLタグと適切なUIの実装
  • 言葉の定義を示す際は、HTMLの <dfn>(定義語)タグや、定義リスト(<dl> <dt> <dd>)を適切にマークアップする。
  • ポインタ操作だけでなく、タッチ操作やキーボードのフォーカスでも意味の解説が表示される「アクセシブルなツールチップ」や、ページ内リンクを実装する。

今のWeb環境で気をつけたい点

  • レベルAAAの難易度と優先度: サイト内のあらゆる専門用語や慣用句を洗い出し、すべてに正確な解説テキストを用意することは、コンテンツ制作の負担が大きくなるため、この基準は「レベルAAA」に設定されています。まずは 3.1.1(ページの言語)などの基本的なマークアップから取り組むとよいですが、医療、法律、公的機関の手続きなど「正確な理解が利用者の権利や健康に直結するコンテンツ」においては、用語の解説や平易な言葉への言い換えが重要になります。
  • ツールチップの難しさ: 単語にポインタを合わせると意味が浮かび上がるツールチップは、タッチ操作やキーボード操作、音声読み上げでは内容を確認しにくい場合があります。用語の横に「?」アイコンのボタンを置き、選択すると開くアコーディオン形式にするか、ページ下部の注釈へリンクさせると、操作方法にかかわらず確認しやすくなります。

参考リンク

解説書 達成基準 3.1.3: 一般的ではない用語

3.1.4 略語 (レベル AAA)

「WHO」や「WCAG」などの略語には「何の略か」を展開して提示する

作成日: 2024.4.10 / 最終修正日: 2026.5.27

この達成基準は、略語や専門知識の理解に時間がかかる利用者や、その分野の知識がない利用者が、アルファベットの頭文字などの「略語」の意味を理解できずに文章から取り残されてしまうのを防ぐための基準です。また、スクリーンリーダー(音声読み上げ)が「WHO(ダブリュー・エイチ・オー)」を「フー(単語の誰)」と間違って発音してしまうような問題を解決する目的もあります。

実践すべきこと

略語の展開(フルスペルの提示)
  • ウェブページ内に略語が含まれる場合、その略語の「展開された形」、またはその意味を、利用者が容易に確認できる仕組みを提供する。

運用者への注意

初出時の「正式名称」の併記
  • 記事やコンテンツを執筆する際の基本的な運用として、「World Health Organization(以下、WHO)」のように、ページ内で最初にその略語が登場した際に正式名称を併記するルールを整える。

開発者への注意

<abbr> タグの適切な使用
  • HTMLの標準タグである <abbr title="World Health Organization">WHO</abbr> を使用して、プログラム的に略語の展開形を明示する。
  • ただし、標準の title 属性によるツールチップはタッチ画面やキーボード操作では表示されないため、必要に応じてフォーカス時にも展開形が表示されるCSSやJavaScriptの補助を追加する。

今のWeb環境で気をつけたい点

  • レベルAAAの難易度と優先度: 世の中には多くの略語が存在し、そのすべてに対して <abbr> タグを設定したり解説リンクを用意したりすることは難しい場合もあり、この基準は「レベルAAA」に設定されています。まずは 3.1.1(ページの言語)などの基本から取り組むとよいですが、IT、医療、金融、行政など「アルファベット3文字の略語(TLAs)」が多用される専門的なサイトにおいては、略語の展開や用語集の提供が、新しく訪れた人の理解を助けます。
  • スクリーンリーダーの読み上げの注意点: スクリーンリーダーは、アルファベットの並びを見ると「英単語としてそのまま読むか(例:NATO=ナトー)」「一文字ずつアルファベット読みするか(例:FBI=エフビーアイ)」を独自の辞書で自動判定していますが、間違えることがあります。音声読み上げを利用する人に正しい情報を伝えるためには、システム任せにせず、文章内で直接「世界保健機関(WHO)」と書くアプローチが有効です。

参考リンク

解説書 達成基準 3.1.4: 略語

3.1.5 読解レベル (レベル AAA)

専門的で難しい文章には、「読み手が容易に理解できる様式(プレーンランゲージ)」や要約を用意する

作成日: 2024.4.10 / 最終修正日: 2026.5.27

この達成基準は、長い文章を読んだり複雑な内容を理解したりすることが苦手な利用者、あるいはその言語を母語としない利用者が、難しい文章を前にして理解を諦めてしまうのを防ぐことを目的としています。文章の内容を把握するために高度な読解力や専門知識が必要な場合、誰もが情報にアクセスできるようにサポートする代替手段を求めています。

実践すべきこと

読みやすい代替コンテンツの提供
  • 文章の読解レベルが高度で専門的すぎる場合、以下のいずれかを提供する。
    • その文章自体を、プレーンランゲージで書き直す。
    • 元の専門的な文章はそのまま残し、そのテキストの「要約版」や「図解・イラスト」などの理解を助ける追加コンテンツを添える。

運用者への注意

「プレーンランゲージ」の採用
  • 自治体の情報や、医療、金融などの重要な案内を作成する際は、最初から難しい漢字や専門用語を減らし、専門知識がなくても伝わる平易な文章を心がける(ルビを振ることも有効です)。
  • どうしても法律や規約などの難解な原文を掲載する必要がある場合は、ページの冒頭に「この記事の簡単なまとめ」を箇条書きで記載する運用フローを構築する。

開発者への注意

補助コンテンツへの導線設計
  • 「専門用語版」と「やさしい解説版」を利用者がボタン一つで切り替えられるようなUIを実装したり、CMS側で要約文や図解を簡単に入力・表示できる専用の入力フィールドを設計したりする。

今のWeb環境で気をつけたい点

  • レベルAAAの難易度と優先度: サイト内のすべての複雑なテキストに対して、書き直しを行ったり要約版を別途作成したりすることは、コンテンツ制作の負担が大きくなるため、この基準は「レベルAAA」に設定されています。まずは 3.1.3(一般的ではない用語)の解説を用意するなどから取り組むとよいですが、生命や財産に関わる公的機関のサイト、災害時の緊急案内、または基礎的な読解力で理解できる情報が必要な人や、その言語を母語としない人が利用するポータルサイトにおいては、プレーンランゲージの提供が社会インフラとして重要になります。
  • 生成AIによる「要約」の作成: これまで非常にコストが高かった「複雑な文章の要約版を作る」「平易な言葉に書き直す」という作業は、生成AIの登場により、劇的に低いコストで実行できるようになりました。コンテンツ制作のワークフローにAIの要約アシストを組み込むことで、この高度なレベルAAAの達成基準を満たすハードルは下がりつつあります。

参考リンク

解説書 達成基準 3.1.5: 読解レベル

3.1.6 発音 (レベル AAA)

同じ綴りでも読み方によって意味が変わる言葉に、ふりがなや正しい発音のガイドをつける

作成日: 2024.4.10 / 最終修正日: 2026.5.27

この達成基準は、文字を読んだり文脈を理解したりするのが苦手な利用者、その言語を母語としない利用者、スクリーンリーダーを利用する人が、単語を読み間違えて文章の意味を誤解してしまうのを防ぐことを目的としています。日本語では「角(かど・つの)」や「十分(じゅっぷん・じゅうぶん)」「1日(ついたち・いちにち)」のように、同じ漢字でも読み方によって違う意味になる言葉が多いため、正しい発音を示すことが理解の助けになります。

実践すべきこと

文脈に依存する単語への発音ガイドの提供
  • 前後の文脈がわからないと正しい発音が確定しない単語や、特殊な読み方をする言葉に対して、ルビを振るなどして正しい読み方を確認できる仕組みを提供する。

運用者への注意

「誤読されにくい言葉」への言い換え
  • 記事を執筆する際、そもそも誤読されやすい漢字を使わず、ひらがなに開いたり別の言葉に言い換えたりする(例:「十分待つ」→「じゅうぶん待つ」、「10分待つ」など)といった、工夫を心がける。
  • 難読漢字や、独特な読み方をする人名・地名が登場する場合は、初出時にかっこ書きなどでふりがなを併記する。

開発者への注意

HTMLの <ruby> タグの適切な使用
  • 単語にふりがなを振る際は、見た目だけの工夫ではなく、HTMLの標準タグである <ruby> と <rt> を使用して、プログラム的にも発音が伝わるようにマークアップする。

今のWeb環境で気をつけたい点

  • レベルAAAの難易度と優先度: サイト内のすべての単語の文脈を解析し、発音ガイドやルビを漏れなく設定することは、コンテンツ運用の負担が大きいため、「レベルAAA」に設定されています。まずは 3.1.1(ページの言語)を正しく設定してブラウザやスクリーンリーダーの基本辞書を機能させることから取り組むとよいですが、人名や地名が多く登場する自治体サイトや、基礎的な読解力で理解できる情報が必要な人、その言語を母語としない人が利用するコンテンツ、読み違いが重大なトラブルに繋がる契約書などにおいては、ふりがなの提供が効果的なサポートになります。
  • スクリーンリーダー特有の悩み: 英語などの表音文字と違い、日本語の漢字はスクリーンリーダーの自動読み上げが苦手とする領域です。近年は精度が向上していますが、それでも読み違いは起こります。ルビによる技術的なサポートと、「読み間違えにくい言葉選び」の両輪で対応することが、現代のアクセシビリティにおける実践的な方法です。

参考リンク

解説書 達成基準 3.1.6: 発音

目次へ戻る

公開・販売・運用のことで困ったら、まずは「ましじめ」へ

ウェブサイトの制作や改善、AI活用、アクセシビリティ、
商品やサービスの見せ方まで、何から手をつければよいか分からない段階でもご相談ください。
自社事業の経験と専門的な技術力を活かし、無理なく続けられる形をご提案します。