noAriaHiddenOnFocusable

JSX and TSX

摘要

¥Summary

规则生效日期：v1.4.0

¥Rule available since: v1.4.0
诊断类别：lint/a11y/noAriaHiddenOnFocusable

¥Diagnostic Category: lint/a11y/noAriaHiddenOnFocusable
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则包含 unsafe 修复程序。

¥This rule has an unsafe fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
来源：

¥Sources:
- 与 jsx-a11y/no-aria-hidden-on-focusable 相同
  
  ¥Same as jsx-a11y/no-aria-hidden-on-focusable

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noAriaHiddenOnFocusable": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

强制可聚焦元素上未设置 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

1
<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”·/>
      │      -------------------

1
<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

1
<button aria-hidden="true" tabIndex="-1" />

1
<button aria-hidden="true" tabIndex={-1} />

1
<div aria-hidden="true"><a href="#"></a></div>

资源

¥Resources

noAriaHiddenOnFocusable

摘要

如何配置

描述

示例

无效

有效

资源

相关链接