Html 正确使用WAI-ARIA状态？

动态应用ARIA状态时，最佳选项是什么？我只是想问一下，仅仅从规范中解读正确的用法并不总是那么容易

• 如果可以，是否应将

  false

  作为状态应用？我的意思是，显式地说

  false

  与没有属性存在之间有区别吗？如果有，是什么

• 这些属性应该出现在DOM的初始加载中，还是仅在与DOM交互时才进行切换？我主要指的是

  aria状态

  ，而不是

  aria属性

  或

  aria角色

  ，因为它们不太可能改变

示例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>

---

示例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在某个点上是可见的，那么应该使用它吗

---

我使用的是

style=display:none

作为示例，您可能希望使用

.active

和/或

.visuallyhidden

类。它取决于它的：

• 具有值类型“true/false/undefined”，其中默认值始终为undefined，这意味着在这种情况下：
  该元素不可选择
  这与值false不同，在本例中，值false表示：
  未选择可选择的元素
  → 因此，如果其值为false，则应指定

  aria selected

• 具有值类型“true/false”，其中默认值始终为false
  → 因此，如果其值为false，则不必指定

  aria hidden

---

您似乎有三个问题没有密切联系：1<代码>错误值（哪一个），2。DOM的初始负载，3。

aria隐藏的用法

。我认为为另外两个问题（以及这里的问题）创建单独的问题是有意义的。你同意吗？是的，既然你提到了价值差异，这似乎是两个独立的问题。啊，我甚至没想过检查不同的价值。那就好多了，谢谢！

<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>

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