ember/template-no-aria-unsupported-elements

April 20, 2026 · View on GitHub

💼 This rule is enabled in the 📋 template-lint-migration config.

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