# 単語の間がばらばらに開いてしまう両端揃えの英文

Source: https://easeweb.dev/learn/text-blocks
Topics: 拡大表示、リフロー、文字間隔 > 文章の行が短く、間隔が広く、両端揃えでない (WCAG 1.4.8)
The fix: text-align: start で文章を片側にそろえ、単語の間のスペースをすべてフォント本来の幅に保ちます。または、両端揃えを残したまま、文章の上に両端揃えを解除するスイッチを置きます。片側にそろえる方法なら、すべての利用者に効き、スイッチを探してもらう必要もありません。
Test with: text layout, keyboard
References: https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html https://www.w3.org/TR/WCAG22/#visual-presentation https://www.w3.org/WAI/WCAG22/Techniques/failures/F88 https://www.w3.org/WAI/WCAG22/Techniques/css/C19 https://www.w3.org/WAI/WCAG22/Techniques/general/G172 https://www.w3.org/TR/jlreq/#necessity_for_line_adjustment https://github.com/w3c/wcag/issues/3336 https://developer.mozilla.org/en-US/docs/Web/CSS/text-align https://wptavern.com/wordpress-4-7-removes-the-underline-and-justify-buttons-from-the-editor

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

手作りの食器を売る店が、サイトでジャーナル（読みもの）を公開しています。海外の客に向けた英語版のページもあり、ここで取り上げるのは、その英語の記事です。記事のページは雑誌のようなデザインで、見出しはセリフ体、本文は両端揃えです。どの段落も左右の端がまっすぐそろった四角いかたまりになり、枠に合わせて文章を書いたデザインファイルの上では、整って見えます。店が求めたのも、この見た目です。

実際の文章は、そううまく収まりません。各行を両端に届かせるため、ブラウザーは単語の間のスペースを広げます。広げる量は行ごとに違います。「differences really」のように長い単語が数語だけの行では間隔が大きく開き、短い単語が多い次の行では狭くなります。大きく開いた間隔が上下の行で重なると、段落を縦に貫く白い筋になります。1行に7、8語しか入らないスマートフォンでは、短い単語ほどの幅のすき間が空く行もあります。

## 確認できる問題

達成基準1.4.8（視覚的提示）はレベルAAAです。テキストのブロックについて、次の5つを実現するメカニズムが利用できることを求めています。このジャーナルは、そのうち4つを満たしています。

- 文字色と背景色を利用者が選択できる。ジャーナルは両方の色を組にして指定しているため、ブラウザーの色の設定で、両方まとめて置き換えられます。
- 1行の幅が80字以内（中国語、日本語、韓国語は40字以内）。本文の幅は34emで約75字です。ウィンドウを狭めれば、本文も一緒に狭まります。
- 両端揃えにしない。ジャーナルが満たしていないのはここで、W3Cの失敗例F88が確かめるのもこの点です。
- 段落内の行送りが1.5倍以上で、段落の間隔が行送りの1.5倍以上。ジャーナルは行の高さを1.6（達成方法C21の例では1.5）にし、段落の間を1.5em空けています。段落の最終行と次の段落の最初の行は、上端どうしで3.1em離れ、解説書が目安とする単一行送りの250%を超えています。
- 支援技術なしで200%まで拡大しても、1行を読むのに横スクロールが要らない。サイズはem単位なので、本文は折り返されます。

3つ目の理由は、解説書に書かれています。両端揃えの文章は単語の間隔が不ぞろいになり、ページを縦に流れる「白い川」ができることがあります。逆に行が詰められると単語どうしが近づきすぎ、認知に障害のある人の中には、単語の切れ目を見つけにくくなる人がいます。CSSの `text-align: justify` は、各行の末尾に余った幅を、その行のスペースに分け合わせます。余る幅も、分け合うスペースの数も行ごとに違うため、同じ間隔の行は2つとありません。また、ブラウザーは `hyphens` で指定しない限り単語をハイフンで分割しないので、収まらない長い単語は丸ごと次の行に送られ、その行に最も大きな余りが残ります。

W3Cの失敗例F88は、まさにこれを判定するものです。一般的なブラウザーでページを開いて内容が両端揃えでないかを確かめ、両端揃えであれば、そのページは1.4.8を満たさないとしています。WCAG 2.2では、メカニズムはブラウザーが提供するものでもよく、コンテンツ自体が提供する必要はないという注記が加わりました。Firefoxのリーダービューのような閲覧モードは、実際に記事を独自のスタイルで組み直します。それでもW3CはF88を失敗例として残しており、Firefoxがリーダービューを出すのは、記事だと判定したページだけです。下の2つの修正は、どちらもページ自体で要件を満たすため、この点に左右されません。

## 利用者への影響

