---
url: /docs/guide/usage/linter/rules/jsx_a11y/no-redundant-roles.md
---

### What it does

Enforces that code does not include a redundant `role` property, in the
case that it's identical to the implicit `role` property of the
element type.

### Why is this bad?

Redundant roles can lead to confusion and verbosity in the codebase.

### Examples

This rule applies for the following elements and their implicit roles:

* `<button>`: `button`

Examples of **incorrect** code for this rule:

```jsx
<button role="button"></button>
```

Examples of **correct** code for this rule:

```jsx
<button></button>
```

### Options

This rule takes an object whose keys are element names and whose values
are arrays of redundant roles to allow on that element. Providing an
entry overrides the default exceptions for that element.

By default `role="navigation"` is allowed on `<nav>`. Additional roles
can be allowed, for example to keep explicit list semantics that some
browsers drop when `list-style: none` is applied:

```json
{
  "jsx-a11y/no-redundant-roles": ["error", { "ul": ["list"], "ol": ["list"], "li": ["listitem"] }]
}
```

## Configuration

This rule accepts a configuration object with the following properties:

type: `Record<string, array>`

## How to use

## Version

This rule was added in v0.2.1.

## References