食器店のジャーナルが英語の記事を両端揃えにしているため、ブラウザーが単語の間のスペースを行ごとに違う幅に広げ、スマートフォンでは特に大きなすき間が空いてしまう
text-align: justify 読字障害など読むことに困難のある人が、単語の間に不ぞろいなすき間が空いた記事を、目で追いにくくなる
手作りの食器を売る店が、サイトでジャーナル（読みもの）を公開しています。海外の客に向けた英語版のページもあり、ここで取り上げるのは、その英語の記事です。記事のページは雑誌のようなデザインで、見出しはセリフ体、本文は両端揃えです。どの段落も左右の端がまっすぐそろった四角いかたまりになり、枠に合わせて文章を書いたデザインファイルの上では、整って見えます。店が求めたのも、この見た目です。
実際の文章は、そううまく収まりません。各行を両端に届かせるため、ブラウザーは単語の間のスペースを広げます。広げる量は行ごとに違います。「differences really」のように長い単語が数語だけの行では間隔が大きく開き、短い単語が多い次の行では狭くなります。大きく開いた間隔が上下の行で重なると、段落を縦に貫く白い筋になります。1行に7、8語しか入らないスマートフォンでは、短い単語ほどの幅のすき間が空く行もあります。
達成基準1.4.8（視覚的提示）はレベルAAAです。テキストのブロックについて、次の5つを実現するメカニズムが利用できることを求めています。このジャーナルは、そのうち4つを満たしています。
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 のルールです。
10グループ中2グループに影響
axeには両端揃えの文章を検出するルールがなく、Lighthouseはaxeのルールを使っているため、どちらも報告しません。WAVEは「Justified text」というアラートとして示し、判断を人に委ねます。EaseWebの診断は、計算値の text-align が justify になっている、1文より長いテキストのブロックを ew:justified-text として報告します。両端揃えが標準である日本語、中国語、韓国語の文章は対象外です。両端揃えを解除するスイッチがページにあるかどうかは、どのチェックにも判断できないため、人が探して確かめます。デザインファイルのレビューでも、まず気づかれません。モックアップの文章は、ダミーテキストか、枠に合わせて書いたものであることが多いからです。hyphens: auto を加える修正は、最も広いすき間を狭めますが、文章は両端揃えのままなので、F88の判定では失敗のままです。
チェックツールに出るメッセージ
スマートフォンの幅で記事を読み、それぞれの修正を適用して、もう一度読んでみましょう
記事はサイトの英語版のページです。各行の単語の間隔と、広い間隔が段落を縦に貫いている箇所を見てください。続けてそれぞれの修正を適用します。2つ目の修正では、記事の上の「Left-align text」にチェックを入れます。
問題あり 修正できますか？
Each mug starts as a lump of stoneware clay, thrown by hand on the wheel, so no two come out quite the same height. We trim the foot once the clay is leather-hard, then leave the mugs to dry slowly under plastic for about a week.
単語の間隔を均一に保つ
<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>文章を行頭側にそろえる
<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>text-align: justify を text-align: start に変えます。どの行でも、どの画面幅でも、単語の間のスペースはフォント本来の幅に戻り、各段落の右端はそろわない形になります。これで修正前の例は直り、1.4.8を満たします。もともとの本文の幅、間隔、色と合わせて、記事はページ自体で5つの要件をすべて満たします。本文の幅、書体、間隔はそのままで、なくなるのは右端の直線だけです。start は文章の書字方向に従うため、アラビア語のように右から左へ書く言語では、同じルールで右にそろいます。C19も右揃えを認めています。
どちらも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つの要件をすでに満たしています。それぞれが満たされない場合は、別のガイドで扱っています。利用者が自分のスタイルシートで行、文字、単語の間隔を広げる場合は「文字の間隔を広げると切れる、ボタンのラベル」、文字を拡大すると横スクロールが必要になる段は「狭い画面で横スクロールが出るページ」、読みにくい色は「ブランドカラーや写真の上でコントラストが足りない文字」を参照してください。
落ち着いた紙面に、両端の直線はいらない
同じ記事の組み方をさらに2通りと、代わりに選ばれがちな印刷物風の組み方を示します。色の見本も押してみてください。どの色でも、文章の右端はそろいません。
Glazing is where the differences really show. Our speckled oatmeal glaze breaks over the rims and handles, turning darker wherever it runs thin.
In the kiln, the iron in the clay bleeds through as small brown freckles.
Glazing is where the differences really show. Our speckled oatmeal glaze breaks over the rims and handles, turning darker wherever it runs thin.
In the kiln, the iron in the clay bleeds through as small brown freckles.
Glazing is where the differences really show. Our speckled oatmeal glaze breaks over the rims and handles, turning darker wherever it runs thin.
In the kiln, the iron in the clay bleeds through as small brown freckles.
4項目、マウス不要
確認方法： 文字組みの確認、キーボード
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。テーマ、記事のテンプレート、カスタムCSSを変えた際は、再度確認します。
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。1.4.8はレベルAAAで、多くの方針が求めるAAを超える基準ですが、この要件を満たすのに必要なのは、CSSの1語だけです。このガイドが扱うのは両端揃えの要件だけで、例の記事は、行の高さ、本文の幅、色、相対的なサイズによって、ほかの4つを満たしています。コード中のクラス名は仮のものです。特定のリーダーモードやブラウザーの設定がこの基準を満たすとは主張していません。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
EaseWebのサービス
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。