文字の間隔を広げると切れる、ボタンのラベル

1.4.12の間隔では、各ラベルが並びの半分の幅より長くなります。ボタンはどの方向にも広がれないため、ラベルの最後は省略記号の後ろに隠れます。

サイト本来の間隔では、ボタンの見た目は以前と変わりません。どちらも1行で高さ44ピクセルのまま、ラベルは行の高さではなく余白で中央に置かれます。間隔を広げると、収まらなくなったラベルは2行目に折り返し、ボタンもそれに合わせて高くなります。ボタンは横に並んだままで、HTMLも変わりません。

どちらの方法でも、1.4.12の間隔ですべてのラベルを読め、達成基準を満たします。ラベルを折り返す方法は変更が小さく、ボタンをデザインどおりの位置に保てますが、2行のラベルは少し読み取りにくくなります。並びを折り返す方法はラベルを1行に保てるため読みやすい一方、幅が足りないとボタンが縦に積まれ、その下のレイアウトが下にずれます。ツールバーや表の行のように、ボタンを横に並べておく必要がある場合はラベルの折り返しを、積まれても問題ない場合（多くのフォームや商品ページ）は並びの折り返しを選んでください。

ほかの固定された操作部品も探す。 タブ、ピル、バッジ、ナビゲーションのリンク、ドロップダウンの項目、表の見出しなど、ラベルを含む要素で、ピクセル指定の height と line-height、white-space: nowrap、text-overflow: ellipsis を探します。どれも min-height と余白に置き換えます。一覧の長い商品名を省略記号で切り、全文を商品ページに載せるのはデザインの判断ですが、操作部品のラベルを切るとコンテンツが失われます。

行の高さではなく余白で中央に置く。 line-height: 44px は1行を中央に置きますが、折り返した行もすべて44ピクセルの高さにします。余白か、display: inline-flex と align-items: center を使い、2行目が1行目の近くに並ぶようにします。

間隔は上書きできるままにする。 利用者は、ユーザースタイルシートや拡張機能で1.4.12の値を適用します。ページビルダーやリッチテキストエディターが書き込む style="letter-spacing: 0 !important" のようなインラインの指定は、利用者のスタイルシートより優先され、それだけで不適合になります（axe の avoid-inline-spacing）。間隔の指定はスタイルシートに移し、行・文字・単語の間隔から !important を外します。

切れるだけでなく、重なることもある。 商品写真に固定した「セール」のバッジや、ヒーロー画像に重ねた文字のように絶対配置した文字は、間隔が広がっても切れず、隣の要素に重なります。文字の場所が十分にあるか確認し、必要なら通常の配置に戻します。

アイコンと固定の幅。 アイコンとラベルを固定の width に入れたボタンも、同じように切れます。内容に合わせた幅にし、デザイン上必要なら min-width を使います。

外部のウィジェット。 決済ボタン、チャットの起動ボタン、Cookieバナーなどは、独自に高さを指定していることがよくあります。間隔を適用して確認し、切れる場合は提供元に報告します。達成基準はページ全体に適用されます。

ほかの文字体系。 日本語のように単語の間にスペースがない言語では、単語の間隔はほとんど効きませんが、文字の間隔と行の高さは効きます。サイトで提供するすべての言語で確認してください。