正确使用 WAI-ARIA 状态？

Question

动态应用 ARIA 状态时，最佳选择是什么？我只是问问，因为仅从规范中解读正确使用并不总是那么容易。

你是否应该在可能的情况下申请 false 作为一个州？我的意思是，明确说 false 或不存在属性之间有区别吗？如果有，那是什么？
这些属性应该出现在 DOM 的初始加载中还是仅在与之交互时切换？我主要指的是 aria-states，而不是 aria-properties 或 aria-roles，因为它们不太可能改变。

示例 1

<div role="tablist">
  <a href="#" role="tab" aria-controls="panel-1" aria-selected="true">Tab 1</a>
  <a href="#" role="tab" aria-controls="panel-2" aria-selected="false">Tab 2</a>
</div>

对比（注意：aria-selected 在 false 时 不存在 ）

<div role="tablist">
  <a href="#" role="tab" aria-controls="panel-1" aria-selected="true">Tab 1</a>
  <a href="#" role="tab" aria-controls="panel-2">Tab 2</a>
</div>

示例 2

<div>
  <div id="panel-1" role="tabpanel" aria-hidden="false"></div>
  <div id="panel-2" role="tabpanel" aria-hidden="true" style="display:none"></div>
</div>

对比（注意：该属性已再次删除，aria-hidden 不在 false 时出现）

<div>
  <div id="panel-1" role="tabpanel"></div>
  <div id="panel-2" role="tabpanel" aria-hidden="true" style="display:none"></div>
</div>

是否应该使用 aria-hidden，因为它在某些时候会可见？

我以 style=display:none 为例，您可能想使用 .active and/or .visuallyhidden class 相反。

Answer 1

这取决于它的value type:

aria-selected 具有值类型 "true/false/undefined"，其中默认值始终为 undefined，这意味着在这种情况下：

The element is not selectable.

这与值 false 不同，这意味着在这种情况下：

The selectable element is not selected.

→ 所以你应该指定 aria-selected 如果它的值应该是 false.
aria-hidden 具有值类型 "true/false"，其中默认值始终为 false.

→ 所以你不必指定 aria-hidden 如果它的值应该是 false.

正确使用 WAI-ARIA 状态？

Proper use of WAI-ARIA states?

html

accessibility

wai-aria