← Back to rules

jsx-a11y/role-supports-aria-props 正しさ

何を実行するか

明示的または暗黙的な role が定義された要素には、その role でサポートされる aria-* プロパティのみを含むことを強制します。 多くの ARIA 属性（状態およびプロパティ）は、特定の role を持つ要素でのみ使用できます。 一部の要素は暗黙的な role を持ちます。たとえば <a href="#" /> は role="link" に解決されます。

なぜこれは問題か

要素の role と一致しない ARIA 属性を使用すると、補助技術がページのコンテンツを理解したり操作したりする能力に問題が生じる可能性があります。

例

このルールに対する 不正な コードの例：

<ul role="radiogroup" "aria-labelledby"="foo">
    <li aria-required tabIndex="-1" role="radio" aria-checked="false">虹色のトラウト</li>
    <li aria-required tabIndex="-1" role="radio" aria-checked="false">ブロック・トラウト</li>
    <li aria-required tabIndex="0" role="radio" aria-checked="true">レイク・トラウト</li>
</ul>

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

<ul role="radiogroup" aria-required "aria-labelledby"="foo">
    <li tabIndex="-1" role="radio" aria-checked="false">虹色のトラウト</li>
    <li tabIndex="-1" role="radio" aria-checked="false">ブロック・トラウト</li>
    <li tabIndex="0" role="radio" aria-checked="true">レイク・トラウト</li>
</ul>

使用方法

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

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/role-supports-aria-props": "error"
  }
}

CLI

oxlint --deny jsx-a11y/role-supports-aria-props --jsx-a11y-plugin

参照

• ルールのソース