Linter Rule: No ARIA on unsupported elements

Rule: a11y-no-aria-unsupported-elements

Description

Prevent usage of ARIA roles, states, and properties on certain DOM elements that do not support them.

Rationale

Certain HTML elements do not support ARIA roles, states, or properties because they are not visible or interactive. Adding ARIA attributes to these elements has no effect and indicates a misunderstanding of the ARIA specification.

These elements include:

<html>
<meta>
<script>
<style>

Also handles javascript_tag helper with aria_label option key.

Examples

✅ Good

erb

<meta charset="UTF-8" />Use `<meta>` instead of self-closing `<meta />` for HTML compatibility. (html-no-self-closing)

erb

<html lang="en"></html>

erb

<script></script>Missing a `nonce` attribute on `<script>` tag. Use `request.content_security_policy_nonce`. (html-require-script-nonce)

erb

<style></style>

erb

<div role="button" aria-hidden="false"></div>

erb

<%= javascript_tag do %>Missing a `nonce` attribute on `<script>` tag. Use `request.content_security_policy_nonce`. (html-require-script-nonce)
Avoid `javascript_tag`. Use inline `<script>` tags instead. (erb-no-javascript-tag-helper)
  console.log("Hello, world!");
<% end %>

🚫 Bad

erb

<meta charset="UTF-8" aria-hidden="false" />Use `<meta>` instead of self-closing `<meta />` for HTML compatibility. (html-no-self-closing)

erb

<html lang="en" role="application"></html>The `role` attribute must be a valid ARIA role. Role `application` is not recognized. (html-aria-role-must-be-valid)

erb

<script aria-hidden="false"></script>Missing a `nonce` attribute on `<script>` tag. Use `request.content_security_policy_nonce`. (html-require-script-nonce)

erb

<style aria-label="styles"></style>The `aria-label` attribute value should not be formatted like an ID. Use natural, sentence-case text instead. (html-aria-label-is-well-formatted)

erb

<%= javascript_tag aria_label: "script block" do %>Missing a `nonce` attribute on `<script>` tag. Use `request.content_security_policy_nonce`. (html-require-script-nonce)
Avoid `javascript_tag`. Use inline `<script>` tags instead. (erb-no-javascript-tag-helper)
  console.log("Hello, world!");
<% end %>

Linter Rule: No ARIA on unsupported elements ​

Description ​

Rationale ​

Examples ​

✅ Good ​

🚫 Bad ​

References ​