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

Question

我在无序列表中有一个链接，如下所示：

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

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

业务需求是有一个链接，带有图标样式。该图标将作为链接文本的补充。例如：

• 一个“+”号图标和一个与“添加菜单项”操作相同的链接文本“菜单”。

我尝试了 aria-label，但没有成功。

Answer 1

尝试

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

Answer 2

由于图标具有含义，因此您应该使用img. 然后alt相应地使用该属性。您可能需要重新表述一些短语，例如，当您需要用代表“添加”的图标来表达“添加菜单项”时，您需要在链接中使用“菜单项”（而不是“菜单”）。

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

---

使用的替代方法img是使用 CSS 来显示图标并在视觉上隐藏完整的链接文本，以便仅屏幕阅读器用户（或停用 CSS 的用户）阅读。在这里你可以使用clip方法。

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

Answer 3

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