---
url: /docs/guide/usage/linter/rules/jsx_a11y/role-supports-aria-props.md
---

### 作用

强制带有显式或隐式角色定义的元素仅包含该 `role` 支持的 `aria-*` 属性。
许多 ARIA 属性（状态和属性）只能用于具有特定角色的元素上。
某些元素具有隐式角色，例如 `<a href="#" />`，其将解析为 `role="link"`。

### 为什么这很糟糕？

使用与元素角色不一致的 ARIA 属性会给辅助技术及其理解或使用页面内容的能力带来问题。

### 示例

此规则的**错误**代码示例：

```jsx
<ul role="radiogroup" aria-labelledby="foo">
  <li aria-required tabIndex="-1" role="radio" aria-checked="false">
    Rainbow Trout
  </li>
  <li aria-required tabIndex="-1" role="radio" aria-checked="false">
    Brook Trout
  </li>
  <li aria-required tabIndex="0" role="radio" aria-checked="true">
    Lake Trout
  </li>
</ul>
```

此规则的**正确**代码示例：

```jsx
<ul role="radiogroup" aria-required aria-labelledby="foo">
  <li tabIndex="-1" role="radio" aria-checked="false">
    Rainbow Trout
  </li>
  <li tabIndex="-1" role="radio" aria-checked="false">
    Brook Trout
  </li>
  <li tabIndex="0" role="radio" aria-checked="true">
    Lake Trout
  </li>
</ul>
```

## 如何使用

## 版本

此规则添加于 v0.2.0。

## 参考资料