iOS 上的自动对焦会自动显示选取器

Question

我正在开发一个Web应用程序，该应用程序具有许多区域，这些区域在整个应用程序的使用过程中动态显示和隐藏。

由于应用程序正在努力实现 WCAG 合规性，因此我有适当的逻辑，当激活区域时，导致激活的任何区域的第一个可选输入接收焦点。这允许视障用户将其注意力应用于应用程序的适当区域。

这在Windows，Android和MacOS上非常有效。但是，当使用 iOS Safari 时，当<select>获得焦点时，选取器会自动激活。这是不希望的行为，因为每次激活这些区域时，都会显示选取器对话框。

有没有办法让它在元素获得焦点时 iOS Safari 不显示选取器对话框？

Answer 1

我很

确定简短的答案是否定的。除非你为应用创建自己的 iOS 包装器，并控制集合视图的流，否则操作系统将接管并为所选字段显示正确类型的控件。

您可以通过更改字段的类型属性来破解它，但这有点脏。

Answer 2

表单中的自动对焦元素可能是一个适得其反的辅助功能想法。例如，请参阅 http://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/。

如果您希望将视障人士的注意力定向到某个区域，则应使用标准方式来实现该aria-live例如属性。

话虽如此，您可以尝试将焦点放在元素的标签上。然后，残障用户将能够选择具有常见快捷方式/击键的关联元素。

Answer 3

我最终通过在使用 iOS 时将焦点分配给父元素来解决此问题。这适用于我的应用程序，这要归功于 HTML 的结构。

我考虑过使用<aria-live>但这不适合模态禁用背景的情况。理想的行为将焦点指向模态，然后用户在确认或关闭它之前无法摆脱它。

我用来解决此问题的代码如下：

if (navigator.userAgent.search(/iPad|iPhone|iPod/g) === -1) {
    focus(currentControl);
} else {
    currentControl.parentElement.setAttribute("tabindex", "-1");
    focus(currentControl.parentElement);
    currentControl.parentElement.removeAttribute("tabindex");
}

setAttribute用于父元素是 <div> 或其他不可制表的元素的情况。

不是一个理想的解决方案，但它对我有用。