0

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

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

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

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

4

3 回答 3

1

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

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

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

于 2015-03-16T14:30:40.460 回答
1

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

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

于 2015-03-13T20:39:31.440 回答
0

我最终通过在使用 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>或其他不可选项卡元素的情况下使用。

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

于 2015-03-17T16:09:48.403 回答