noAccessKey

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/a11y/noAccessKey`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/no-access-key`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-access-key.md)

How to configure

json

{
	"linter": {
		"rules": {
			"a11y": {
				"noAccessKey": "error"
			}
		}
	}
}

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

jsx

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

<pre class="language-text"><code class="language-text">code-block.jsx:1:22 <a href="https://biomejs.dev/linter/rules/no-access-key">lint/a11y/noAccessKey</a> FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Avoid the accessKey attribute to reduce inconsistencies between keyboard shortcuts and screen reader keyboard commands. > 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"·/> │ -------------- </code></pre>

jsx

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

<pre class="language-text"><code class="language-text">code-block.jsx:1:31 <a href="https://biomejs.dev/linter/rules/no-access-key">lint/a11y/noAccessKey</a> FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Avoid the accessKey attribute to reduce inconsistencies between keyboard shortcuts and screen reader keyboard commands. > 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> │ ------------- </code></pre>

jsx

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

<pre class="language-text"><code class="language-text">code-block.jsx:1:9 <a href="https://biomejs.dev/linter/rules/no-access-key">lint/a11y/noAccessKey</a> FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Avoid the accessKey attribute to reduce inconsistencies between keyboard shortcuts and screen reader keyboard commands. > 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> │ ------------- </code></pre>

Resources

</TabItem> <TabItem label="HTML" icon="seti:html"> ## Summary - Rule available since: `v2.4.0` - Diagnostic Category: [`lint/a11y/noAccessKey`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/no-access-key`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-access-key.md) - Same as [`@html-eslint/no-accesskey-attrs`](https://html-eslint.org/docs/rules/no-accesskey-attrs)

How to configure

json

{
	"linter": {
		"rules": {
			"a11y": {
				"noAccessKey": "error"
			}
		}
	}
}

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

html

<input type="submit" accesskey="s" value="Submit" />

<pre class="language-text"><code class="language-text">code-block.html:1:22 <a href="https://biomejs.dev/linter/rules/no-access-key">lint/a11y/noAccessKey</a> FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Avoid the accesskey attribute to reduce inconsistencies between keyboard shortcuts and screen reader keyboard commands. > 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"·/> │ -------------- </code></pre>

html

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

<pre class="language-text"><code class="language-text">code-block.html:1:31 <a href="https://biomejs.dev/linter/rules/no-access-key">lint/a11y/noAccessKey</a> FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Avoid the accesskey attribute to reduce inconsistencies between keyboard shortcuts and screen reader keyboard commands. > 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> │ ------------- </code></pre>

html

<button accesskey="n">Next</button>

<pre class="language-text"><code class="language-text">code-block.html:1:9 <a href="https://biomejs.dev/linter/rules/no-access-key">lint/a11y/noAccessKey</a> FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Avoid the accesskey attribute to reduce inconsistencies between keyboard shortcuts and screen reader keyboard commands. > 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> │ ------------- </code></pre>

Resources

</TabItem> </Tabs>

How to configure

Description

Examples

Invalid

Resources

Related links

How to configure

Description

Examples

Invalid

Resources

Related links