How to tell a screen reader to use an attribute in

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

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.

Answer 3

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>