Skip to content
Permalink
9bfb9ba527
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

codeql-action/node_modules/eslint-plugin-jsx-a11y/docs/rules/no-aria-hidden-on-focusable.md

Go to file
 
 
Cannot retrieve contributors at this time
jsx-a11y/no-aria-hidden-on-focusable Rule details Succeed Fail Accessibility guidelines Resources
37 lines (28 sloc) 1.47 KB
Raw Blame

jsx-a11y/no-aria-hidden-on-focusable

Enforce that aria-hidden="true" is not set on 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.

Rule details

Succeed

  <div aria-hidden="true" />
  <img aria-hidden="true" />
  <a aria-hidden="false" href="#" />
  <button aria-hidden="true" tabIndex="-1" /> // `tabIndex=-1` removes the element from sequential focus navigation so we don't flag it.
  <a href="/" />
  <div aria-hidden="true"><a href="#"></a></div> // This is also bad but will not be handled by this rule.

Fail

  <div aria-hidden="true" tabIndex="0" />
  <input aria-hidden="true" />
  <a href="/" aria-hidden="true" />
  <button aria-hidden="true" />
  <textarea aria-hidden="true" />

Accessibility guidelines

General best practice (reference resources)

Resources