Javascript 递增一个'role=";“旋转按钮”画外音

Javascript 递增一个'role=";“旋转按钮”画外音,javascript,html,accessibility,wai-aria,voiceover,Javascript,Html,Accessibility,Wai Aria,Voiceover,我正在努力使用HTML/JavaScript中的元素实现具有递增/递减行为的可访问输入。但VoiceOver似乎有一些用于递增/递减的自定义(假?)输入事件,它们以意外的方式更改输入的值 如何确保使用辅助技术浏览页面的用户在尝试与我的小部件交互时不会从VoiceOver获得错误的指导 例如,使用如下超级精简代码: 函数logIt(…args){ document.getElementById('output').appendChild( document.createTextNode(`${a

我正在努力使用HTML/JavaScript中的
元素实现具有递增/递减行为的可访问输入。但VoiceOver似乎有一些用于递增/递减的自定义(假?)输入事件,它们以意外的方式更改输入的值

如何确保使用辅助技术浏览页面的用户在尝试与我的小部件交互时不会从VoiceOver获得错误的指导

例如,使用如下超级精简代码:

函数logIt(…args){
document.getElementById('output').appendChild(
document.createTextNode(`${args.join(',')}\n`)
);
}
document.getElementById(“myInput”).addEventListener(“input”,(e)=>{
调试器;
logIt(e.type,e.data,String(e));
e、 setAttribute('aria-valuenow',e.target.value);
},假);
document.getElementById(“myInput”).addEventListener('keydown',(e)=>{
logIt(e.type,e.data,String(e));
},假)

我认为
role=“spinbutton”
与VoiceOver不兼容,因为VoiceOver似乎在使用VoiceOver光标时劫持了按键事件。因此,当使用
role=“spinbutton”
VoiceOver关注某个元素时,会指示用户使用“控制选项向下箭头”或“控制选项向上箭头”来减少或增加该值。当按下这些键时,事件不会传递给任何JavaScript keyDown事件处理程序,因此我们无法检测到这些键是否被按下,也无法实现值的实际递增或递减。因此,我不确定是否有任何方法可以使用
role=“spinbutton”
并使其与画外音一起工作。用户将得到不起作用且令人困惑的说明

作为我正在处理的应用程序的变通方法,我已经实现了中描述的密钥处理行为,但我没有添加
role=“spinbutton”
或列出的其他aria属性。相反,我添加了
aria live=“assertive”
,这样当通过键盘或单击递增/递减按钮更改值时,用户会听到新值。此外,我还添加了一些视觉隐藏文本,指导用户如何使用键盘增减数值,并使用我刚刚访问过的
aria描述的
将其与输入相关联,而且它似乎在VoiceOver Mac(带Safari的OS 10.15.1版)中可以通过键盘操作。您可以检查他们使用的代码,并从中获得灵感

但是,当步进器接收到焦点时,w3 spinbutton示例不会宣布当前值,或者会随着您的上下移动而改变。我尝试了中等和高详细度设置,但没有成功

未能公布该值(或者
aria valuetext
或者
aria valuenow
或者两者兼而有之)似乎是苹果方面的一个缺陷,所以我刚刚报告了它。接得好


这可能会被aria live区域侵入,但最终可能会在其他浏览器/屏幕阅读器组合上出现重复的公告。

您是按照画外音的指示使用“控制选项向上箭头”还是只使用向上箭头和向下箭头?是的。我尝试了这两种方法(在我的例子中,我使用caps lock作为我的VO键,而不是Ctrl选项)。此外,spinbutton设计文档非常清晰,如果spinbutton处于焦点位置,向下箭头应该可以自己工作。是否可以提供一些您所做的代码示例?