javascript - 用画外音增加 `role="spinbutton"`

Question

我正在努力使用 <input type="text" role="spinbutton" /> 实现具有递增/递减行为的可访问输入HTML/JavaScript 中的元素。但似乎 VoiceOver 有用于递增/递减的自定义(假？)输入事件，这些事件会以意想不到的方式改变输入的值。

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

例如，使用这样的 super 精简代码:

function logIt(...args) {
  document.getElementById('output').appendChild(
    document.createTextNode(`${args.join(', ')}\n`)
  );
}

document.getElementById("myInput").addEventListener('input', (e) => {
  debugger;
  logIt(e.type, e.data, String(e));
  e.target.setAttribute('aria-valuenow', e.target.value);
}, false);

document.getElementById("myInput").addEventListener('keydown', (e) => {
  logIt(e.type, e.data, String(e));
}, false);

      <input
        id="myInput"
        type="text"
        role="spinbutton"
        autocomplete="off"
        defaultValue="1"
        aria-valuenow="1"
        aria-valuemin="0"
        aria-valuemax="100"
      />
    </div>
    <pre id="output"></pre>

... VoiceOver 将输入描述为“步进器”，并提供有关如何使用键盘增加/减少的说明。但是使用这些键盘命令会导致一些奇怪的数学运算，如下面的屏幕截图所示:



您还可以看到(从屏幕截图中的“日志记录”)当用户输入输入时， InputEvent由 event.type 触发正在 input - 但是当使用 VoiceOver 键盘命令进行递增/递减时，基本类型为 Event由 event.type 触发再次设置为 input .

这似乎不是我的 role="spinbutton" 实现所独有的。 . jQuery UI 微调器在使用 VoiceOver 键盘命令递增/递减时表现不佳:



我什至尝试了 role="spinbutton" 的一些 w3c 示例:

https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html 上的字体大小小部件

https://www.w3.org/TR/wai-aria-practices/examples/spinbutton/datepicker-spinbuttons.html 上的日期选择器

...即使 VoiceOver 将这些 UI 控件中的每一个都描述为“步进器”，并提供了有关如何使用键盘增加/减少它们的说明，但这些说明似乎不起作用。其他键盘行为有效 - 但 VoiceOver 建议的那些无效。

我该怎么做才能确保 role="spinbutton"标记可以与 VoiceOver 的递增/递减键盘命令一起正常工作吗？

Answer 1

我不相信role="spinbutton"与 VoiceOver 兼容，因为 VoiceOver 似乎在使用 VoiceOver 光标时劫持了 keydown 事件。因此，当关注 role="spinbutton" 的元素时VoiceOver 指示用户使用“Control-Option DownArrow”或“Control-Option UpArrow”来减少或增加值。当这些键被按下时，事件不会进入任何 JavaScript keyDown 事件处理程序，因此我们无法检测到这些键已被按下，也无法实现值的实际递增或递减。所以我不确定有什么方法可以使用role="spinbutton"并使其与 VoiceOver 一起使用。将向用户提供不起作用且令人困惑的指令。

作为我正在处理的应用程序的解决方法，我实现了 WAI ARIA authoring practices for spinbutton 中描述的 key 处理行为。但我没有添加role="spinbutton"或列出的其他 aria 属性。相反，我添加了 aria-live="assertive"这样当通过键盘或单击递增/递减按钮更改值时，用户会听到新值。此外，我添加了一些视觉上隐藏的文本，指导用户如何使用键盘增加/减少值，并使用 aria-describedby 将其与输入相关联。 .