← Back to rules

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

何を実行するか

見出し要素（h1、h2 など）にコンテンツが存在し、かつスクリーンリーダーでアクセス可能であることを強制します。 アクセス可能なとは、aria-hidden プロパティを使用して非表示になっていないことを意味します。

なぜこれは問題なのか

スクリーンリーダーは見出しタグの存在をユーザーに通知します。 もし見出しが空であり、またはテキストにアクセスできない場合、ユーザーを混乱させたり、ページの構造に関する情報にアクセスできなくなったりする可能性があります。

例

このルールに対する誤りの例：

<h1 />

このルールに対する正しい例：

<h1>Foo</h1>

設定

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

components

type: string[]

default: null

見出し要素として扱う追加のカスタムコンポーネント名。 標準の h1～h6 要素に加えて検証されます。

使用方法

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

設定 (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース