anchorContent
Reports anchor elements without accessible content.
✅ This rule is included in the jsxlogicalandlogicalStrictpresets.
Automated tools such as screen readers and search engine crawlers rely on anchors (links) having contents to understand those links. If anchor is missing accessible content, then it will not be properly understood.
This rule checks that all anchors either have child content or an ARIA property describing the anchor.
Examples
Section titled “Examples”<JSX.IntrinsicElements.a: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
<JSX.IntrinsicElements.a: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
JSX.IntrinsicElements.a: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
<JSX.IntrinsicElements.a: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
JSX.IntrinsicElements.span: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
AriaAttributes["aria-hidden"]?: Booleanish | undefined
Indicates whether the element is exposed to an accessibility API.
aria-hidden /></JSX.IntrinsicElements.a: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
<JSX.IntrinsicElements.a: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
JSX.IntrinsicElements.a: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
<JSX.IntrinsicElements.a: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
AriaAttributes["aria-label"]?: string | undefined
Defines a string value that labels the current element.
aria-label="Link" /><JSX.IntrinsicElements.a: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
HTMLAttributes<HTMLAnchorElement>.title?: string | undefined
When Not To Use It
Section titled “When Not To Use It”If you are using a framework that automatically generates accessible content for anchors, you can safely disable this rule.
Further Reading
Section titled “Further Reading”Equivalents in Other Linters
Section titled “Equivalents in Other Linters”- ESLint:
jsx-a11y/anchor-content - Oxlint:
jsx_a11y/anchor-has-content
Made with ❤️🔥 around the world by
the Flint team and contributors.