区分鼠标“点击”和屏幕阅读器“按”

时间:2015-05-05 14:52:22

标签: javascript jquery accessibility screen-readers voiceover

我正在创建一个可访问的网站菜单,并希望区分鼠标“点击”和VoiceOver“按”以打开子菜单。当我在console.log上事件时,在VoiceOver“按”而不是键盘事件上触发鼠标事件。

有没有办法分辨出来?

目前菜单是基于鼠标悬停的,我已经阻止Click事件切换子菜单。但是我想键盘只有用户才能打开带有屏幕阅读器的子菜单,指示用户使用命令+选项+空格键进行PRESS,触发鼠标事件“点击”......

我现在正在处理的一个解决方案是仅在悬停处于活动状态时禁用点击事件...

更新

目标: 触发一个巨型菜单弹出窗口,供那些可以查看和链接到显示巨型菜单链接的页面的人们查看。根据我的研究,大型菜单,即使编码精美,对视障者来说也是一种痛苦。认识到菜单已经扩展是不直观的,即使咏叹调可以告诉菜单项是可扩展的,在扩展时似乎没有通知。我认为用户导航到新页面并跳到超级菜单链接的内容会更好。

解决方案: 通过使用一组事件监听器,我能够成功并独立地定位键盘ENTER单击VoiceOver / screenreader点击和鼠标点击。

在mousein到菜单项时,我设置了一个preventClick标志,在mouseout上我删除了标志,这样单击菜单项就不会跟随链接而只打开子菜单。

在keydown上,我检查是否按下了“enter”键。如果是这样的话,我会显示子菜单并阻止链接被跟踪,以便用户和标签通过大型菜单项。

单击屏幕阅读器,点击专用于显示超级子菜单的页面的链接。

或者,对于屏幕阅读器,我可以打开子菜单并将键盘焦点发送到子菜单的第一个元素。不确定这对用户来说是否更直观。

查看: 如果您认为此解决方案存在问题,请与我们联系。到目前为止它的效果很好。它假设人们运动控制问题和良好的视力使用tab + enter导航和视障人士使用他们的屏幕阅读器点击等效例如。 VoiceOvers Command + Option + Space。

2 个答案:

答案 0 :(得分:2)

您将从此博客文章中注意到,无法区分鼠标用户和屏幕阅读器用户

http://unobfuscated.blogspot.com/2013/05/event-handlers-and-screen-readers.html

即使有可能,尝试这样做也会被视为侵犯隐私,因为它等同于用户将自己标识为已禁用。没有任何理由想要这样做 - 你的用例是什么?

更新

除了没有悬停的触控设备,你的解决方案将无处不在,不过有人说,你会遇到太多麻烦。只要您在语义上标记大型菜单,盲人用户就可以轻松浏览它。

请查看https://www.capitalone.com/以获取可合理访问的超级菜单实现。

答案 1 :(得分:-1)

最好的方法是覆盖菜单项上的accessibilityPerformAction,处理NSAccessibilityPressAction,然后传递给super的实现,以便像往常一样处理事情,而不会覆盖任何内容。我还没试过这个,但我认为它有很好的工作机会。关键是accessibilityPerformAction由VoiceOver调用(更具体地说是AppKit在VoiceOver请求时提供的辅助功能支持),因此您知道某些辅助技术(例如VoiceOver)要求打开菜单,而不是鼠标。

出于好奇,我仍然想知道你为什么要区分这两种情况,你想要达到的不同行为。