両端揃えの問題が最もひどくなるのは、行が短いときです。スマートフォン、写真の横の狭い段、拡大した文字では、1行に入るスペースが少なくなり、余りを分け合う先が減ります。両端揃えは、テーマの初期設定であることはまれで、多くは店の人が手で加えています。ShopifyのCommunityフォーラムには、Dawn、Prestige、Impulseの各テーマで商品説明やブログ記事を両端揃えにする方法を尋ねるスレッドがあり、回答はテーマのCSSに貼る `text-align: justify` のルールです。

## 自動チェックとAIの限界

axeには両端揃えの文章を検出するルールがなく、Lighthouseはaxeのルールを使っているため、どちらも報告しません。WAVEは「Justified text」というアラートとして示し、判断を人に委ねます。EaseWebの診断は、計算値の `text-align` が `justify` になっている、1文より長いテキストのブロックを `ew:justified-text` として報告します。両端揃えが標準である日本語、中国語、韓国語の文章は対象外です。両端揃えを解除するスイッチがページにあるかどうかは、どのチェックにも判断できないため、人が探して確かめます。デザインファイルのレビューでも、まず気づかれません。モックアップの文章は、ダミーテキストか、枠に合わせて書いたものであることが多いからです。`hyphens: auto` を加える修正は、最も広いすき間を狭めますが、文章は両端揃えのままなので、F88の判定では失敗のままです。

## 修正前：両端をそろえた記事

```html
<article class="article">
  <h1>Why every mug is a little different</h1>
  <div class="article-body">
    <p>Each mug starts as a lump of stoneware clay, thrown by hand on the wheel …</p>
    <p>Glazing is where the differences really show. …</p>
    …
  </div>
</article>
```

```css
.article {
  color: #2b2622;
  background: #fbf8f3;
}
.article-body {
  max-width: 34em;
  line-height: 1.6;
}
.article-body p {
  margin: 0 0 1.5em;
  text-align: justify;
}
```

- 各段落の最終行以外が両端に届くまで引き伸ばされ、単語の間のスペースが行ごとに違う幅になります。
- スマートフォンでは1行に数語しか入らず、短い単語ほどの幅のすき間が空く行があります。
- 両端揃えを解除する手段が、ページのどこにもありません。

## 修正後：文章を行頭側にそろえる

```html
<article class="article">
  <h1>Why every mug is a little different</h1>
  <div class="article-body">
    <p>Each mug starts as a lump of stoneware clay, thrown by hand on the wheel …</p>
    <p>Glazing is where the differences really show. …</p>
    …
  </div>
</article>
```

```css
.article {
  color: #2b2622;
  background: #fbf8f3;
}
.article-body {
  max-width: 34em;
  line-height: 1.6;
}
.article-body p {
  margin: 0 0 1.5em;
  text-align: start;
}
```

1. `text-align: justify` を `text-align: start` に変えます。どの行でも、どの画面幅でも、単語の間のスペースはフォント本来の幅に戻り、各段落の右端はそろわない形になります。

これで修正前の例は直り、1.4.8を満たします。もともとの本文の幅、間隔、色と合わせて、記事はページ自体で5つの要件をすべて満たします。本文の幅、書体、間隔はそのままで、なくなるのは右端の直線だけです。`start` は文章の書字方向に従うため、アラビア語のように右から左へ書く言語では、同じルールで右にそろいます。C19も右揃えを認めています。

## 修正後：両端揃えのまま、解除するスイッチを置く

```html
<article class="article">
  <h1>Why every mug is a little different</h1>
  <label class="text-setting">
    <input type="checkbox" id="left-align">
    Left-align text
  </label>
  <div class="article-body">
    <p>Each mug starts as a lump of stoneware clay, thrown by hand on the wheel …</p>
    <p>Glazing is where the differences really show. …</p>
    …
  </div>
</article>
```

```css
.article {
  color: #2b2622;
  background: #fbf8f3;
}
.article-body {
  max-width: 34em;
  line-height: 1.6;
}
.article-body p {
  margin: 0 0 1.5em;
  text-align: justify;
}
body:has(#left-align:checked) .article-body p {
  text-align: start;
}
```

1. 見出しと最初の段落の間に、「Left-align text」（左揃えで表示）というラベルのチェックボックスを置きます。W3Cの達成方法G172が求めるとおりページの最初のほうに置くので、読む人は文章より先にスイッチを目にします。
2. チェックが入っている間、すべての段落を `text-align: start` にするルールを加えます。何もしない人には両端の直線が残り、チェックを入れた瞬間に間隔がそろいます。

これで修正前の例は直り、スイッチによって1.4.8を満たします。G172が、見た目のために両端揃えを残すサイト向けに説明している方法です。ただし、これだけでは足りません。読む人は誰でもまず両端揃えの文章を目にし、スイッチに気づいて、その働きを理解する必要があります。また、このコードはページが変わると選択を忘れます。ページをまたいで保つには、数行のスクリプトで `localStorage` などに保存し、ページが描かれる前に適用して、読み込みのたびに文章が動かないようにします。

