text-spacing-content-loss

ユーザーがテキストの間隔を広げても、テキストは読める状態を保ちます

automaticWCAG 1.4.12 (AA)確度：medium重大度：seriousperceivable

ブラウザーでWCAG 1.4.12のテキストの間隔を適用し、切り取られたり重なったりするテキストがないことを確認します。また、!importantで間隔を強制するスタイルシートのルールについて確認を求めます。

適用範囲：表示されているテキストがあるページに適用されます。コンテンツの欠落を調べるにはレイアウト（ブラウザー）が必要で、レイアウトがない場合はスタイルシートだけを読み取ります。

期待される結果：WCAG 1.4.12：行の高さをフォントサイズの1.5倍、段落の後の間隔を2倍、文字の間隔を0.12倍、単語の間隔を0.16倍にしても、コンテンツや機能が失われないこと。

ブラウザーでは、間隔をページ自身のものより優先されるスタイルシートとして適用し（インラインの!importantは除きます。それはavoid-inline-spacingが報告します）、テキストの各行を、行を切り取るボックスに対して前後で計測します。対象となるのは、包含ブロックの連鎖上でoverflow: hiddenまたはclip、あるいはcontain: paintを持つボックスと、ページがスクロールさせない軸でのビューポート、あるいはページと一緒にスクロールしない固定ボックス内のテキストにとってのビューポートです。内側にあった行が少なくとも半分外に出た（高さの半分、または横方向に0.5em）場合は不合格です。コンテナーがそのテキストを切り取っています（TEXT_CLIPPED）。それより少しだけ押し出された行は確認を求め（TEXT_CLIPPED_PARTLY）、以前は重なっていなかったほかのテキストと重なるようになったテキストも同様です（TEXT_OVERLAPS）。いつまでも繰り返すアニメーションで動くテキスト（ティッカー）は、どれだけ外に出たかにかかわらず確認を求めます（TEXT_CLIPPED_MOVING）。いずれにせよ端を通過するうえ、1つのフレームからは内容が失われているかどうか判断できないためです。ページがスクロールロックされている場合、つまりすでにビューポートの外に内容があるのにビューポートの両方の軸が隠されている場合（Cookieバナーの背後など）は、間隔によってビューポートの外へ移動したテキストについて確認を求めます（VIEWPORT_SCROLL_LOCKED）。ロックは通常一時的な状態であり、エンジンはその先を見ることができないためです。<marquee>内のテキストは対象外です。ブラウザーはこれをWeb Animations APIの外で動かすため、エンジンは止めておくことができず、検出結果がスキャンを実行した時点によって変わってしまうからです。マーキー自体については、deprecated-elements-not-usedが確認を求めます（2.2.2）。間隔を適用する前からボックスがすでに切り取っていたテキスト（高さを固定した抜粋）は、間隔によって、それまで完全に表示していた行が切り取られる場合に確認を求めます（TEXT_CLIPPED_FURTHER）。抜粋は意図的に切り取られていますが、表示される内容が減るためです。line-clampのように行に合わせて伸びるボックスは、同じ数の行を表示するため対象にしません。
どの環境でも、line-height、letter-spacing、word-spacingを!importantでこれらの値より小さく設定するスタイルシートのルールについて確認を求めます（STYLESHEET_IMPORTANT）。ページに独自のスタイルシートを追加するツールはそれを上書きできませんが、ユーザースタイルシートなら上書きできます。フォントサイズに対する相対値は宣言されたとおりに読み、算出値は、ブラウザーが長さを報告するときの丸めの範囲内でその値を満たせば足りるとみなします。そのため、ちょうど最小値を設定するルールについては確認を求めません。
間隔は<style>要素で適用します。ページのContent Security Policyがそれを妨げる場合は、文書が採用するスタイルシートとして適用します。どちらも適用できない場合は、計測せずにページについて確認を求めます（SPACING_NOT_APPLIED）。合格にすることはありません。

レイアウトがなく、そのようなルールもない場合、このルールはdata.reason: 'noLayout'付きでnotApplicableになります。

