Menu list item is considered as button by accessibility tool but it's not

user_11105496 0
Viewed 70

I tested my website with one of the accessibility tools. As the result it reported that my website menu is not compliant because:

Elements that behave as buttons but are built using other tags such as span, div, a or others, should include a "role" attribute that equals to "button".

In fact, this is a general <li> tag that has no click actions or whatever.

  <div class="ch-wp-menu-item-dropdown-wrapper">
    <ul class="ch-wp-menu-item-dropdown">
      <li class="ch-wp-menu-item-dropdown-content">

        {% for subItem in item.values %}
        <div class="ch-wp-menu-item-subitem">
          <ul>
            <li class="ch-wp-menu-item-subitem-title" tabindex="0"> //the element that accessibility tool refers to
              {{subItem.name}}
            </li>
            {% for value in subItem.values %}
            <li>
              <a href="{{value.value}}"
                tabindex="0"
                aria-label="{{value.name}}">
                <div class="ch-wp-menu-item-subitem-record">{{value.name}}</div>
              </a>
            </li>
            {% endfor %}
          </ul>
        </div>
        {% endfor %}

      </li>
      <div class="ch-wp-menu-item-dropdown-backdrop"></div>
    </ul>
  </div>

Could you advise what might be the reason for this error?

accessibility html
1 Answers

Try changing your a tag to

<a role="button" href="{{value.value}}" tabindex="0" aria-label="{{value.name}}">
    <div class="ch-wp-menu-item-subitem-record">{{value.name}}</div>
</a>

Note that the role attribute has now been set.

user_45155590
Related