Files
dewedev/node_modules/eslint-plugin-jsx-a11y/docs/rules/no-aria-hidden-on-focusable.md
dwindown 7f2dd5260f Initial commit: Developer Tools MVP with visual editor
- Complete React app with 7 developer tools
- JSON Tool with visual structured editor
- Serialize Tool with visual structured editor
- URL, Base64, CSV/JSON, Beautifier, Diff tools
- Responsive navigation with dropdown menu
- Dark/light mode toggle
- Mobile-responsive design with sticky header
- All tools working with copy/paste functionality
2025-08-02 09:31:26 +07:00

1.5 KiB

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