用画外音增加`role =“ spinbutton”`

Question

我正在努力使用HTML / JavaScript中的<input type="text" role="spinbutton" />元素来实现具有增量/减量行为的可访问输入。但是似乎在VoiceOver上有一些自定义（伪造的）输入事件，用于递增/递减，它们以意外的方式更改输入的值。

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

例如，使用像这样的超级精简代码：

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"的实现所独有的。使用VoiceOver键盘命令递增/递减时，jQuery UI微调器的效果不佳：

我什至尝试了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似乎劫持了按键事件。因此，当使用role="spinbutton"聚焦元素时，VoiceOver会指示用户使用“ Control-Option DownArrow”或“ Control-Option UpArrow”来减小或增大值。当这些键被按下时，该事件不会进入任何JavaScript keyDown事件处理程序，因此我们无法检测到这些键已被按下，并且无法实现该值的实际递增或递减。因此，我不确定是否可以使用role="spinbutton"使其与VoiceOver一起使用。用户会收到无效的指令，并且会造成混淆。

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

Answer 2

我刚刚访问了w3's spinbutton example，它似乎可以在VoiceOver Mac（带有Safari的OS版本10.15.1）中使用键盘操作。您可以检查他们使用的代码，并从中获得启发。

但是，w3旋钮示例在步进器获得焦点时不会声明当前值，或者在您逐步上下移动时会更改。我没有运气就尝试了中度和高级详细设置。

这次未能公布价值（aria-valuetext或aria-valuenow或两者皆有）似乎是苹果方面的一个错误，因此我只作了报告。好收获。

这可能是一个带有aria直播区域的黑客，但是您可能最终在其他浏览器/屏幕阅读器组合上出现重复的公告。