aria-live、aria-busy、aria-expanded 和 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 实时区域应该只存在于具有简单文本块的容器中。实时区域会说出其全部内容（除非使用 aria-atomic），并且此控件可能太复杂而不适合。

你的披露按钮很好（对于这个简化的场景）。

正如应用 ARIA（或坦率地说，大多数可用性问题）时经常出现的情况一样，要使用的具体代码取决于上下文。

如果你有一个具体的例子会更容易测试。

aria-live、aria-busy、aria-expanded 和 aria-controls 之间的规则是什么？

What are the rules between aria-live, aria-busy, aria-expanded and aria-controls?

html

wai-aria