David
I have a context where I have set of links of the type:
<a href="link">More Information</a>
on the same page, and it really isn't possible to vary the "More Information" link text in this situation. Obviously, this is bad news for accessibility.
**What is the best way of differentiating these links for those using screen readers?** I am guessing there is some kind of ARIA provision for this, but I'm not familiar with that spec(?), and it may be there are other solutions, too.
Top Answer
David
One [recommended way][1] of doing this is to use the `aria-label` attribute. Quoting from the information at that W3.org link:
> In some situations, designers may choose to lessen the visual appearance of links on a page by using shorter, repeated link text such as "read more". These situations provide a good use case for `aria-label` in that the simpler, non-descriptive "read more" text on the page can be replaced with a more descriptive label of the link.
For the use-case described by OP, the result could be something like this (if this is a set of short entries on cartoon characters, say):
```
<a href="link" aria-label="More information about Daffy Duck">More Information</a>
```
In this example, the `aria-label` attribute would differentiate the entry for Daffy Duck from that for Bugs Bunny.
I admit to be a little bit confused by [the descriptor for `aria-label`][2] elsewhere in the documentation. It says that
> If the label text is visible on screen, authors ***SHOULD*** use `aria-labelledby` and ***SHOULD NOT*** use `aria-label`.
Since they do not provide examples of correct and incorrect use, I'm left a little puzzled by the scenarios they have in mind. This deepens when the documentation goes on to differentiate the following:
> The `aria-labelledby` attribute is similar to `aria-describedby` in that both reference other elements to calculate a text alternative, but a label should be concise, where a description is intended to provide more verbose information.
So, it's possible that in OP's scenario *any of these three `aria` attributes might work* — but following the first piece of guidance noted above seems reasonable.
[1]: https://www.w3.org/WAI/GL/wiki/Using_aria-label_for_link_purpose#Example_1:
[2]: https://www.w3.org/TR/wai-aria-1.1/#aria-label
Answer #2
Pax
### Use `aria-labelledby` if descriptive labels are visible on screen [[w3.org](https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html)]
✅ Use visible labels with `aria-labelledby`
```
<h2 id="headline">Storms hit east coast</h2>
<p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
<a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a></p>
```
❌ Instead of not using visible labels with `aria-label`
```
<h2 id="headline">Storms hit east coast</h2>
<p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
<a id="p123" href="news.html" aria-label="Read more about storms that hit the east coast">Read more...</a></p>
```
### Otherwise, use `aria-label` [[w3.org](https://www.w3.org/WAI/GL/wiki/Using_aria-label_for_link_purpose#Example_1:)]
```
<h4>Neighborhood News</h4>
<p>
Seminole tax hike: Seminole city managers are proposing a 75% increase in property taxes for the coming fiscal year.
<a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
</p>
```