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

根据屏幕显示，使用JavaScript进行读取

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

资料来源：

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

我使用JavaScript发送类似的电子邮件。一个小函数解密该值并将其存储在

href

-属性中，同时替换占位符文本：

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

我的问题是：

• 这条路通吗
• 我是否需要应用aria角色来明确使用JavaScript将内容替换为真实值

---

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

几点意见：

一般来说，对于屏幕阅读器而言，链接就是一个链接，屏幕阅读器只会读取链接文本（“此电子邮件正在受到保护…”）和链接这一事实。激活链接后，由浏览器来执行操作（但请参见下面的注释）

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

如何触发脚本？屏幕阅读器用户将使用键盘，因此您可以按enter键激活链接。您是否监视鼠标单击事件？Links（）是一种特殊情况，在一个链接上按enter键将触发onclick事件，因此在这里您在跟踪该链接时应该是确定的

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

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

---

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

我已经更新了问题，使转换更加清晰。占位符文本（我是指转换之前

a

-元素中的文本；）将被替换，当然还会添加

href

-属性。这发生在文档准备就绪时。那么，屏幕阅读器在任何情况下都会看到更新的链接吗？所有JavaScript函数是否都像在没有屏幕阅读器的情况下访问页面一样执行？屏幕阅读器是否允许通过JavaScript更改文本？非常感谢你的努力。谢谢你的澄清。它可能会工作，但取决于您的脚本。是否有我可以用屏幕阅读器测试的示例页面/演示页面？

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