Skip to content
← Back to rules

jsx-a11y/no-distracting-elements 正しさ

何をするか

視覚的に気を逸らす要素が使われないように制約します。

なぜ問題なのか

視覚的に気を逸らす可能性のある要素は、視覚障がいを持つユーザーに対してアクセシビリティ上の問題を引き起こす可能性があります。このような要素はほとんどが非推奨であり、回避すべきです。デフォルトでは、<marquee> および <blink> 要素は視覚的に気を逸らすものであり、前庭器系の障害を引き起こす可能性があります。

このルールに違反する不適切なコードの例

jsx
<marquee />
<marquee {...props} />
<marquee lang={undefined} />
<blink />
<blink {...props} />
<blink foo={undefined} />

このルールに準拠する適切なコードの例

jsx
<div />
<Marquee />
<Blink />

設定

このルールは以下のプロパティを持つ設定オブジェクトを受け入れます。

elements

type: array

チェック対象となる気を逸らす要素のリスト。

elements[n]

type: "marquee" | "blink"

使い方

設定ファイルまたは CLI でこのルールを有効化するには、次のように使用できます:

json
{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/no-distracting-elements": "error"
  }
}
bash
oxlint --deny jsx-a11y/no-distracting-elements --jsx-a11y-plugin

参照