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

Best practice: Encrypted email-addresses in a-elements and screen readers

本文关键字：电子邮件地址 加密 屏幕 元素 最佳      更新时间：2023-09-26

根据无障碍项目的屏幕阅读使用JavaScript。

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

来源:神话:屏幕阅读器不使用JavaScript

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

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

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

在document ready时变成如下内容:

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

我的问题是:

  • 这条路可达吗?
  • 我是否必须应用一个咏叹调角色，除了明确，内容被替换为使用JavaScript的实际值?

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

注释:

一般来说，就屏幕阅读器而言，链接就是链接，屏幕阅读器只会读取链接文本("此电子邮件受到保护……")。")，以及它是一个链接的事实。当链接被激活时，由浏览器来做一些事情(但请参阅下面的评论)。

示例代码没有href属性。这通常意味着不能用键盘访问"链接"(它不被视为没有href的链接)，这将是一个可访问性问题。通过添加href(任意值)来修复此问题，例如添加href="#"。

你如何触发你的脚本?屏幕阅读器用户将使用键盘，因此您将得到一个输入键来激活链接。你会注意鼠标点击事件吗?链接()是一种特殊情况，在链接上按enter键会触发onclick事件，所以当你跟随链接时，这里应该没问题。

你提到占位符文本:这是一个链接，而不是一个输入字段，所以我假设你改变了链接文本?你是怎么做到的?如果它发生在鼠标悬停时，那么对于键盘用户(包括屏幕阅读器)就不会触发它。例如，添加一个onfocus事件，当键盘焦点到达该字段时触发相同的函数。

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

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

相关文章：