Доступный HTML: Нужно ли использовать на этих кнопках нажатые буквы ария и расширенные арии?

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

Ваш рисунок не является аккордеоном. Вы отделяете заголовки от панелей. Это шаблон вкладок , где вкладки отделены от панелей вкладок.

Чтобы сначала ответить на ваш вопрос, ARIA не упоминает ни для вкладок, ни для аккордеонов aria-pressed. Поэтому ответ будет НЕТ, вам это не нужно.

---

Судя по вашему коду, может возникнуть недопонимание того, что делают используемые атрибуты.

• aria-labelledby должен включать идентификатор другого элемента, а не строку (это будет aria-label
• Вам вообще не нужно использовать aria-label, если текст уже находится в доступном HTML. Это просто скрывает ваш HTML
• Атрибуты ARIA не исправят навигацию клавиатуры

Основной принцип ARIA заключается в том, что вам следует избегать этого и вместо этого предпочитать семантический HTML. Нет ARIA лучше, чем Bad ARIA

Вместо того, чтобы давать <li> дублирующую (или тройную) роль, вы должны добавить <button>. Это обеспечит доступ к вашей кнопке для самой широкой аудитории, включая пользователей клавиатура .

ARIA много упоминает о табульной панели , включая необходимые шаблоны навигации клавиатуры.

Здесь будет переработан ваш HTML-код, но помните, что вам понадобится JavaScript , чтобы позаботиться об активной вкладке с aria-selected="true" и установить индекс перемещаемой вкладки .

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