## どの方法を選ぶか

どちらも1.4.8を満たします。行頭側にそろえる方法は、スタイルシートの1語を変えるだけで、どのページでも、どの利用者に対しても要件を満たし、探すものも覚えておくものもありません。デザインが右端の直線をどうしても必要とするのでない限り、こちらを使ってください。スイッチは、印刷物の見た目を再現するサイトのように、描いたとおりの見た目を残せます。ただし、これだけでは足りません。デザイン、実装、テストの対象になるコントロールが1つ増えるうえ、スイッチが助けるはずの人が、まずスイッチを見つけなければなりません。

## 実装の判断

両端揃えは、テーマのスタイルシートだけでなく、手で書式を付けられる場所ならどこからでも入り込みます。テーマのカスタムCSS欄（`.rte p { text-align: justify !important; }`）、ページビルダーの配置ボタン、古いエディターが書き込んだ `align="justify"` 属性、インラインスタイルを探してください。WordPressは4.7で、ブラウザーの実装がまちまちで文章が読みにくくなることが多いという理由から、エディターのツールバーの両端揃えボタンを外しましたが、キーボードショートカットは使えるままで、ボタンを戻すプラグインもあります。

`hyphens: auto` は修正になりません。長い単語を行をまたいで分割できるようにするため、最も広いすき間は狭まりますが、文章は両端揃えのままで、F88が判定するのは両端揃えかどうかです。`text-align-last` が変えるのは、各段落の最終行だけです。

日本語、中国語、韓国語の文章は事情が異なります。W3Cの「日本語組版処理の要件」は、欧文組版のragged right（左揃え）にあたる方法は日本語組版、特に書籍の本文では一般に行われず、両端揃えが原則だと述べ、その調整には欧文の単語間だけでなく、行の中の多くの箇所を使うと説明しています。WCAG 2.2の策定中、W3Cの国際化グループが中国語と日本語についてこの点を指摘し、WCAG 2.2は1.4.8に注記を加えました。ある書記体系で使われない表示上の要素については、その書記体系のコンテンツは、その要素なしで適合できるというものです。そのため、両端揃えで組んだ日本語のページは、このガイドが扱う問題ではありません。問題になるのは、日本のサイトの英語版のページです。同じ `text-align: justify` が英単語の間のスペースを広げるため、両方の言語を1つのスタイルシートで出すサイトでは、`:lang(en)` などを使って英語の文章を `start` にそろえます。

例の記事は、ほかの4つの要件をすでに満たしています。それぞれが満たされない場合は、別のガイドで扱っています。利用者が自分のスタイルシートで行、文字、単語の間隔を広げる場合は「[文字の間隔を広げると切れる、ボタンのラベル](/ja/learn/text-spacing)」、文字を拡大すると横スクロールが必要になる段は「[狭い画面で横スクロールが出るページ](/ja/learn/reflow)」、読みにくい色は「[ブランドカラーや写真の上でコントラストが足りない文字](/ja/learn/text-contrast)」を参照してください。

## 修正の確認

1. 記事、商品説明、ヘルプ、規約など、段落のあるテンプレートを一般的なブラウザーで開き、各段落の右端を見る。右端はそろっておらず、単語の間のスペースがすべて同じ幅であること。
2. ウィンドウをスマートフォンの幅まで狭めるか、スマートフォンでページを開き、もう一度見る。前後の行のスペースより目立って広いすき間が空いた行がないこと。
3. ブラウザーの開発者ツールで、中国語、日本語、韓国語以外の言語の各段落について、`text-align` の計算値を確認する。`start` か `left`（右から左へ書く言語では `right`）で、`justify` でないこと。テーマのカスタムCSSとリッチテキストの内容を `justify` で検索する。
4. 両端揃えを残してスイッチを置いているサイトでは、ページの先頭からTabキーを押し、スイッチが文章より前にあって見えるラベルが付いていること、Spaceキーでオンにするとページのすべての段落の右端がそろわなくなることを確認する。続けて別のページを開き、選択が保たれているかを確認する。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。テーマ、記事のテンプレート、カスタムCSSを変えた際は、再度確認します。

## 制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。1.4.8はレベルAAAで、多くの方針が求めるAAを超える基準ですが、この要件を満たすのに必要なのは、CSSの1語だけです。このガイドが扱うのは両端揃えの要件だけで、例の記事は、行の高さ、本文の幅、色、相対的なサイズによって、ほかの4つを満たしています。コード中のクラス名は仮のものです。特定のリーダーモードやブラウザーの設定がこの基準を満たすとは主張していません。

## チェックツールに出るメッセージ

- WAVE: "Justified text"

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）