Skip to content

Commit 401496b

Browse files
Update avoid-generic-link-text-counter.md
Co-authored-by: Andri Alexandrou <[email protected]>
1 parent 1968894 commit 401496b

File tree

1 file changed

+19
-11
lines changed

1 file changed

+19
-11
lines changed

docs/rules/accessibility/avoid-generic-link-text-counter.md

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,31 @@ Additionally, generic link text can also problematic for heavy zoom users where
1111
Ensure that your link text is descriptive and the purpose of the link is clear even when read out of context of surrounding text.
1212
Learn more about how to write descriptive link text at [Access Guide: Write descriptive link text](https://www.accessguide.io/guide/descriptive-link-text)
1313

14-
### Use of ARIA attributes
14+
If you _must_ use ARIA to replace the visible link text, include the visible text at the beginning.
1515

16-
It is acceptable to use `aria-label` or `aria-labelledby` to provide a more descriptive text in some cases. As note above, this is not the preferred solution and one should strive to make the visible text to be as descriptive as the design allows.
16+
For example, on a pricing plans page, the following are good:
17+
- Visible text: `Learn more`
18+
- Accessible label: `Learn more about GitHub pricing plans`
1719

18-
If you _must_ use this technique, you need to ensure that the accessible name completely contains the visible text. Otherwise, this is a failure of [SC 2.5.3: Label in Name](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html).
19-
20-
This is not acceptable:
21-
```
22-
<a href="..." aria-label="GitHub announces something">Read more</a>
20+
Accessible ✅
21+
```html
22+
<a href="..." aria-label="Learn more about GitHub pricing plans">Learn more</a>
2323
```
2424

25-
This is acceptable:
26-
```
27-
<a href="..." aria-label="Read more about the new accesibility feature">Read more</a>
25+
Inaccessible 🚫
26+
```html
27+
<a href="..." aria-label="GitHub pricing plans">Learn more</a>
2828
```
2929

30-
This linter will raise a flag when it is able to detect that a generic link has an accessible name that doesn't contain the visible text. Due to the restrictions of static code analysis, this may not catch all violations so it is important to supplement this check with other techniques like browser tests. For instance, ERB lint will not be able to evaluate the accessible name set by `aria-labelledby` or when a variable is set to `aria-label` since this requires runtime evaluation.
30+
Including the visible text in the ARIA label satisfies [SC 2.5.3: Label in Name](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html).
31+
32+
#### False negatives
33+
34+
Caution: because of the restrictions of static code analysis, we may not catch all violations.
35+
36+
Please perform browser tests and spot checks:
37+
- when `aria-label` is set dynamically
38+
- when using `aria-labelledby`
3139

3240
## Resources
3341

0 commit comments

Comments
 (0)