Skip to main content

a11y/noAriaUnsupportedElements

enforce that elements that do not support ARIA roles, states, and properties do not have those attributes

ESLint Equivalent: aria-unsupported-elements

Examples

Invalid

<meta charset="UTF-8" aria-hidden="false" />

 file.tsx:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <meta charset="UTF-8" aria-hidden="false" />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<meta charset="UTF-8" role="meta" />

 file.tsx:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <meta charset="UTF-8" role="meta" />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<html aria-required="true" />

 file.tsx:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <html aria-required="true" />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<html role="html"></html>

 file.tsx:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <html role="html"></html>
    ^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<script aria-label="script"></script>

 file.tsx:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <script aria-label="script"></script>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<script role="script"></script>

 file.tsx:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <script role="script"></script>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<style aria-labelledby></style>

 file.tsx:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <style aria-labelledby></style>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<style role="style"></style>

 file.tsx:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <style role="style"></style>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.

<meta charset="UTF-8" aria-hidden="false" />

 file.html:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <meta charset="UTF-8" aria-hidden="false" />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<meta charset="UTF-8" role="meta" />

 file.html:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <meta charset="UTF-8" role="meta" />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<html aria-required="true" />

 file.html:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <html aria-required="true" />
    ^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<html role="html"></html>

 file.html:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <html role="html"></html>
    ^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<script aria-label="script"></script>

 file.html:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <script aria-label="script"></script>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<script role="script"></script>

 file.html:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <script role="script"></script>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<style aria-labelledby="id"></style>

 file.html:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <style aria-labelledby="id"></style>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.


<style role="style"></style>

 file.html:1 lint/a11y/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid the role attribute and aria-* attributes when using meta, html,
    script, and style elements.

    <style role="style"></style>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Using roles on elements that do not support them can cause issues
    with screen readers.

Valid

<meta charset="UTF-8" />
<html maria="text"></html>
<script></script>
<style parole></style>
<meta charset="UTF-8" />
<html maria="text"></html>
<script></script>
<style parole></style>