正确使用维亚瑞亚州？

Question

当动态应用ARIA状态时，最佳选择是什么？我只是问，因为它并不总是容易破译正确的使用从规范本身。

• 如果可以的话，您应该将false作为一个状态应用吗？我的意思是，显式地说false和没有属性存在之间有什么区别，如果是，什么？
• 这些属性是否应该出现在DOM的初始负载中，还是仅在与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和/或.visuallyhidden类。

Answer 1

这取决于它的价值类型

• aria-selected的值类型为“true/false/un定义”，其中默认值始终未定义，这意味着在本例中： 元素不可选。

这与值false不同，这意味着在本例中：

未选择可选元素。

因此，如果aria-selected的值为false，则应指定→。

• aria-hidden的值类型为"true/ false“，其中默认值始终为false。 如果aria-hidden值为→，则不必指定它为→。