Question

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

当应用程序正在努力WCAG Compliance时，我有逻辑，导致激活任何区域的第一个可选输入在激活区域时获得焦点。这允许视障用户将他们的注意力应用于应用的适当区域。

这在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>。

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

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

3 个答案: