Question

我正在使用CSS3在HTML中创建基本菜单。当您单击div时，相邻列表会使用CSS转换进行扩展或收缩。例如：

<style>
    ul {
        -webkit-transition: height 200ms linear;
        overflow: hidden;
    }
</style>
<div>Tap to expand</div>
<ul style="height: 0" aria-hidden="true">
    ....
</ul>

点击div时，ul高度会更新为其子级偏移高度的总和，并aria-hidden设置为false或已删除。再次点击将高度设置为0并设置aria-hidden="true"。

我面临的问题是，移动Safari并没有真正发挥其相邻元素改变其咏叹调隐藏价值的能力。从一些实验来看，如果变化元素至少有2个可聚焦元素并且发生DOM变化，则效果最佳。我在将<div>附加到文档的末尾时尝试了以下内容。

<div>Tap to expand</div>
<div>x</div>
<div>x</div>
<ul><!-- This works -->


<div>Tap to expand</div>
<div>x</div>
<ul><!-- This doesn't -->

<div>Tap to expand</div>
<div></div>
<div></div>
<ul><!-- Nor does this -->

其他技巧，例如将它们包装在单独的div中，或者在目标前面插入和移除两个div也不起作用。似乎VoiceOver在第一次选择元素时已经选择了下一个要播放的元素。

有没有人成功使用这种可访问的功能？

Answer 1

在解决这个问题之后，还有一些灰色阴影。如果您等待VoiceOver完成阅读，则会将正确的元素提前。当发生变化时，VoiceOver的第一个响应是重新读取当前元素，然后重新评估下一步的位置。

解决方案就是让文本尽可能短，而不会失去意义。我的实际文字要长得多，但我已将其缩小到<div role="link">Expand</div>，所以所有读者都要说Expand Link或Collapse Link。

强制更改aria-hidden以立即在Mobile Safari上生效

1 个答案: