Skip to content

Latest commit

 

History

History
77 lines (63 loc) · 1.51 KB

no-aria-hidden-on-focusable.md

File metadata and controls

77 lines (63 loc) · 1.51 KB

no-aria-hidden-on-focusbable

Enforce that aria-hidden="true" is not set on focusable elements or parent of focusable elements.

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

See more in WAI-ARIA Use in HTML.

✔ Succeed

<template>
    <button>Press Me</button>
</template>
<template>
    <div aria-hidden='true'><button tabindex='-1'>Submit</button></div>
</template>
<template>
    <div aria-hidden='true'><span>Some text</div></div>
</template>
<template>
    <button tabindex='-1' aria-hidden='true'>Press</button>
</template>
<template>
    <div aria-hidden='true'><a href='#' tabindex='-1'>Link</a></div>
</template>
<template>
    <div aria-hidden='true'><span>Some text</div></div>
</template>

❌ Fail

<template>
  <button aria-hidden='true'>press me</button>
</template>
<template>
    <button aria-hidden="true">press me</button>
</template>
<template>
    <a href="#" aria-hidden='true'>press me</a>
</template>
<template>
    <div aria-hidden="true"> 
        <button>press me</button>
    </div>
</template>
<template>
    <span tabindex='0' aria-hidden='true'><em>Icon</em></span>
</template>