最佳实践：a 元素和屏幕阅读器中的加密电子邮件地址

Question

根据The Accessibility Project 屏幕读取使用JavaScript。

Web 开发人员的一个常见误解是屏幕阅读器只阅读非 JavaScript 页面。由于这种误解，我们有时认为没有必要让 JavaScript 应用程序和其他功能可访问。这绝对是错误的。

来源：MYTH: Screen readers don’t use JavaScript

我的问题仍然是，以哪种方式？

我使用 JavaScript 放置与此类似的电子邮件。一个小函数解密该值并将其存储在href-attribute 以及替换占位符文本：

<a data-value="[encrypted email]">This E-Mail is being protected against bots. […]</a>

在文档准备好时变成这样：

<a href="mailto:somebody@somedmaincom">somebody@somedmaincom</a>

我的问题是：

• 这种方式可以通行吗？
• 除了明确使用 JavaScript 将内容替换为实际值之外，我是否必须应用 aria-role？

Answer 1

它可以访问吗？这取决于您的 JavaScript 函数。查看实现此功能的页面会更容易。

几个cmets：

一般来说，就屏幕阅读器而言，链接就是链接，屏幕阅读器只会阅读链接文本（“此电子邮件受保护...”）以及它是链接的事实。激活链接时由浏览器执行某些操作（但请参见下面的 cmets）。

您的示例代码没有 href 属性。这通常意味着无法使用键盘访问“链接”（它不被视为没有 href 的链接），这将是一个可访问性问题。通过添加 href （具有任何值）来解决此问题，例如添加 href="#"。

你如何触发你的脚本？屏幕阅读器用户将使用键盘，因此您将按下回车键来激活链接。你注意鼠标点击事件吗？链接（）是一种特殊情况，在链接上按回车会触发onclick事件，所以在点击链接时应该没问题。

您提到占位符文本：这是一个链接而不是输入字段，所以我假设您更改了链接文本？你怎么做到这一点？如果它发生在鼠标悬停时，则不会为键盘用户（包括屏幕阅读器）触发。添加例如当键盘焦点到达该字段时触发相同功能的 onfocus 事件。

当您使用 JavaScript 更改链接文本时，屏幕保护程序应该“看到”更改并读取新文本（如果它仍然读取旧文本尝试不同的方法来更改链接文本，有几种方法可以做到这一点在 JavaScript 中）。我不确定屏幕保护程序是否会立即阅读新文本，或者您是否需要自己将屏幕阅读器焦点重新移回文本。您可以通过将属性 role="alert" 添加到包含文本的容器元素来强制屏幕保护程序读取新文本（无论焦点在哪里）。

如果您有任何其他鼠标事件，您还需要添加相应的键盘事件。但我认为这就是一切。发布一个示例页面的链接，然后我可以进一步评论。