インラインテキストの間隔はカスタムスタイルシートで調整可能でなければならない

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

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

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に設定することで、前の行を終えた後に新しい行をより簡単に開始できるようになります。

    ルールの説明

    スタイル属性を通じて設定されたテキスト間隔がカスタム スタイルシートで調整できることを確認してください。

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

    インラインテキストの間隔は、カスタム スタイルシートを使用して調整できる必要があります。

    リソース

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

    GitHub で axe-core に貢献する

    その他のリソース

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

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

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

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

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

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