40. Missing required WAI-ARIA states or properties

4.1.2

missing aria incorrect example

Description: The WAI-ARIA element does not follow the specification in regards to which states and properties should be present for this type of element.

Context: ARIA elements have strict guidelines for what states and properties can be used for each element. Using certain “roles” will require that other ARIA attributes are used on the element.

<ul class="tribe-bar-views-list" tabindex="-1" role="listbox" aria-labelledby="tribe-bar-views-label">
  <li id="tribe-bar-views-option-list" role="option">
    <!--Content-->
  </li>
  <li id="tribe-bar-views-option-month" role="option">
    <!--Content-->
  </li>
  <li id="tribe-bar-views-option-day" role="option">
  </li>
</ul>

How to fix it: Check the W3C specification for “Accessible Rich Internet Applications Suite” (WAI-ARIA) to see which states and properties are required for this WAI-ARIA element.

<ul class="tribe-bar-views-list" tabindex="-1" role="listbox">
  <li aria-selected="true" id="tribe-bar-views-option-list" role="option">
    <!--Content-->
  </li>
  <li aria-selected="false" id="tribe-bar-views-option-month" role="option">
    <!--Content-->
  </li>
  <li aria-selected="false" id="tribe-bar-views-option-day" role="option">
    <!--Content-->
  </li>
</ul>

Techniques: ARIA5