jquery - 父元素可见后，iOS 上的 VoiceOver 不会将焦点放在子元素上

Question

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

<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 播报新聚焦的元素？

Answer 1

Generally this works.

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

Generally this works.

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

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