← Back to rules

jsx-a11y/anchor-has-content 正しさ

An auto-fix is available for this rule.

何をするか

アンカー要素がコンテンツを持ち、そのコンテンツがスクリーンリーダーからアクセス可能であることを強制します。 「アクセス可能」とは、aria-hidden プロップを使用して非表示にされていないことを意味します。

または、title プロップや aria-label プロップを使用することもできます。

なぜ問題なのか

コンテンツのないアンカー要素は、スクリーンリーダーに頼って理解しようとする利用者にとって混乱を招く可能性があります。

例

このルールに対して正しいコードの例：

<a>アンカーのコンテンツ！</a>
<a><TextWrapper /></a>
<a dangerouslySetInnerHTML={{ __html: 'foo' }} />
<a title='foo' />
<a aria-label='foo' />

このルールに対して誤りなコードの例：

<a />
<a><TextWrapper aria-hidden /></a>

使用方法

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

設定 (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/anchor-has-content": "error"
  }
}

CLI

oxlint --deny jsx-a11y/anchor-has-content --jsx-a11y-plugin

参照

• ルールのソース