Question

I basically have the following series of links like the HTML below:

<a href="http://mylink0.com">Learn more</a>
<a href="http://mylink1.com">Learn more</a>
<a href="http://mylink2.com">Learn more</a>
<a href="http://mylink3.com">Learn more</a>

All the link text are the same. I read this is horrible for a screen reader user. I'd like to differentiate what the screen reader would read even though I have the same link for all the links. Is this possible?

<a href="http://mylink0.com">Learn more</a> Screen reader should read Red Store
<a href="http://mylink1.com">Learn more</a> Screen reader should read Blue Store
<a href="http://mylink2.com">Learn more</a> Screen reader should read Green Store
<a href="http://mylink3.com">Learn more</a> Screen reader should read Yellow Store

Answer 1

W3C有a document about this sort of thing。您可以在链接中添加aria-label属性，以提供适用于辅助技术的替换内容文本。

<a href="http://mylink0.com" aria-label="Red Store">Learn more</a>

虽然您可能希望重新考虑如何标记链接的开头。

Answer 2

我知道您已经接受了答案，但所有用户最好制作描述性链接而不是依赖ARIA。 ARIA是一种桥接技术，而不是屏幕阅读器的解决方法。

我在链接下面引用了以下文章。 ~~我将在以后不在移动设备上重新格式化。~~

https://www.nngroup.com/articles/learn-more-links/

因此，如果您使用描述性标签而不是独立的了解更多文本，您的副本将以多种方式受益：


链接将更容易访问。

链接对用户更具吸引力，可能更有说服力。

用户在页面点击时会感到更自信。

页面上的更多关键字有助于搜索引擎优化。

有意义的链接将独立存在，并帮助扫描页面的用户。


[...]

选项1：使用描述链接目的地的关键字。

[...]

选项2.保留“了解更多”格式并添加描述性关键字。

[...]

选项3：将前一段标题转换为唯一的链接。

Answer 3

Learn more，Details等链接是不好的做法。

考虑删除此类链接，并使用有意义的文本（通常是块标题）作为链接。

如果您无法更改当前设计，请考虑将有意义的文本放入title链接的Learn more属性中。

屏幕阅读器是否可以区分<a> link text?

3 个答案: