Autofocus on iOS 自动显示选择器

Question

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

由于该应用程序正在争取 WCAG Compliance，我有适当的逻辑，当某个区域被激活时，该逻辑会导致任何被激活区域的第一个可选输入获得焦点。这允许有视力障碍的用户将注意力集中在应用程序的适当区域。

这在 Windows、Android 和 MacOS 上工作得很好。但是，当使用 iOS Safari 时，当 <select> 获得焦点时，选择器会自动激活。这是不受欢迎的行为，因为每次激活这些区域时都会显示选择器对话框。

有什么方法可以让 iOS Safari 在元素获得焦点时不显示选择器对话框？

Answer 1

我很确定简短的回答是否定的。除非您为您的应用制作自己的 iOS 包装器并控制集合视图的流程，否则 OS 会接管并显示所选字段的正确控件类型。

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

Answer 2

表单中的自动对焦元素可能会适得其反。例如参见http://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/。

如果您想让视力受损的人注意某个区域，您应该使用标准方法来实现，例如使用 aria-live 属性。

也就是说，您可以尝试将焦点放在元素的标签上。然后，残障用户将能够 select 具有常见 shortcut/keystrokes 的关联元素。

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> 或其他不可标记的元素。

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

Autofocus on iOS 自动显示选择器

Autofocus on iOS automatically displays picker

javascript

ios

picker

autofocus

wcag