useAnchorContent

JSX and TSX

摘要

¥Summary

• 规则生效日期：v1.0.0

  ¥Rule available since: v1.0.0

• 诊断类别：lint/a11y/useAnchorContent

  ¥Diagnostic Category: lint/a11y/useAnchorContent

• 此规则为推荐规则，默认启用。

  ¥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/anchor-has-content 相同

    ¥Same as jsx-a11y/anchor-has-content

如何配置

¥How to configure

biome.json

{
  "linter": {
    "rules": {
      "a11y": {
        "useAnchorContent": "error"
      }
    }
  }
}

描述

¥Description

强制锚点具有内容，并且内容可供屏幕阅读器访问。

¥Enforce that anchors have content and that the content is accessible to screen readers.

可访问意味着内容不会使用 aria-hidden 属性隐藏。参考参考资料以了解为什么这很重要。

¥Accessible means the content is not hidden using the aria-hidden attribute. Refer to the references to learn about why this is important.

示例

¥Examples

无效

¥Invalid

<a />

code-block.jsx:1:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using `a` elements.
  
  > 1 │ <a />
      │ ^^^^^
    2 │ 
  
  ℹ All links on a page should have content that is accessible to screen readers.
  
  ℹ Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
  
  ℹ Follow these links for more information,
    WCAG 2.4.4
    WCAG 4.1.2
  

<a></a>

code-block.jsx:1:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using `a` elements.
  
  > 1 │ <a></a>
      │ ^^^^^^^
    2 │ 
  
  ℹ All links on a page should have content that is accessible to screen readers.
  
  ℹ Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
  
  ℹ Follow these links for more information,
    WCAG 2.4.4
    WCAG 4.1.2
  

<a>    </a>

code-block.jsx:1:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using `a` elements.
  
  > 1 │ <a>    </a>
      │ ^^^^^^^^^^^
    2 │ 
  
  ℹ All links on a page should have content that is accessible to screen readers.
  
  ℹ Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
  
  ℹ Follow these links for more information,
    WCAG 2.4.4
    WCAG 4.1.2
  

<a aria-hidden>content</a>

code-block.jsx:1:1 lint/a11y/useAnchorContent  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using `a` elements.
  
  > 1 │ <a aria-hidden>content</a>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ All links on a page should have content that is accessible to screen readers.
  
  ℹ Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
  
  ℹ Follow these links for more information,
    WCAG 2.4.4
    WCAG 4.1.2
  
  ℹ Unsafe fix: Remove the aria-hidden attribute to allow the anchor element and its content visible to assistive technologies.
  
    1 │ <a·aria-hidden>content</a>
      │    -----------            

<a><span aria-hidden="true">content</span></a>

code-block.jsx:1:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using `a` elements.
  
  > 1 │ <a><span aria-hidden=“true”>content</span></a>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ All links on a page should have content that is accessible to screen readers.
  
  ℹ Accessible content refers to digital content that is designed and structured in a way that makes it easy for people with disabilities to access, understand, and interact with using assistive technologies.
  
  ℹ Follow these links for more information,
    WCAG 2.4.4
    WCAG 4.1.2
  

有效

¥Valid

<a>content</a>

function html() {
    return { __html: "foo" }
}
<a dangerouslySetInnerHTML={html()} />

<a><TextWrapper aria-hidden={true} />content</a>

<a><div aria-hidden="true"></div>content</a>

可访问性指南

¥Accessibility guidelines

• WCAG 2.4.4

• WCAG 4.1.2

相关链接

¥Related links

• 禁用规则

  ¥Disable a rule

• 配置代码修复

  ¥Configure the code fix

• 规则选项

  ¥Rule options

• 源代码

  ¥Source Code

• 测试用例

  ¥Test Cases