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

Question

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

  

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

     

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

对我来说问题仍然是，以哪种方式？

我使用JavaScript发送与此类似的电子邮件。一个小函数解密该值并将其存储在href - 属性中，并替换占位符文本：

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

在文档准备就绪时会出现类似的情况：

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

我的问题是：

• 这种方式可以访问吗？
• 我是否必须应用aria-role作为清楚，使用JavaScript将内容替换为真实值？

Answer 1

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

一些评论：

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

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

如何触发脚本？屏幕阅读器用户将使用键盘，因此您将按下回车键以激活链接。你看小鼠点击事件了吗？链接（＆lt; a href ...＆gt;）是一种特殊情况，在链接上按Enter将触发onclick事件，所以在关注链接时你应该没问题。

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

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

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