How to tell a screen reader to use an attribute instead of the link text?

Question

I have a link within an unordered list as follows:

<li class="savelink">
  <a href="/save"><span>Save</span></a>
</li>

Normally the screen readers read "Save". Is it possible, and with which attribute, to change that without changing the actual link text?

The business need is to have a link, styled with an icon. The icon will be complementary to the link text. For example:

An icon of a "+" sign and a link text "menu" that is equal to the "add menu item" action.

I tried aria-label, with no success.

What's the use case here? Knowing why you're trying to do this might suggest some solutions. — steveax, May 14 '13 at 15:08
added more info to the main question body. basically we have a series of the links with the same text, but the icon differenciates the action. For example "new menu" "delete menu" (icons: new, delete; link text: menu) — George Katsanos, May 14 '13 at 18:32
NVDA in particular aggressively and intentionally gives precedence to the link text. Try @Steve Faulkner's solution, it explicitly instructs the screen reader to ignore that content. — ckundo, May 15 '13 at 01:33

score 6 · Answer 1 · answered May 14 '13 at 19:11

6

try

answered May 14 '13 at 19:11

Steve Faulkner

2,572
15
17

NVDA seems to ignore aria-hidden... therefore always gives precedence in the link text – George Katsanos May 15 '13 at 08:13

score 2 · Answer 2 · edited May 15 '13 at 19:50

2

I don't understand why you don't want to change the actual link text if the destination performs different actions. Or, use an actual image as an icon (as it communicates meaning rather than being purely decorative) and use alt text on that.

edited May 15 '13 at 19:50

FelipeAls

21,711
8
54
74

answered May 14 '13 at 18:41

bruce lawson

21
1

1

Old question, sure, but our use case is for pagination. we want screen readers to read "Page 1, Page 2, Page 3", but users only see link text: 1 2 3 (its a coincidence that both places show numbers. The question is a valid one, there should be a trivial and standardized way to have screen readers read a value from a tag's special attribute instead of the value of the contents of the tag itself, without adding an internal wrapper ` – JamesWilson Aug 26 '14 at 23:26

score 2 · Answer 3 · answered May 14 '13 at 18:53

As the icons carry meaning, you should include them using img. Then use the alt attribute accordingly. You might have to reformulate some phrases, e.g. when you need to express "Add menu item" with an icon representing "add", you’d need to use "menu item" (instead of "menu") to the link.

<a href="/add"><img src="add-icon.png" alt="Add"> menu item</a>

The alternative to using img would be to use CSS to display the icons and visually hide the full link text, so that it is only read to screen reader users (or those users that deactivate CSS). Here you could use the clip method.

<a href="/add"><span class="visually-hide">Add</span> menu item</a>

How to tell a screen reader to use an attribute instead of the link text?

3 Answers3

Linked