noAriaHiddenOnFocusable
诊断类别：lint/a11y/noAriaHiddenOnFocusable
¥Diagnostic Category: lint/a11y/noAriaHiddenOnFocusable
自从：v1.4.0
¥Since: v1.4.0
来源：
¥Sources:
强制可聚焦元素上未设置 aria-hidden=“true”。
¥Enforce that aria-hidden=“true” is not set on focusable elements.
aria-hidden="true" 可用于向屏幕阅读器用户隐藏纯装饰性内容。带有 aria-hidden="true" 的可聚焦元素可以通过键盘访问。这可能会导致屏幕阅读器用户的困惑或意外行为。
¥aria-hidden="true" can be used to hide purely decorative content from screen reader users.
A focusable element with aria-hidden="true" can be reached by keyboard.
This can lead to confusion or unexpected behavior for screen reader users.
¥Example
¥Invalid
<div aria-hidden="true" tabIndex="0" />code-block.jsx:1:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Disallow aria-hidden=“true” from being set on focusable elements.
> 1 │ <div aria-hidden=“true” tabIndex=“0” />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
ℹ Unsafe fix: Remove the aria-hidden attribute from the element.
1 │ <div·aria-hidden=“true”·tabIndex=“0”·/>
│ -------------------
<a href="/" aria-hidden="true" />code-block.jsx:1:1 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Disallow aria-hidden=“true” from being set on focusable elements.
> 1 │ <a href=”/” aria-hidden=“true” />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
ℹ Unsafe fix: Remove the aria-hidden attribute from the element.
1 │ <a·href=”/“·aria-hidden=“true”·/>
│ -------------------
¥Valid
<button aria-hidden="true" tabIndex="-1" /><button aria-hidden="true" tabIndex={-1} /><div aria-hidden="true"><a href="#"></a></div>¥Resources
-
带有 aria-hidden 的元素在顺序焦点导航中没有内容
¥Element with aria-hidden has no content in sequential focus navigation
¥Related links