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

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

A common misconception among web developers is that screen readers only read the non-JavaScript page. Due to this misconception, we sometimes assume it’s unnecessary to make JavaScript apps and other functionality accessible. This is categorically false.

Source: 07001

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

我使用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>

我的问题是：

>这种方式可以访问吗？
>我是否必须应用aria-role除了明确表示使用JavaScript将内容替换为真实值？

解决方法:

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

一些评论：

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

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

你如何触发你的脚本？屏幕阅读器用户将使用键盘,因此您将按下回车键以激活链接.你看小鼠点击事件了吗？链接(< a href ...>)是一种特殊情况,在链接上按Enter键将触发onclick事件,因此在关注链接时您应该可以.

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

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

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

标签：javascript,accessibility,wai-aria,html,screen-readers
来源： https://codeday.me/bug/20190708/1404030.html