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

Question

在 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"); });

Answer 1

您尝试的解决方法不起作用，因为

<li>

未分配任何角色。扮演这个角色的是

<a>

孩子。

此外，您不应该使用 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

元素已经具有

link

角色。

这是一种解决方法，因为在渲染 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>