可访问的HTML：我需要在这些按钮上使用按下aria和按下aria扩展吗？

Question

我有一个带有状态名称的按钮列表，用于显示/隐藏每个州的城市列表。

https://www.northerntool.com/shop/tools/category_stihl

单击“仅在商店中出售”横幅中的橙色“查找商店”按钮，以显示实际的用户界面。

我想知道在使用aria-pressed时是否需要使用aria-expanded。 aria-expanded不能有效地将按钮设置为按下/切换/活动/使用中吗？我可以摆脱aria-pressed吗？

状态按钮：

<ul id="state-list">
  <li role="button" aria-pressed="true" aria-expanded="true" aria-label="Minnesota">Minnesota</li>
  <li role="button" aria-pressed="false" aria-expanded="false" aria-label="NorthDakota">North Dakota</li>
  <li role="button" aria-pressed="false" aria-expanded="false" aria-label="Oklahoma">Oklahoma</li>
  <li role="button" aria-pressed="false" aria-expanded="false" aria-label="Texas">Texas</li>
  <li role="button" aria-pressed="false" aria-expanded="false" aria-label="Wisconsin">Wisconsin</li>
</ul>

城市列表：

<ul aria-labelledby="Minnesota" class="cities Minnesota" style="display: block;">
  <li>City Name</li>
  <li>City Name</li>
  <li>City Name</li>
</ul>
<ul aria-labelledby="NorthDakota" class="cities NorthDakota" style="display: none;">
  <li>City Name</li>
  <li>City Name</li>
  <li>City Name</li>
</ul>
<ul aria-labelledby="Oklahoma" class="cities Oklahoma" style="display: none;">
  <li>City Name</li>
  <li>City Name</li>
  <li>City Name</li>
</ul>
etc...

感谢您的帮助！

Answer 1

您的模式不是手风琴。您正在将标题与面板分开。此模式为tabs，其中选项卡与选项卡面板分开。

首先要回答您的问题，ARIA既未针对制表符也未提及手风琴aria-pressed。因此答案将是“不，您不需要”。

---

根据您的代码，对于使用的属性的作用似乎也有一些误解。

• aria-labelledby应该包含另一个元素的ID，而不是字符串（应为aria-label
• 如果文本已经在可访问的HTML中，则根本不需要使用aria-label。只是掩饰您的HTML
• ARIA属性无法修复您的键盘导航

ARIA的基本原理是应避免使用它，而应使用语义HTML。 No ARIA is better than Bad ARIA

您应该添加一个<li>，而不是赋予<button>重复（或三重）的角色。这样可以确保最广泛的受众（包括键盘用户）可以访问您的按钮。

ARIA mentions a lot about tabpanel，包括必需的键盘导航模式。

这里是经过修改的HTML代码，但是请记住，您需要 JavaScript 来处理具有aria-selected="true"的活动标签并建立一个roving tab index。

<p id="tabtitle">Northern Tool + Equipment sells Stihl products in the following locations:</p>

<ul id="state-list" aria-role="tablist" aria-labelledby="tabtitle">
  <li><button aria-selected="true" aria-role="tab" aria-controls="minnesota-tab" id="minnesota">Minnesota</button></li>
  <li><button aria-role="tab" aria-controls="north-dakota-tab" id="north-dakota" tabindex="-1">North Dakota</button></li>
  …
</ul>

<ul 
  tabindex="0"
  role="tabpanel"
  id="minnesota-tab"
  aria-labelledby="minnesota"
  class="cities Minnesota"
  >
  <li>City Name</li>
  <li>City Name</li>
  <li>City Name</li>
</ul>
<ul
  tabindex="0"
  role="tabpanel"
  id="north-dakota-tab"
  aria-labelledby="north-dakota"
  class="cities North Dakota"
  hidden
  >
  <li>City Name</li>
  <li>City Name</li>
  <li>City Name</li>
</ul>
…