如何告诉屏幕阅读器使用属性而不是链接文本？

Question

我在无序列表中有如下链接：

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

屏幕阅读器通常会显示“保存”。是否有可能以及使用哪个属性在不更改实际链接文本的情况下进行更改？

业务需求是拥有一个带有图标样式的链接。该图标将与链接文本互补。例如：

• “+”符号图标和链接文本“menu”等于“添加菜单项”操作。

我尝试了咏叹调，没有成功。

Answer 1

尝试

＆lt; a href =“/ save”aria-label =“poot”＆gt;＆lt; span aria-hidden =“true”＆gt;保存＆lt; / span＆gt;＆lt; / a＆gt;

Answer 2

如果目标执行不同的操作，我不明白为什么您不想更改实际的链接文本。或者，使用实际图像作为图标（因为它传达意义而不是纯粹的装饰）并在其上使用替代文字。

Answer 3

由于图标具有意义，您应该使用img包含它们。然后相应地使用alt属性。您可能需要重新制定一些短语，例如当您需要用表示“添加”的图标表达“添加菜单项”时，您需要使用“菜单项”（而不是“菜单”）链接。

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

---

使用img的替代方法是使用CSS显示图标并直观地隐藏完整的链接文本，以便仅向屏幕阅读器用户（或停用CSS的用户）读取。在这里，您可以使用clip method。

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