スキャンの範囲（contextSelector）内にあり、除外されていない（excludeSelectors）テキストだけを判定します。範囲内のテキストが重なる可能性があるため、ページのほかの場所のテキストも計測はします。モーダルダイアログが開いている間は、その背後のページは完全に対象外になります。ブラウザーがそのページをinertにし、スキャンはダイアログを判定します。
マージン（overflow-px）：クリップするボックスが完全に収めているテキストのうち、切り取られる寸前まで最も近づいた行です。valueはボックスの端をどれだけ越えているか（まだ内側にある間は負の値）で、2pxと比較されます。これを越えると行は部分的に切り取られます（最初の検出結果）。どの端か、どのテキストかはcontext.axisとcontext.textが示します。計測するのは、間隔を広げるとテキストが伸びる側、つまりインライン方向の終端（右、右から左に書くテキストでは左）と下端です。始端は、行がそこを越えた場合にだけ数えます。間隔を広げることでボックスが伸びた軸（高さがautoのブロック）は内容に合わせて伸びるため対象外で、縦書きのテキストにはマージンがありません。繰り返すアニメーションで動くテキスト（ティッカー）は、その位置がアニメーションを止めた時点によって変わるため対象外です。ほかのテキストを切り取っているボックスも対象外です。それは検出結果になります。限度から8px以内（端の6px内側から）の行だけを近いとみなすため、ボックスのより内側にあるテキストからはマージンは得られません。measuredCountは、比較したテキストとクリップするボックスの組の数です。検出結果と同様に、マージンは最初の3,000個のテキストノードを対象とします。

検出結果が報告する内容：

text：テキストの先頭部分で、最大60文字です。スタイルシートのルールの検出結果には含まれません。
lines.shownBefore、lines.shownAfter（TEXT_CLIPPED_FURTHER）：間隔を適用しない場合と適用した場合に、ボックスがテキストを完全に表示していた行数です。
metrics.overflowPx（切れたテキスト）：間隔を適用した状態で、行がそれをクリップしているボックスの端からはみ出した量で、CSSピクセル単位です。
metrics.thresholdPx（切れたテキスト）：failになるまでに許されるはみ出しの量です。横方向は0.5em、縦方向は行の高さの半分です。
metrics.axis（切れたテキスト）：行が左右の端からはみ出した場合はx、上端または下端からはみ出した場合はyです。
container.widthPx、container.heightPx（切れたテキスト）：間隔を適用した状態での、クリップしているボックスのサイズです。
viewport.width、viewport.height（切れたテキストまたは重なったテキスト）：ページのレイアウトに使ったビューポートで、CSSピクセル単位です。ある幅で収まるテキストが、別の幅では切れる場合があります。
other（重なったテキスト）：重なる相手のテキストです。
selector、property、value（スタイルシートのルール）：ルールのセレクターと、間隔を強制している宣言です。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

マージン：このルールはoverflow-pxをCSSピクセル単位で測定し、値はしきい値を下回っている必要があります。しきい値を満たした値がしきい値の近くにあった場合、結果のmarginは、しきい値を満たしつつ最もしきい値に近づいた要素を示します。そのため、わずかな変更で判定結果が変わる箇所を、変わる前に把握できます。検出結果のフィールドとは異なり、安定した契約です。出力スキーマを参照してください。

例

passブラウザーで実行した場合

<p>Opening hours today, and the rest of the week from nine to five.</p>

段落のサイズが固定されていないため、テキストは間隔に合わせて広がり、何も失われません。

failブラウザーで実行した場合

<style>
  .hours { width: 19ch; height: 20px; overflow: hidden; }
</style>
<div class="hours">Opening hours today</div>

行の高さ1.5、文字の間隔0.12em、単語の間隔0.16emにすると、テキストが2行目に折り返し、ボックスがそれを切り取ります。レイアウトのないjsdomでは、ルールはスタイルシートだけを読み取り、!importantで強制された間隔について確認を求めます。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

`SPACING_NOT_APPLIED`

開発者ツールの[Styles]ペインで、*にline-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !importantを指定するスタイルルールと、pにmargin-bottom: 2em !importantを指定するルールを新たに追加してください。[Styles]ペインで追加したルールは、ページのセキュリティポリシーによってブロックされません。
ページ全体をスクロールし、切れている、ほかのテキストと重なっている、または消えているテキストがないか探してください。
テキストが切れている箇所では、「続きを読む」リンクや枠を広げるボタンなど、全文を表示する方法がページにあるか確認してください。キーボードで使え、間隔を適用したままで全文が表示される場合にだけ、それを認めます。
コントロールとメニューが引き続き機能し、すべてのテキストを表示していることを確認してください。

満たす場合：すべてのテキストが見えて読めるか、切れたテキストをキーボードで全文表示でき、間隔を適用しても何も動作しなくなりません。

満たさない場合：間隔を適用すると、テキストが切れる、重なる、または失われ、別の方法でも全文を表示できないため、WCAG 1.4.12を満たしません。

`STYLESHEET_IMPORTANT`

レポートに示されたルール、プロパティ、値を控え、それがスタイルを適用する要素を[Elements]パネルで見つけてください。
開発者ツールの[Styles]ペインで、*にline-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !importantを指定するスタイルルールと、pにmargin-bottom: 2em !importantを指定するルールを新たに追加してください。
[Computed]タブで、要素のline-height、letter-spacing、word-spacingがその値になったか確認してください。
なっていない場合は、ユーザースタイルシートと同じように、要素自身のスタイル（[Styles]ペイン上部のelement.style）に同じ値を指定し、テキストが読めるままか確認してください。

満たす場合：利用者の間隔は引き続き要素に適用されるか、それがなくてもコンテンツは問題なく読めます。

満たさない場合：ページの!importantルールによって利用者の間隔が適用されないため、WCAG 1.4.12を満たしません。

`TEXT_CLIPPED_FURTHER`

レポートに示されたテキストの抜粋を見つけ、何行が完全に表示されているかを控えてください。
開発者ツールの[Styles]ペインで、*にline-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !importantを指定するスタイルルールと、pにmargin-bottom: 2em !importantを指定するルールを新たに追加してください。
現在表示されている行数を数え、「続きを読む」リンクなどの方法で全文に引き続き到達できるか確認してください。

満たす場合：抜粋は引き続き役割を果たしており、全文には別の方法で到達できます。

満たさない場合：間隔によって、ほかの方法では到達できないコンテンツが切れるため、WCAG 1.4.12を満たしません。

`TEXT_CLIPPED_MOVING`

開発者ツールの[Styles]ペインで、*にline-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !importantを指定するスタイルルールと、pにmargin-bottom: 2em !importantを指定するルールを新たに追加してください。
レポートに示された動くテキストを見つけ、アニメーションを少なくとも1周期見てください。
コントロールがあれば一時停止し、テキストのすべてをどこかの時点で読めることを確認してください。

満たす場合：動くテキストのどの部分も、周期の中で引き続き読むことができます。

満たさない場合：間隔を適用すると、テキストの一部が一度も完全に表示されないため、WCAG 1.4.12を満たしません。

`TEXT_CLIPPED_SCRIPT_SIZED`

開発者ツールの[Styles]ペインで、*にline-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !importantを指定するスタイルルールと、pにmargin-bottom: 2em !importantを指定するルールを新たに追加してください。
レポートに示されたテキストを見つけ、少し待ってください。ページのスクリプトが、長くなったテキストに合わせて周りの枠の大きさを変えることがあります。
まだ切れて見える場合は、ブラウザーのウィンドウを少し狭くまたは広くするか、ページの何もない場所をクリックしてください。多くのページはこれで枠の大きさを計算し直します。
テキストを読み、すべて表示されているか確認してください。

満たす場合：ページが反応した後、枠がテキストに合い、間隔を適用した状態ですべて読めます。

満たさない場合：ページが反応する時間をおいても、間隔を適用するとテキストが切れたままなので、WCAG 1.4.12を満たしません。

`TEXT_CLIPPED_PARTLY`

開発者ツールの[Styles]ペインで、*にline-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !importantを指定するスタイルルールと、pにmargin-bottom: 2em !importantを指定するルールを新たに追加してください。
レポートに示されたテキストを見つけ、それを切り取っているボックスの端を確認してください。
テキストを読み、文字の上端や下端を含め、すべての文字を引き続き判別できるか確認してください。
テキストが切れている箇所では、「続きを読む」リンクや枠を広げるボタンなど、全文を表示する方法がページにあるか確認してください。キーボードで使え、間隔を適用したままで全文が表示される場合にだけ、それを認めます。

満たす場合：端がわずかに切れるだけですべてのテキストが読めるか、間隔を適用したまま、別の方法でキーボードから全文を表示できます。

満たさない場合：テキストの一部が切れて読めなくなり、別の方法でも全文を表示できないため、WCAG 1.4.12を満たしません（F104）。

`TEXT_OVERLAPS`

開発者ツールの[Styles]ペインで、*にline-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !importantを指定するスタイルルールと、pにmargin-bottom: 2em !importantを指定するルールを新たに追加してください。
レポートに示されたテキストと、それが現在重なっているテキストを見つけてください。
両方を読み、重なっている部分でいずれかが読みにくくなっていないか確認してください。

満たす場合：重なりは端のごく一部だけで、どちらのテキストも読めます。

満たさない場合：テキストがほかのテキストの上に描画され、いずれかが読めなくなっているため、WCAG 1.4.12を満たしません（F104）。

`VIEWPORT_SCROLL_LOCKED`

ページがスクロールできるよう、ページ上で開いているバナー、ダイアログ、オーバーレイを閉じてください。
開発者ツールの[Styles]ペインで、*にline-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !importantを指定するスタイルルールと、pにmargin-bottom: 2em !importantを指定するルールを新たに追加してください。
レポートに示されたテキストまでスクロールし、到達して読めることを確認してください。

満たす場合：オーバーレイを閉じるとページがスクロールし、すべてのテキストに到達して読むことができます。

満たさない場合：間隔を適用すると、テキストに到達できないままになるため、WCAG 1.4.12を満たしません。

ソースコードを見る