如何从 ul 中的特定 li 中删除 role = “link” 属性-解网

问：

在 wordpress 中，我有一个包含 6 个项目的菜单 - 项目 1 和项目 4 不链接到页面并充当标题，但默认情况下，它们被标记为 role=“link” 的可访问性与其他项目相同。

如何删除这 2 个特定 li 的角色属性？

它是一个 UL 列表，其中大多数项目都有与之关联的 URL，但其中 2 个项目没有。那些没有链接到任何地方的，因此它们只是充当其他列表项的标题。

例如

    <ul>
    <li>Heading 1<a></a><li>
    <li>Link Item 1<a>some link path</a><li>
    <li>Link Item 2<a>some link path</a><li>
    <li>Link Item 3<a>some link path</a><li>
    <li>Heading 2<a></a><li>
    <li>Link Item 4<a>some link path</a><li>
    <li>Link Item 5<a>some link path</a><li>`

默认情况下，它们都有 aria-role=link，但这对于 li 1 和 4 来说是不正确的，所以我想从它们中删除该角色。

    <li class="emphasize-menu et_pb_menu_page_id-42615 menu-item 
    menu-item-type-custom menu-item-object-custom menu-item- 
    42615"><a role="link">CUSTOMERS</a></li>

我尝试了以下方法按类选择 li 项，然后删除该属性，但没有成功。

jQuery(function($){ $('.menu-item-42615').removeAttribute("role"); });

jQuery WordPress 可访问性

你是对的，只有隐含才有作用，这是有充分理由的。但是您仍然没有分享太多信息。这些项目是如何成为标题的？你用的是哪个主题？同样，是否涉及插件？我在 Wordpress Playground 上尝试过，但您无法将标题添加到菜单中。a[href]link

答：

0赞 Andy 10/23/2023 #1

您尝试的解决方法不起作用，因为未分配任何角色。是孩子扮演了这个角色。<li><a>

此外，不应使用 ID，因为 ID 仅适用于一个特定的菜单项。应将解决方法更广泛地应用于所有标题菜单项。

jQuery(function($){ $('.menu-item a[role=link]').removeAttribute("role"); });

// or, without hardening the absurd dependence on jQuery even more
document.querySelectorAll('.menu-item a[role=link]').forEach(a => a.removeAttribute('role');

我们可以完全忽略属性是否存在，因为带有 href 的 a 元素已经具有链接角色。href

这是一种解决方法，因为在渲染 DOM 后对其进行操作对性能不利且不稳定。

真正的解决方法是确保后端提供正确的、可缓存的 HTML。但是要提出这样的解决方案，需要知道使用的主题，涉及插件和覆盖在像Wordpress这样的单体CMS中。

剩余的可访问性问题

请注意，即使此变通办法解决了角色问题，该结构也不足以表示分组，并且您可能无法通过 WCAG 成功标准 1.3.1：信息和关系

下面是一个使分组关系机器可读的示例：

<ul>
  <li>Heading 1<a></a>
    <ul>
      <li>Link Item 1<a>some link path</a><li>
      <li>Link Item 2<a>some link path</a><li>
      <li>Link Item 3<a>some link path</a><li>
    </ul>
  </li>
  <li>Heading 2<a></a>
    <ul>
      <li>Link Item 4<a>some link path</a><li>
      <li>Link Item 5<a>some link path</a><li>
    </ul>
  </li>
</ul>

如何从 ul 中的特定 li 中删除 role = “link” 属性

How to remove role = "link" attribute from specific li in a ul

评论

剩余的可访问性问题

评论