Skip to content

Latest commit

 

History

History
77 lines (63 loc) · 1.53 KB

no-role-presentation-on-focusable.md

File metadata and controls

77 lines (63 loc) · 1.53 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</div></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>