Accessible HTML: Do I need to use aria-pressed AND aria-expanded on these buttons?

Question

I have a list of buttons with state names that show/hide lists of cities in each of those states.

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

Click the orange "Find a Store" button in the "Only Sold in Stores" banner to show the UI in action.

I'm wondering if I need to use aria-pressed when I'm using aria-expanded. Wouldn't aria-expanded effectively set the button as pressed/toggled/active/in-use? Can I get rid of aria-pressed?

State buttons:

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

City lists:

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

Thanks for your help!

Answer 1

Your pattern is not an accordion. You are separating the headers from the panels. This pattern is tabs, where tabs are separated from tabpanels.

To first answer your question, ARIA mentions neither for tabs, nor for accordions aria-pressed. So the answer would be NO, you don't need that.

---

Based on your code there also seems to be some misunderstandings of what the used attributes do.

• aria-labelledby should include the ID of another element, not a string (that would be aria-label
• You don't need to use a aria-label at all if the text is already in accessible HTML. It's just cloaking your HTML
• ARIA attributes will not fix your keyboard navigation

A basic principle of ARIA is that you should avoid it and prefer semantic HTML instead. No ARIA is better than Bad ARIA

Instead of giving an <li> a duplicate (or triple) role, you should add a <button>. This will make sure your button is accessible to the most wide audience, including keyboard users.

ARIA mentions a lot about tabpanel, including required keyboard navigation patterns.

Here would be your HTML code reworked, but remember that you'll need JavaScript to take care of the active tab that has aria-selected="true" and to establish a roving tab index.

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

<ul id="state-list" role="tablist" aria-labelledby="tabtitle">
  <li><button aria-selected="true" role="tab" aria-controls="minnesota-tab" id="minnesota">Minnesota</button></li>
  <li><button 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>
…