インラインテキストの間隔は、カスタムスタイルシートで調整可能である必要があります

ルールID: avoid-inline-spacing
ルールセット: axe-core 4.10
ユーザーへの影響: 深刻
ガイドライン: WCAG 2.1 (AA), WCAG 2.2 (AA), EN 301 549
 

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Compliance Data & Impact

User Impact

深刻
▼
Minor
Critical

Disabilities Affected

  • 注意欠陥
  • 視覚障害
  • ロービジョン
  • 視聴覚障害
  • 運動障害
  • 認識障害

Standard(s)

  • WCAG 2.1 (AA)
  • WCAG 2.2 (AA)
  • EN 301 549

WCAG 達成基準 [WCAG 2.1 (AA)]

  • 1.4.12: 必須: Text Spacing
  • 1.4.12: 必須: Content on Hover or Focus

WCAG 達成基準 [WCAG 2.2 (AA)]

  • 1.4.12: 必須: Text Spacing
  • 1.4.12: 必須: Content on Hover or Focus

    修正方法

    正しいマークアップ方法

    avoid-inline-spacing というルールは、検証基準に合格する5つのマークアップパターンを含んでいます:

    <!-- style attribute includes font-size property -->
<p id="pass1" style="font-size: 200%">I stepped on a Corn Flake, now I'm a Cereal Killer...</p>
 

<!-- style attribute includes line-height property -->
<p id="pass2" style="line-height: 1.5;">
    On a scale from one to ten, what is your favorite color of the alphabet.</p>
 
<!-- style attribute includes letter-spacing property -->
<p id="pass3" style="letter-spacing: 50px;">
    The quick brown fox jumped over the lazy dog</p>
 
<!-- style attribute includes word-spacing property -->
<p id="pass4" style="word-spacing: 10px;">A group of 24 Caterpillars has 694 legs</p>
 
<!-- style attribute includes word-spacing, letter-spacing, and line-height properties -->
<p id="pass5"
    style="word-spacing: 20ch; letter-spacing: 50rem; line-height: 3;">Look, a distraction!</p>

    不適切なマークアップ方法

    avoid-inline-spacing というルールは、検証基準に不合格になる4つのマークアップパターンを含んでいます:

    <!-- style attribute includes forced line-height property -->
<p id="fail1" style="line-height: 1.5 !important;">Banana error</p>
 
<!-- style attribute includes forced letter-spacing property -->
<p id="fail2" style="letter-spacing: 100em !important;">We need more cheeeeeeessseeeee!!!</p>
 
<!-- style attribute includes forced word-spacing property -->
<p id="fail3" style="word-spacing: -.4ch !important;">The cheese grater is in the way!</p>
 
<!-- style attribute a word-spacing property, a forced letter-spacing property, and a line-height -->
<p id="fail4" style="word-spacing: 200%; letter-spacing: 50rem !important; line-height: 3;">Yo, Darth Vader</p>

    なぜ重要なのか

    テキストブロックの行間があいていないと、多くの認知障害のある人は、各行を追うのが困難になります。1.5 から 2 の行間を提供することで、前の行が終わった後に新しい行に移動することをより簡単にします。

    ルールの説明

    style 属性により設定されたテキストの間隔がカスタムスタイルシートによって調整できることを確認します。

    仕組みについて (簡単に言うと)

    インラインのテキスト間隔設定はカスタムスタイルシートによって調整可能でなければなりません

    リソース

    Deque University コースのページ (要登録)

    GitHub で axe-core に貢献する

    その他のリソース

    その他リソースもあわせてご参照ください。

    axe 4.10 ルールの一覧 を参照する

    この情報は役に立ちましたか?

    すでにフィードバックをいただきました、ありがとうございます。.

    あなたの回答は次のとおりです。

    この情報は役に立ちましたか?
    フィードバックが提出された日付/時刻: