テキストの間隔

Silktide は、インラインスタイルによってテキストの間隔（letter-spacing、 word-spacing、line-height）が !important で、WCAG の最小値を下回る値に固定されている要素を検出します。そのため、ユーザーは間隔を調整できません。

これが重要な理由

ディスレクシアや弱視のある人は、テキストを読むために、行を高くしたり、文字や単語の間隔を広げたりして、テキストを広げる必要があることがあります。そのため、ページの間隔設定を上書きするブラウザー拡張機能やカスタムスタイルシートを使用します。

これらのツールは通常の作成者レベルの CSS を挿入します。要素の style 属性内にある !important 宣言は、どれほど詳細度の高い作成者レベルのルールであっても上回ります。これは、ページ上でこれらのツールが上書きできない唯一の構造です。間隔が最小値を下回る値に固定されていると、ユーザーは単に締め出されてしまいます。

の達成基準 1.4.12（レベル AA）では、ユーザーがテキストの間隔を少なくとも次の値まで広げても、コンテンツが維持されることを求めています。

行の高さ - フォントサイズの 1.5 倍
文字間隔 - フォントサイズの 0.12 倍
単語間隔 - フォントサイズの 0.16 倍

修正方法

フラグが付いた各要素に対して、次のいずれかを行います。

インライン宣言から !important フラグを削除します。ユーザーのツールで上書きできるようになり、それ以外のユーザーに対するデザインは変わりません。
宣言をスタイルシートに移動します。!important が付いていても、スタイルシートのルールはユーザーのツールで上書きできます。
間隔を本当に固定する必要がある場合は、値を WCAG の最小値まで引き上げます。

<!-- 失敗: 最小値を下回る値に固定されているため、ユーザーのツールで上書きできない -->
<p style="line-height: 1.2 !important">…</p>

<!-- 修正済み: 上書き可能 -->
<p style="line-height: 1.2">…</p>

<!-- これも問題なし: 固定されているが、すでに最小値を満たす値 -->
<p style="line-height: 1.5 !important">…</p>

Silktide によるチェック方法

style 属性で letter-spacing、word-spacing、または line-height に !important を指定し、表示されるテキストを直接含む要素を探します。
要素のフォントサイズを基準に、指定された値を解決します。
固定された値が、そのプロパティに対する WCAG の最小値を下回る場合に、その要素を報告します。

これは、1.4.12 に関する W3C ACT ルール（文字間隔、単語間隔、行の高さ）を反映しています。

Silktide は、スタイルシート内の !important 付きの間隔はチェックしません。これらはユーザーのツールで引き続き上書きできるためです。また、間隔の上書きを適用してレイアウトの崩れを検出するシミュレーションも行いません。現在、そのような処理を自動で行うツールはありません。このチェックに合格することは、ページ上の何もユーザーによる間隔の調整を妨げていないことを意味します。間隔を調整した状態でもレイアウトが読みやすく保たれることの確認は、テキスト間隔ブックマークレットを使った簡単な手動テストで行えます。

トラブルシューティング

インラインスタイルがフレームワークまたはサードパーティ製ウィジェットに由来する

コンポーネントライブラリや埋め込みスクリプトが、インラインの !important 付きスタイルを書き込むことがあります。それでもページに対する問題として扱われるため、ベンダーの設定を確認するか、ベンダーに問い合わせてください。

間隔が適合する値に固定されている

WCAG の最小値以上の値は、固定されていても合格します。line-height: 1.6 !important を固定しても、ユーザーが広げる値をすでに上回っているため、誰にも悪影響はありません。