Skip to content

Latest commit

 

History

History
91 lines (59 loc) · 2.89 KB

a11y-no-generic-link-text.md

File metadata and controls

91 lines (59 loc) · 2.89 KB
Raw

Disallow generic link text (github/a11y-no-generic-link-text)

❌ This rule is deprecated. It was replaced by jsx-a11y/anchor-ambiguous-text.

Rule Details

Avoid setting generic link text like, "Click here", "Read more", and "Learn more" which do not make sense when read out of context.

Screen reader users often tab through links on a page to quickly find content without needing to listen to the full page. When link text is too generic, it becomes difficult to quickly identify the destination of the link. While it is possible to provide a more specific link text by setting the aria-label, this results in divergence between the label and the text and is not an ideal, future-proof solution.

Additionally, generic link text can also problematic for heavy zoom users where the link context is out of view.

Ensure that your link text is descriptive and the purpose of the link is clear even when read out of context of surrounding text. Learn more about how to write descriptive link text at Access Guide: Write descriptive link text

Use of ARIA attributes

If you must use ARIA to replace the visible link text, include the visible text at the beginning.

For example, on a pricing plans page, the following are good:

  • Visible text: Learn more
  • Accessible label: Learn more about GitHub pricing plans

Accessible ✅

<a href="..." aria-label="Learn more about GitHub pricing plans">Learn more</a>

Inaccessible 🚫

<a href="..." aria-label="GitHub pricing plans">Learn more</a>

Including the visible text in the ARIA label satisfies SC 2.5.3: Label in Name.

False negatives

Caution: because of the restrictions of static code analysis, we may not catch all violations.

Please perform browser tests and spot checks:

  • when aria-label is set dynamically
  • when using aria-labelledby

Resources

Examples

Incorrect code for this rule 👎

<a href="github.com/about">Learn more</a>
<a href="github.com/about">Read more</a>
<a href="github.com/about" aria-label="Why dogs are awesome">
  Read more
</a>
<a href="github.com/about" aria-describedby="element123">
  Read more
</a>

Correct code for this rule 👍

<a href="github.com/about">Learn more about GitHub</a>
<a href="github.com/new">Create a new repository</a>

Version