a11y/use-list · 箇条書きテキストはリストにすべき

プレーンテキストに入力された行頭記号は、本物のリスト要素に置き換えるべきです。

重大度: info · カテゴリ: a11y

チェック内容

行頭記号（•、・、·、-、*）に続いて空白文字で始まるテキストを、同じ親の下にそのような項目が 2 つ以上あるときに検出します。兄弟のテキストノード（- one - two）でも、兄弟要素の先頭テキスト（• one• two）でも構いません。行頭記号が 1 行だけならそれはダッシュであってリストではありません。WCAG 達成方法 H48 は項目の並びについてのもので、1 項目は並びではありません。コンポーネントのソースを解析します。

検出しないもの:

テキストの途中にある該当文字、例: a - b や -webkit-...。トリム後のテキストの先頭かどうかだけを見ます。
直後に空白が続かない該当文字、例: 符号付き数値の -1。
すでに <li> の中にあるテキスト。
兄弟要素として {式} の後ろに続くテキスト。{count} - results found は - results found にトリムされますが、これは文の続きであって箇条書きではありません。
<pre>・<code>・<kbd>・<samp>・<textarea> の中のテキスト。先頭のダッシュは内容の一部です。

これは構造的なチェックではなくヒューリスティックです。本物の箇条書きと、作者が意図的に使ったダッシュを区別できないため、warning ではなく info として扱います。

<div>
  <p>• Ships within one business day</p>
  <p>• Backed by a two-year warranty</p>
</div>

なぜ重要か

本物の <ul>/<ol> は、項目数・リスト内での位置・リストの開始と終了といったリストとしてのセマンティクスを支援技術に伝えます。プレーンテキストに入力した行頭記号は見た目こそ同じですが、その構造を一切持たないため、スクリーンリーダーは単なる地の文として読み上げます。

修正方法

リスト要素を使います。

<ul>
  <li>Ships within one business day</li>
  <li>Backed by a two-year warranty</li>
</ul>

モードによる違い

ありません。このルールが読むのは同じ .svelte / .ts のソースファイルなので、CLI、Vite プラグインのビルド、ライブダッシュボードの静的ベースラインのいずれでも結果は同一で、レンダリング済み HTML の解析で再評価されることもありません。--route で実行範囲を絞ると、このルールは動きません。コンポーネントスコープのルールには、検出を紐づけるルートが無いためです。

無効化

その行頭記号がリストの代わりではなく意図的な地の文である場合は、 で個別の箇所を抑制するか、ルールを無効化してください。

export default {
  rules: {
    'a11y/use-list': 'off'
  }
};