iOS上的VoiceOver在父元素可见后没有将焦点放在子元素上

Posted 2023-03-12

【中文标题】iOS上的VoiceOver在父元素可见后没有将焦点放在子元素上

【英文标题】：VoiceOver on iOS not giving focus to child element after parent becomes visible

【发布时间】：2012-05-22 03:34:59

【问题描述】：

我正在开发一个移动网页，用户在该网页上点击一个按钮来切换默认隐藏的内容的显示。这是一个简单的例子：

<div role="button" id="button1">Show Link 1</div>

<div style="display:none" id="div1">
    <a href="#" id="link1">Link 1</a>
</div>

点击#button1我想显示隐藏的div，然后将焦点放在链接1上。这是JQuery代码：

$(document).ready(function()       
    $('#button1').click(function()  
        $('#div1').show(function()  
            $('#link1').focus();
        )
    );
);

通常这是有效的。我使用 CSS 为 :focus 添加了一个红色边框，因此我知道链接在可见后正在接收焦点。但是，当链接获得焦点时，ios 上的 VoiceOver 不会宣布它。 VoiceOver 的焦点仍然在按钮上。 （我在运行 iOS 4.3.3 的 iPad 和运行 iOS 5.1.1 的 iPhone 4S 上对此进行了测试）。

与上述场景相反，如果获得焦点的元素与刚刚显示的元素相同，则一切正常，VoiceOver 会宣布新获得焦点的链接。下面是一个可行的场景示例：

<div role="button" id="button2">Show Link 2</div>

<div>
    <a style="display:none" href="#" id="link2">Link 2</a>
</div>

$(document).ready(function()       
    $('#button2').click(function()  
        $('#link2').show().focus();
    );
);

当该元素是刚刚变得可见的元素的子元素时，如何让 VoiceOver 宣布新聚焦的元素？

【参考方案1】：

一般来说这是可行的。

如果这意味着“有时它可以工作，有时它不能使用相同的代码”，这让我相信存在时间问题。链接是在屏幕外还是在聚焦时处于动画状态？尝试在最后一个回调中添加 1 秒超时，看看是否会得到不同的结果。您需要在任何过渡动画完成后移动焦点。

一般来说这是可行的。

如果这意味着“某些代码有效（100% 的时间）而其他类似的代码无效（100% 的时间）”，您需要在 bugreport.apple.com 提交错误。

在这两种情况下，如果您发布一个可以测试您的问题场景的 URL，也会有所帮助。