屏幕阅读器是否可以区分 <a> link 文本？

Question

我基本上有下面这一系列的link，比如下面的HTML：

<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>

所有link的文字都是一样的。我读到这对于屏幕 reader 用户来说太可怕了。我想区分屏幕 reader 将读取的内容，即使我对所有 link 具有相同的 link。这可能吗？

<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

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

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

如果您绝对无法更改当前设计，请考虑将有意义的文本放入 Learn more link.

的 title 属性中

Answer 3

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

我在link下面引用了下面的文章。 ~~稍后不在移动设备上时我会重新格式化它。~~

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

So, if you use descriptive labels instead of standalone Learn More text, your copy will benefit in several ways:

Links will be more accessible.

Links will be more enticing to users and potentially more persuasive.

Users will feel more confident as they click from page to page.

More keywords on the page will help search-engine optimization.

Meaningful links will stand alone and help users who are scanning the page.

[…]

Option 1: Use keywords that describe the link’s destination.

[…]

Option 2. Retain the Learn More format and add descriptive keywords.

[…]

Option 3: Convert the preceding-paragraph heading into the only link.

屏幕阅读器是否可以区分 <a> link 文本？

Is it possible for screen readers to differentiate <a> link text?

html

accessibility

hyperlink

screen-readers