WCAG 1.4.12: テキストの間隔

WCAG 1.4.12 は、ユーザーが行の高さ、文字間隔、単語間隔、段落後の間隔といったテキストのスペーシングのプロパティを特定の最小値に上書きしたときに、コンテンツや機能が失われないことを求めています。この基準は、効果的に読むためにカスタムのスペーシングに依存しているディスレクシア、ロービジョン、認知障害のあるユーザーにとって不可欠です。

この規定が意味すること

WCAG 1.4.12 Text Spacing はガイドライン 1.4（判別可能）に属し、非常に特定の問題を対象としています。多くの読字障害、ロービジョン、認知障害のある人は、コンテンツを読みやすくするために、ウェブページのデフォルトのテキスト間隔を上書きする必要があります。行間を広げたときにサイトのレイアウトが崩れ、テキストが切り取られたり、ボタンが重なったり、フォームラベルが消えたり、コンテンツに到達できなくなったりする場合、そのサイトはこの達成基準に不適合となります。

この達成基準は、同時に次の最小値に設定されたときにも機能し続けなければならない 4 つの間隔プロパティを定義しています。

行の高さ（行間）： 要素のフォントサイズの少なくとも 1.5 倍。
文字間隔（トラッキング）： 要素のフォントサイズの少なくとも 0.12 倍。
単語間隔： 要素のフォントサイズの少なくとも 0.16 倍。
段落後の間隔： 要素のフォントサイズの少なくとも 2 倍。

ページは、これら 4 つすべての上書きが適用された後でも、ユーザーがすべてのテキストを読み、すべてのインタラクティブなコントロールを操作し、320 CSS ピクセル幅のビューポートで水平方向のスクロールなしにすべてのページコンテンツにアクセスでき、テキストが切り取られたり省略されたりせず、コンテンツが読めない・使えないほど重なり合うこともない場合、この達成基準に適合します。

一方、これらの上書きを適用した結果、次のいずれかが発生する場合、ページは不適合となります。テキストが固定高さと overflow: hidden を持つコンテナーによって切り取られる、インタラクティブなラベルやボタンテキストが消える、ドロップダウンメニューやツールチップが本文コンテンツと使えない形で重なり合う、あるいはコンテンツの一部が恒久的にアクセス不能になる、などです。

重要なのは、この達成基準は、あなた自身がこれらの間隔値を設定することを要求していないという点です。要求されているのは、ユーザー（またはその支援技術、ブラウザー拡張機能、ユーザースタイルシート）がこれらの上書きを適用したときに、レイアウトが崩れないことだけです。これらの間隔値はテストのための閾値であり、デザイン要件ではありません。

明示的な例外が 1 つあります。特定の視覚的な表現が伝達される情報にとって本質的であるコンポーネント、たとえばロゴタイプ、SVG でレンダリングされた楽譜、CAPTCHA 画像などは除外されます。ただし、この例外は範囲が狭く、ナビゲーションメニューやカードコンポーネントを一括して除外する口実として使うべきではありません。

この達成基準は、見出し、段落、ラベル、ボタンテキスト、プレースホルダーテキスト、リスト項目、表セル、ナビゲーションリンクなど、CSS を使ってブラウザー内でレンダリングされるすべてのテキストコンテンツに適用されます。CSS の間隔上書きの影響を受けない画像や canvas 要素内でレンダリングされるテキストには適用されません。

なぜ重要なのか

テキストの間隔は、幅広い障害や読字プロファイルを持つ人々に直接影響します。世界保健機関によると、世界で約 22 億人が何らかの視覚障害または失明を抱えており、その多くがコンテンツを読みやすくするためにブラウザーのズームやカスタムスタイルシートを使用しています。視覚障害にとどまらず、世界人口の推定 15～20% はディスレクシア（読字障害）を抱えており、この状態に対しては文字間隔、単語間隔、行の高さを増やすことが有効な可読性向上策であることが、学術誌 Annals of Dyslexia に掲載された研究を含むエビデンスによって裏付けられています。

ADHD や情報処理の困難などの認知障害があるユーザーにとって、詰まったテキストの間隔は、行を追ったり個々の単語を区別したりすることを難しくし、読書の認知負荷を高めます。こうしたユーザーは、Readability Bookmarklet や Stylus のようなブラウザー拡張機能、あるいはすべての訪問サイトにカスタム間隔を適用するプラットフォームレベルのアクセシビリティ設定を頻繁にインストールしています。

具体的なシナリオを考えてみましょう。ディスレクシアのある大学生が、試験前に返品ポリシーを確認するため、トルコの EC プラットフォームを訪れます。彼女はブラウザー拡張機能を使っており、行の高さを 1.7、文字間隔を 0.14em に全体設定しています。商品詳細ページでは、返品ポリシーのテキストが、height: 120px; overflow: hidden; というスタイルの固定高さの <div> 内に配置されています。カスタム間隔が有効な状態では、最初の 2 行しか表示されず、残りを表示する仕組みはありません。彼女はタスクを完了できず、そのプラットフォームへの信頼を失います。これはまさに、WCAG 1.4.12 が防ぐことを目的としている不適合例です。

障害者アクセスを超えて、副次的なメリットもあります。間隔に柔軟でレイアウトが崩れにくいデザインは、国際市場全般においても堅牢になりがちです。たとえばトルコ語のテキストは、膠着的な形態論のために長い語形を含むことが多く、間隔の変化に対応できないレイアウトは、長い文字列でも同様に崩れやすい傾向があります。アクセシブルなレイアウトは SEO にも間接的に寄与します。読みやすくアクセスしやすいコンテンツは、直帰率が低くエンゲージメント指標が良好になりやすく、検索エンジンはこれらをランキングに反映します。

テスト方法

Text Spacing Bookmarklet をインストールする。 Steve Faulkner の Text Spacing Bookmarklet ページ（W3C の Understanding 文書経由、または「text spacing bookmarklet WCAG」でのウェブ検索でアクセス可能）に移動します。ブックマークレットをブラウザーのブックマークバーにドラッグします。あるいは、ブックマークを手動で作成し、ブックマークレットの JavaScript を URL として貼り付けます。
テスト対象のページを開く。 ブラウザーのデフォルトズームレベル（100%）でページを開きます。評価したいページまたはコンポーネント、たとえば商品一覧ページ、チェックアウトフォーム、ナビゲーションメニューなどに移動します。
ブックマークレットを有効にする。 ブックマークレットをクリックします。これにより、ページ全体に対して line-height: 1.5 !important、letter-spacing: 0.12em !important、word-spacing: 0.16em !important を設定し、p の margin-bottom を 2em !important に設定する CSS が注入されます。
ページ全体を目視で確認する。 すべてのコンテンツ領域をスクロールします。コンテナーの下端でテキストが切り取られていないか、ボタンラベルやリンクテキストが消えたり一部が隠れたりしていないか、ナビゲーションメニューやドロップダウンで項目が重なっていないか、フォームフィールドでプレースホルダーやラベルテキストが切り取られていないか、モーダルダイアログやツールチップでコンテンツがコンテナー境界からはみ出していないかを確認します。
インタラクティブ要素を操作する。 すべてのフォーカス可能要素を Tab キーで移動し、ドロップダウンを開き、モーダルを開き、フォームを送信します。すべてのインタラクティブコントロールが引き続き操作可能であり、適用された間隔のもとでも可視ラベルが完全に読めることを確認します。
機能的な欠落がないかスクリーンリーダーでテストする。 ブックマークレットを有効にしたまま、NVDA と Firefox、または JAWS と Chrome を使って、見出し、ランドマーク、インタラクティブ要素単位でページをナビゲートします。読み上げ順序と読み上げ内容が、視覚ユーザーが目にするものと一致していることを確認します。Apple プラットフォームをカバーするために、macOS または iOS 上の Safari では VoiceOver を使用します。
320px のビューポート幅でテストする。 ブラウザーウィンドウを 320 CSS ピクセル幅にリサイズするか、ブラウザーの DevTools のレスポンシブモードを使用します。ブックマークレットを再度有効にします。ビューポート幅が小さくなり間隔が増えた状態の組み合わせでも、テキストが切り取られず、水平方向のスクロールなしにコンテンツにアクセスできることを確認します。
不適合を記録する。 不適合が見つかった場合はそれぞれについて、要素タイプ、CSS クラスまたは ID、不適合の原因となる特定の間隔プロパティ、ブックマークレット適用前後のスクリーンショットを記録します。

修正方法

固定高さコンテナーによるテキストの切り取り — 不適切な例

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

固定高さコンテナーによるテキストの切り取り — 適切な例

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

固定高さボタンによるラベルの切り取り — 不適切な例

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

固定高さボタンによるラベルの切り取り — 適切な例

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

スクロール不能なツールチップやドロップダウンのはみ出し — 不適切な例

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

スクロール不能なツールチップやドロップダウンのはみ出し — 適切な例

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

段落間隔によるカードレイアウトの崩れ — 不適切な例

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

段落間隔によるカードレイアウトの崩れ — 適切な例

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

よくある間違い

テキストコンテナーに height を使い、min-height を使わない。 テキストを含む要素に固定の height を設定すると、ユーザーが行の高さや文字間隔を増やした途端にテキストが切り取られます。テキストを含むコンテナーの固定高さはすべて min-height に置き換え、コンテナーが成長できるようにします。
段落テキストを保持するコンテナーに overflow: hidden を設定する。 これは 1.4.12 の不適合の最も一般的な原因です。隠しオーバーフローは、間隔が増えてテキストが縦方向に拡張されたときにテキストを切り取ります。デザインの文脈に応じて overflow: visible または overflow: auto を使用します。
ボタンやリンクラベルに対して、コンテナーの柔軟性が不十分なまま white-space: nowrap を使用する。 文字間隔が増えると、nowrap のテキストは親要素からはみ出したり、特に固定幅のナビゲーション項目で切り取られたりする可能性があります。
固定高さのカード内でフッターやアクション要素を絶対配置する。 間隔の上書きによってカードのコンテンツが増えたとき、カード下部に絶対配置された要素がテキストと重なります。代わりに flexbox のカラムレイアウトを使用します。
展開状態の折りたたみセクションに max-height と overflow: hidden を適用する。 ピクセル単位の計測に基づいて計算された max-height 値まで展開するアニメーション付きアコーディオンは、間隔が上書きされたとき、完全に開いていてもそのピクセル境界でテキストを切り取ります。
CSS の line-clamp（webkit-line-clamp）を、全文を展開するための可視の仕組みなしに使用する。 テキストを固定行数にクランプすること自体は、全文を表示するための明確にラベル付けされたキーボード操作可能なコントロールがある場合に限り許容されます。展開の仕組みなしにクランプすることは 1.4.12 に不適合です。
JavaScript に依存して、要素の高さをピクセル単位で動的に設定する。 要素の高さを測定し、そのピクセル値をインラインスタイルとしてハードコードするスクリプトは、ユーザーの間隔上書きを無視するサイズにコンテナーを固定してしまいます。固有のサイズ指定を使用し、レイアウトは CSS に任せます。
自動アクセシビリティスキャンが 1.4.12 の不適合をすべて検出してくれると想定する。 Text Spacing Bookmarklet を実行せずに axe や Lighthouse のみに依存しているチームは、レイアウトに起因する間隔の不適合をすべて見逃すことになります。この達成基準に対しては、ブックマークレットを用いた手動テストが必須です。
ナビゲーションメニューやメガメニューをブックマークレットでテストしない。 ナビゲーションコンポーネントは、洗練された見た目を作るために固定ピクセル高さと overflow hidden で構築されることがよくあります。また、間隔が増えることでメニュー項目が折り返されて切り取られるため、1.4.12 で最も不適合になりやすいコンポーネントの一つでもあります。
間隔の値をテスト閾値ではなくデザイン要件として扱う。 一部のチームは 1.4.12 に対応するために、デフォルトスタイルを閾値の値に合わせて更新しますが、これは不要であり、デザイナーの意図と衝突する可能性があります。この達成基準が要求しているのは、これらの値が適用されたときにレイアウトが崩れないことだけであり、それらをデフォルトにすることではありません。

トルコのアクセシビリティ規制との関係

WCAG 1.4.12 Text Spacing は、トルコで整備が進む法的なアクセシビリティ枠組みに直接関係しています。最近の最も重要な動きは、2025 年 6 月 21 日付官報第 32933 号で公布された大統領通達 2025/10 です。この通達は、幅広い組織に対して、ウェブプレゼンスおよびモバイルアプリケーション全体でデジタルアクセシビリティを確保する拘束力のある義務を定めています。

この通達は、広範な主体を対象としています。あらゆるレベルの政府機関・公的機関は遵守が求められます。対象となる民間セクターには、EC プラットフォーム、銀行・金融機関、病院・医療提供者、20 万人以上の加入者を持つ通信会社、旅行代理店、民間輸送会社、国民教育省（MoNE）に認可された私立学校などが含まれます。これらの組織は、通達に基づく義務の一環として、1.4.12 を含む WCAG レベル AA への適合を満たすことが求められています。

レベル AA への適合は、家族・社会サービス省（Aile ve Sosyal Hizmetler Bakanlığı）が発行するアクセシビリティロゴ（Erişilebilirlik Logosu） を取得するための前提条件でもあります。このロゴは、特に障害のあるユーザーに対し、そのデジタルプロダクトが監査を受け、要求されるアクセシビリティ基準を満たしていることを示します。視覚、認知、読字の障害を含め、数百万人と推計されるトルコの障害当事者コミュニティにサービスを提供する組織にとって、このロゴは評判面でも規制面でも重要な意味を持ちます。

実務的には、overflow: hidden を伴う固定高さの商品説明コンテナーを使用しているトルコの EC プラットフォームや、ブラウザー拡張機能や OS のアクセシビリティ設定を通じてユーザーが間隔の上書きを行った際にナビゲーションメニューがテキストを切り取ってしまう政府ポータルは、ユーザーに不利益を与えているだけでなく、2025/10 通達で定められた義務に違反している可能性があります。Text Spacing の不適合は、カスタム間隔ツールに依存するディスレクシアやロービジョンのトルコ人ユーザー、そして OS のテキストサイズ設定によって間隔上書きと同様のレイアウト不安定が引き起こされうるモバイルデバイスで政府・商業サービスにアクセスするユーザーにとって、特に関連性が高い問題です。

Erişilebilirlik Logosu の取得を目指す組織は、自動スキャンやスクリーンリーダーテストと並行して、Text Spacing Bookmarklet を用いた手動のテキスト間隔監査をアクセシビリティ監査プロセスの必須ステップとして組み込むべきです。1.4.12 の不適合を是正すること、具体的には固定高さを min-height に置き換えること、テキストコンテナーから不要な overflow: hidden を取り除くこと、柔軟な CSS レイアウト技法を採用することは、一般的に大きなデザイン変更を伴わずに実現可能であり、あらゆるトルコのデジタルサービスのアクセシビリティを高める、費用対効果の高い改善策です。

出典と参考資料

AWCAG 1.1.1: 非テキストコンテンツ AWCAG 1.2.1: 音声のみおよび映像のみ（事前録画）AWCAG 1.2.2: キャプション（事前録画）