菜单列表项被视为按访问性工具的按钮，但不是

发布于 2025-02-03 00:43:20 字数 1234 浏览 2 评论 0原文

我用一种可访问性工具测试了我的网站。结果，它报告了我的网站菜单不合规，因为：

用作按钮但使用其他标签（例如跨度，div，a或其他）构建的元素应包括一个等于“按钮”的“角色”属性。

实际上，这是一个通用的＆lt; li＆gt;标签，没有单击操作或其他任何。

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

您能否建议造成此错误的原因是什么？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一个人的旅程 2025-02-10 00:43:20

尝试更改标签，

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

以指出现在设置了角色属性。

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.

回复收藏 0 原文

~没有更多了~