noAccessKey

JSX and TSX

Summary

Rule available since: v1.0.0
Diagnostic Category: lint/a11y/noAccessKey
This rule is recommended, which means is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is error.
Sources:
- Same as jsx-a11y/no-access-key

Description

Enforce that the accessKey attribute is not used on any HTML element.

The accessKey assigns a keyboard shortcut to the current element. However, the accessKey value can conflict with keyboard commands used by screen readers and keyboard-only users, which leads to inconsistent keyboard actions across applications. To avoid accessibility complications, this rule suggests users remove the accessKey attribute on elements.

Examples

Invalid

1
<input type="submit" accessKey="s" value="Submit" />

code-block.jsx:1:22 lint/a11y/noAccessKey  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the accessKey attribute to reduce inconsistencies between keyboard shortcuts and screen reader keyboard comments.
  
  > 1 │ <input type=“submit” accessKey=“s” value=“Submit” />
      │                      ^^^^^^^^^^^^^
    2 │ 
  
  ℹ Assigning keyboard shortcuts using the accessKey attribute leads to inconsistent keyboard actions across applications.
  
  ℹ Unsafe fix: Remove the accessKey attribute.
  
    1 │ <input·type=“submit”·accessKey=“s”·value=“Submit”·/>
      │                      --------------

1
<a href="https://webaim.org/" accessKey="w">WebAIM.org</a>

code-block.jsx:1:31 lint/a11y/noAccessKey  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the accessKey attribute to reduce inconsistencies between keyboard shortcuts and screen reader keyboard comments.
  
  > 1 │ <a href=“https://webaim.org/” accessKey=“w”>WebAIM.org</a>
      │                               ^^^^^^^^^^^^^
    2 │ 
  
  ℹ Assigning keyboard shortcuts using the accessKey attribute leads to inconsistent keyboard actions across applications.
  
  ℹ Unsafe fix: Remove the accessKey attribute.
  
    1 │ <a·href=“https://webaim.org/“·accessKey=“w”>WebAIM.org</a>
      │                               -------------

1
<button accessKey="n">Next</button>

code-block.jsx:1:9 lint/a11y/noAccessKey  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the accessKey attribute to reduce inconsistencies between keyboard shortcuts and screen reader keyboard comments.
  
  > 1 │ <button accessKey=“n”>Next</button>
      │         ^^^^^^^^^^^^^
    2 │ 
  
  ℹ Assigning keyboard shortcuts using the accessKey attribute leads to inconsistent keyboard actions across applications.
  
  ℹ Unsafe fix: Remove the accessKey attribute.
  
    1 │ <button·accessKey=“n”>Next</button>
      │         -------------

Resources

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noAccessKey": "error"
6
      }
7
    }
8
  }
9
}