Skip to content

Latest commit

 

History

History
79 lines (63 loc) · 1.5 KB

no-role-presentation-on-focusable.md

File metadata and controls

79 lines (63 loc) · 1.5 KB

no-role-presentaion-on-focusbable

Enforce that role="presentation" is not set on focusable elements or parent of focusbale elements.

role="presentation can be used to hide purely decorative content from screen reader users. An element with role="presentation" that can also be reached by keyboard can lead to confusion or unexpected behavior for screen reader users. Avoid using role="presentation" on focusable elements.

See more in WAI-ARIA Use in HTML.

✔ Succeed

<template>
  <button>Press Me</button>
</template>
<template>
  <div role="presentation"><button tabindex="-1">Submit</button></div>
</template>
<template>
    <div role="presentation"><span>Some text</div></div>
</template>
<template>
  <button tabindex="-1" role="presentation">Press</button>
</template>
<template>
  <div role="presentation"><a href="#" tabindex="-1">Link</a></div>
</template>
<template>
  <div role="presentation"><span>Some text</span></div>
</template>

❌ Fail

<template>
  <button role="presentation">press me</button>
</template>
<template>
  <button role="presentation">press me</button>
</template>
<template>
  <a href="#" role="presentation">press me</a>
</template>
<template>
  <div role="presentation">
    <button>press me</button>
  </div>
</template>
<template>
  <span tabindex="0" role="presentation"><em>Icon</em></span>
</template>