Aria Live，Aria-Busy，Aria扩展和Aria-Controls之间的规则是什么?

Question

我不确定我是否符合给定以下非常简单的方案的不同ARIA属性的所有相互依存关系：可以切换某些区域的可见性的按钮，但是此类区域也必须是初始填充的。

首先点击之前：

<div aria-live="polite">
    <button>Toggle details</button>
</div>

第一次单击后，数据加载时：

<div aria-live="polite" aria-busy="true">
    <button aria-controls="details" aria-expanded="false">Toggle details</button>
    <div id="details"></div>
</div>

加载数据后：

<div aria-live="polite" aria-busy="false">
    <button aria-controls="details" aria-expanded="true">Toggle details</button>
    <div id="details">Some data</div>
</div>

第二次点击

之后

<div aria-live="polite" aria-busy="false">
    <button aria-controls="details" aria-expanded="false">Toggle details</button>
    <div id="details" style="display: none;">Some data</div>
</div>

等等。

这是正确的吗？Aria-live在单独的(父(标签上比实际代表可隐藏面板的标签正确吗？

Answer 1

通常，Aria Live区域应仅存在于具有简单文本块的容器上。现场区域将说出其全部内容(禁止使用aria-atomic(，并且该控制可能太复杂了，无法合适。

您的披露按钮很好(对于这种简化的场景(。

使用ARIA(坦率地说，大多数可用性问题(通常是这种情况，要使用的特定代码取决于上下文。

如果您的特定示例要容易得多。