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.

Answer 1

try

<a href="/save" aria-label="poot"><span aria-hidden="true">Save</span></a>

Answer 2

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>