template-no-aria-unsupported-elements.md

ember/template-no-aria-unsupported-elements

Disallows using ARIA roles, states, and properties on elements that do not support them.

Certain HTML elements do not support ARIA roles, states, and properties. This rule helps ensure that ARIA attributes are only used on elements that support them, improving accessibility.

Rule Details

This rule disallows ARIA attributes on elements that do not support them, including:

• meta
• html
• script
• style
• title
• base
• head
• link

Examples

Examples of incorrect code for this rule:

<template>
  <meta role="button" />
</template>

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

<template>
  <style role="presentation"></style>
</template>

Examples of correct code for this rule:

<template>
  <div role="button" aria-label="Submit"></div>
</template>

<template>
  <button aria-pressed="true">Toggle</button>
</template>

References

• WAI-ARIA in HTML
• ember-template-lint no-aria-unsupported-elements