HTML:如何在可访问性的上下文中指定定位元素的标签

Question

这是要求： 我有一个代表链接的锚元素。

<a href ="login.html">3</a>

目前屏幕阅读器(JAWS(宣布它为"链接3"但我想使屏幕阅读器将其读取为"链接3登录页面">

为了使它工作，我在锚元素中添加了标题属性。

<a href ="login.html" title="Login Page">3</a>

现在宣布为"链接3登录页面">

但问题是..根据可访问性指南，不建议使用"title"属性，因为它在大多数屏幕阅读器和浏览器组合中都失败了。

我使用"aria-label"代替，在这种情况下，它只读取"登录页面"。

<a href ="login.html" aria-label="Login Page">3</a>

如何使屏幕阅读器同时读取"链接 3 和登录页面">

Answer 1

像这样的事情呢：

.screenreader {
position: absolute !important; /* Outside the DOM flow */
height: 1px; width: 1px; /* Nearly collapsed */
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

<a href ="login.html">3 <span class="screenreader">- Login page</span></a>

您的屏幕阅读器将像"链接 3 - 登录页面"一样阅读它，但您的用户只能看到"3">

Answer 2

我认为克莱门特在这里没有使用CSS-只需在咏叹调标签中添加一些标点符号即可。咏叹调标签="链接 3.登录页面"应该这样做。祝你好运！