Skip to content

Commit 848ce2e

Browse files
committed
Update docs
1 parent e5adc3b commit 848ce2e

File tree

2 files changed

+33
-2
lines changed

2 files changed

+33
-2
lines changed

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,24 @@ 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
15+
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.
17+
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>
23+
```
24+
25+
This is acceptable:
26+
```
27+
<a href="..." aria-label="Read more about the new accesibility feature">Read more</a>
28+
```
29+
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.
31+
1432
## Resources
1533

1634
- [Primer: Links](https://primer.style/design/accessibility/links)
@@ -43,6 +61,11 @@ Learn more about how to write descriptive link text at [Access Guide: Write desc
4361
<%= link_to "Learn more", "#" %>
4462
```
4563

64+
```erb
65+
<!-- also bad -->
66+
<a href="github.com/about" aria-label="Why dogs are awesome">Read more</a>
67+
```
68+
4669
### **Correct** code for this rule 👍
4770

4871
```erb
@@ -52,3 +75,8 @@ Learn more about how to write descriptive link text at [Access Guide: Write desc
5275
```erb
5376
<a href="github.com/new">Create a new repository</a>
5477
```
78+
79+
```erb
80+
<!-- not ideal but won't be flagged -->
81+
<a aria-label="Learn more about GitHub" href="github.com/about">Learn more</a>
82+
```

test/linters/accessibility/avoid_generic_link_text_counter_test.rb

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,9 @@ def test_does_not_warn_when_generic_text_is_link_rails_helper_sub_text
148148
def test_handles_files_with_various_links
149149
@file = <<~ERB
150150
<p>
151-
<a aria-labelledby='someElement'>Click here</a>
151+
<a href="github.com" aria-label='Click here to learn more'>Click here</a>
152+
<a href="github.com" aria-label='Some totally different text'>Click here</a>
153+
<a href="github.com" aria-labelledby='someElement'>Click here</a>
152154
</p>
153155
<p>
154156
<%= link_to "learn more", billing_path, "aria-label": "something" %>
@@ -160,7 +162,8 @@ def test_handles_files_with_various_links
160162
@linter.run(processed_source)
161163

162164
refute_empty @linter.offenses
163-
assert_equal 3, @linter.offenses.count
165+
# 3 offenses, 1 related to matching counter comment not present despite violations
166+
assert_equal 4, @linter.offenses.count
164167
end
165168

166169
def test_does_not_warns_if_element_has_correct_counter_comment

0 commit comments

Comments
 (0)