Permalink
Cannot retrieve contributors at this time
91 lines (67 sloc)
2.94 KB
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
codeql-action/node_modules/eslint-plugin-jsx-a11y/docs/rules/anchor-ambiguous-text.md
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# jsx-a11y/anchor-ambiguous-text | |
🚫 This rule is _disabled_ in the ☑️ `recommended` config. | |
<!-- end auto-generated rule header --> | |
Enforces `<a>` values are not exact matches for the phrases "click here", "here", "link", "a link", or "learn more". Screenreaders announce tags as links/interactive, but rely on values for context. Ambiguous anchor descriptions do not provide sufficient context for users. | |
## Rule options | |
This rule takes one optional object argument with the parameter `words`. | |
```json | |
{ | |
"rules": { | |
"jsx-a11y/anchor-ambiguous-text": [2, { | |
"words": ["click this"], | |
}], | |
} | |
} | |
``` | |
The `words` option allows users to modify the strings that can be checked for in the anchor text. Useful for specifying other words in other languages. The default value is set by `DEFAULT_AMBIGUOUS_WORDS`: | |
```js | |
const DEFAULT_AMBIGUOUS_WORDS = ['click here', 'here', 'link', 'a link', 'learn more']; | |
``` | |
The logic to calculate the inner text of an anchor is as follows: | |
- if an element has the `aria-label` property, its value is used instead of the inner text | |
- if an element has `aria-hidden="true`, it is skipped over | |
- if an element is `<img />` or configured to be interpreted like one, its `alt` value is used as its inner text | |
Note that this rule still disallows ambiguous `aria-label` or `alt` values. | |
Note that this rule is case-insensitive, trims whitespace, and ignores certain punctuation (`[,.?¿!‽¡;:]`). It only looks for **exact matches**. | |
### Succeed | |
```jsx | |
<a>read this tutorial</a> // passes since it is not one of the disallowed words | |
<a>${here}</a> // this is valid since 'here' is a variable name | |
<a aria-label="tutorial on using eslint-plugin-jsx-a11y">click here</a> // the aria-label supersedes the inner text | |
``` | |
### Fail | |
```jsx | |
<a>here</a> | |
<a>HERE</a> | |
<a>link</a> | |
<a>click here</a> | |
<a>learn more</a> | |
<a>learn more.</a> | |
<a>learn more,</a> | |
<a>learn more?</a> | |
<a>learn more!</a> | |
<a>learn more:</a> | |
<a>learn more;</a> | |
<a>a link</a> | |
<a> a link </a> | |
<a><span> click </span> here</a> // goes through element children | |
<a>a<i></i> link</a> | |
<a><i></i>a link</a> | |
<a><span aria-hidden="true">more text</span>learn more</a> // skips over elements with aria-hidden=true | |
<a aria-label="click here">something</a> // the aria-label here is inaccessible | |
<a><img alt="click here"/></a> // the alt tag is still ambiguous | |
<a alt="tutorial on using eslint-plugin-jsx-a11y">click here</a> // the alt tag is only parsed on img | |
``` | |
## Accessibility guidelines | |
Ensure anchor tags describe the content of the link, opposed to simply describing them as a link. | |
Compare | |
```jsx | |
<p><a href="#">click here</a> to read a tutorial by Foo Bar</p> | |
``` | |
which can be more concise and accessible with | |
```jsx | |
<p>read <a href="#">a tutorial by Foo Bar</a></p> | |
``` | |
### Resources | |
1. [WebAIM, Hyperlinks](https://webaim.org/techniques/hypertext/) | |
2. [Deque University, Link Checklist - 'Avoid "link" (or similar) in the link text'](https://dequeuniversity.com/checklists/web/links) |