3

我正在使用 CSS3 在 HTML 中创建一个基本菜单。当您单击 adiv时，相邻的列表会使用 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".

我面临的问题是，Mobile Safari 在相邻元素更改其 aria-hidden 值时并不能很好地发挥作用。从一些实验来看，如果更改的元素距离至少 2 个可聚焦元素并且发生 DOM 更改，则效果最佳。<div>在将 a 附加到文档末尾时，我已经尝试了以下内容。

<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 在第一次选择元素时已经选择了接下来要播放的元素。

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

4

1 回答 1

0

在解决了这个问题之后，有一些灰色阴影。如果您等待 VoiceOver 完成阅读，正确的元素将被推进。当发生变化时，VoiceOver 的第一个响应是重新读取当前元素，然后重新评估下一步该去哪里。

解决方案就是在不失去意义的情况下使文本尽可能短。我的实际文本要长得多，但我已将其缩减为<div role="link">Expand</div>所有读者必须说的是Expand Link或Collapse Link。

于 2012-07-27T18:50:35.527 回答