コンテンツにスキップ
svelte-vitals
日本語
Esc
移動開く⌘Jプレビュー
このページの内容

a11y/abbr-title · 展開のない略語

title のない <abbr> は読者に展開形を提供しません。晴眼ユーザーにはツールチップが出ず、支援技術には展開するものがありません。

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

チェック内容

展開形を与える title のない <abbr> を検出します。

<p>The <abbr>W3C</abbr> publishes the spec.</p>

空のリテラル title="" は展開形を持たないため同様に検出します。式値の title={expr} は通します。レンダリング結果は判定不能なので、属性の存在をもって展開形があるとみなします。

検出しないもの:

  • スプレッド属性を持つ <abbr>。レンダリングされる属性が判定不能です。
  • <svg> 内の <abbr>。SVG の要素ではなく、そこではレンダリングされません。

なぜ重要か

<abbr> は略語であることを示しますが、展開形を与える title がなければこの要素は何の情報も追加しません。晴眼ユーザーにはツールチップが出ず、支援技術には展開するものがありません。

これは適合性の要求ではなくベストプラクティスへの後押しです: 仕様上 title は任意で、展開形を周囲の本文で与えるのも正しいマークアップです。

修正方法

展開形を title として追加するか、初出時に完全な形で書きます。

<p>The <abbr title="World Wide Web Consortium">W3C</abbr> publishes the spec.</p>

制限事項

周囲のテキストで展開形を与えるマークアップ(The World Wide Web Consortium (<abbr>W3C</abbr>))は適合しますが、このルールからは見えません。これが既知の偽陽性の類型です。冗長な title を足すのではなく、下のインラインディレクティブで抑制してください。

モードによる違い

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

無効化

展開形を周囲のテキストで与えている場合は、<!-- svelte-vitals-disable-next-line a11y/abbr-title --> で個別の要素を抑制するか、ルールを無効化してください。

export default {
  rules: {
    'a11y/abbr-title': 'off'
  }
};