Headings must be accessible

문서 > 코드 분석 > Static Analysis Rules > Headings must be accessible

이 페이지는 아직 한국어로 제공되지 않으며 번역 작업 중입니다. 번역에 관한 질문이나 의견이 있으시면 언제든지 저희에게 연락해 주십시오.

Metadata

ID: jsx-react/no-unaccessible-heading

Language: JavaScript

Severity: Warning

Category: Code Style

Description

This rule ensures that all heading elements in your JavaScript code are accessible to all users, including those using assistive technologies like screen readers. This helps ensure that your web pages are inclusive and accessible to all users, regardless of their abilities or disabilities.

In the non-compliant code example, the heading element <h1 aria-hidden>Foo</h1> is marked with the aria-hidden attribute, which hides the element from assistive technologies. This is a violation of the rule because it makes the heading inaccessible to users who rely on these technologies.

To avoid these violations, ensure that all your heading elements are visible to assistive technologies and provide useful information. Don’t use the aria-hidden attribute on them unless it’s absolutely necessary.

Non-Compliant Code Examples

function Test() {
  return (
    <>
      <h1 aria-hidden>Foo</h1>
      <h1/>
    </>
  );
}

Compliant Code Examples

function Test() {
  return (
    <h1>Foo</h1>
  );
}