Question

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

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

目前，屏幕阅读器（JAWS）宣布它为“Link 3” 但我想让屏幕阅读器将其读作“Link 3 Login Page”

为了使它工作，我将title属性添加到锚元素。

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

现宣布为“Link 3登录页面”

但问题是..根据可访问性指南，由于在大多数屏幕阅读器和浏览器组合中失败，因此不推荐使用“title”属性。

我使用了“aria-label”，然后在这种情况下只读取“登录页面”。

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

如何让屏幕阅读器同时读取“链接3和登录页面”

Answer 1

这样的事情：

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

您的屏幕阅读器会像＆＃34;链接3 - 登录页面＆＃34;但是你的用户只看到＆＃34; 3＆＃34;

Answer 2

我认为Clement没有使用CSS就在这里 - 只需在aria标签上添加一些标点符号。 Aria-label =＆＃34;链接3.登录页面＆＃34;应该这样做。祝你好运！

HTML：如何在可访问性的上下文中指定要锚定元素的标签

2 个答案: