使用details元素实现下拉菜单是否符合A11Y无障碍标准？

我一直在找实现无障碍下拉菜单的方法，目标是做一个SvelteKit的<nav>导航菜单，支持点击或按Enter键打开，同时保证键盘和屏幕阅读器可访问性。

找的大多数示例要么依赖hover触发，要么JS过度实现导致键盘无障碍差，要么是UI库的一部分。我自己用<details>元素做了个实现，代码如下：

脚本部分 #

<script>
  let isMenuLinkFocused = false;

  // 获取当前选中的链接，判断用户是向前还是向后导航，以此决定何时关闭<details>元素
  function current(event, id) {
    if (event.which === 9) {
      if(event.shiftKey === true) {
        console.log("BACKWARD - ID: " + id);
        if (id === 0) {
          isMenuLinkFocused = false;
        }
      }
      else {
        console.log("FORWARD - ID: " + id);

        if (id === 3) {
          isMenuLinkFocused = false;
        }
      }
    }
    if (event.which === 27) {
      isMenuLinkFocused = false;
    }
  }
</script>

模板部分 #

<nav>
  <details bind:open={isMenuLinkFocused}>
    <summary>Main menu</summary>
    <ul>
      <li><a on:keydown={(e) => {current(e, 0)}} href="#a">Home</a></li>
      <li><a on:keydown={(e) => {current(e, 1)}} href="#b">Products</a></li>
      <li><a on:keydown={(e) => {current(e, 2)}} href="#c">Services</a></li>
      <li><a on:keydown={(e) => {current(e, 3)}} href="#d">Contact</a></li>
    </ul>
  </details>
</nav>

我参考相关信息总结了几点特性：

• <details>元素自带group隐式ARIA角色，无需额外设置aria-expanded
• 默认支持Enter和Space键打开菜单
• 通过current()函数，导航到首尾链接时菜单会关闭
• 支持Tab键导航
• 按Esc键可关闭菜单

疑问： #

这个实现是否符合无障碍（A11Y）标准？有没有遗漏的点？

回答 #

你的实现已经覆盖了不少无障碍核心要求，但还有几个细节需要完善，整体方向是正确的：

已符合的无障碍规范 #

1. 基础键盘交互：<details>原生支持Enter/Space触发展开/收起，Esc关闭的逻辑符合用户预期，Tab导航时自动收起菜单的处理也能避免焦点滞留，这部分没问题。
2. 屏幕阅读器语义识别：<details>的隐式group角色和<summary>的隐式button角色，能让屏幕阅读器正确识别这是可交互的菜单容器，无需额外ARIA属性，这部分判断正确。

需要补充的优化点 #

1. 焦点管理优化：

   • 菜单展开后，焦点应自动跳转到第一个菜单项，当前实现需要用户额外按一次Tab才能进入菜单，不符合键盘用户的操作预期。
   • 菜单收起时，焦点应回到<summary>元素上，避免焦点丢失或跳转到页面无关区域。

2. 菜单项键盘导航增强：

   • 除了Tab键，还需支持方向键（↑/↓）在菜单项间切换，这是导航菜单的通用无障碍交互规范，能提升键盘用户操作效率。
   • 当前current函数依赖固定id判断首尾项，若菜单项数量变化会直接失效，建议通过DOM节点的位置动态判断，比如用event.target.parentNode.previousElementSibling/nextElementSibling来识别首尾项。

3. 点击外部关闭菜单：

   • 鼠标用户点击菜单外部区域时，菜单应自动收起，这是符合直觉的交互，当前实现未处理该场景，需添加全局点击监听，判断点击目标是否在<details>内部，不在则收起菜单。

4. <summary>语义增强：

   • 可给<summary>添加aria-label="主菜单，按Enter或Space键展开/收起"，虽然原生语义足够，但额外标签能让屏幕阅读器用户更清晰知晓交互方式，对新手用户更友好。

5. 事件API兼容性：

   • event.which已被废弃，建议用event.key替代，比如判断event.key === 'Tab'、event.key === 'Escape'，兼容性更好。

调整后的核心逻辑示例 #

<script>
  import { onMount } from 'svelte';
  let isMenuLinkFocused = false;
  let menuItems = [];

  function handleSummaryKeydown(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault(); // 避免默认滚动行为
      isMenuLinkFocused = !isMenuLinkFocused;
      if (isMenuLinkFocused && menuItems.length > 0) {
        menuItems[0].focus(); // 展开后聚焦第一个菜单项
      }
    }
  }

  function handleMenuItemKeydown(e, index) {
    // 方向键导航
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      const nextIndex = (index + 1) % menuItems.length;
      menuItems[nextIndex].focus();
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      const prevIndex = (index - 1 + menuItems.length) % menuItems.length;
      menuItems[prevIndex].focus();
    } else if (e.key === 'Escape') {
      isMenuLinkFocused = false;
      document.querySelector('summary').focus(); // 收起后聚焦回summary
    } else if (e.key === 'Tab') {
      // 动态判断首尾项
      if (!e.shiftKey && index === menuItems.length - 1) {
        isMenuLinkFocused = false;
      } else if (e.shiftKey && index === 0) {
        isMenuLinkFocused = false;
        document.querySelector('summary').focus();
      }
    }
  }

  // 点击外部关闭菜单
  function handleClickOutside(e) {
    const details = document.querySelector('details');
    if (!details.contains(e.target)) {
      isMenuLinkFocused = false;
    }
  }

  // 挂载后获取菜单项列表
  onMount(() => {
    menuItems = Array.from(document.querySelectorAll('nav ul li a'));
    document.addEventListener('click', handleClickOutside);
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  });
</script>

<nav>
  <details bind:open={isMenuLinkFocused}>
    <summary aria-label="主菜单，按Enter或Space键展开/收起" on:keydown={handleSummaryKeydown}>Main menu</summary>
    <ul>
      <li><a on:keydown={(e) => handleMenuItemKeydown(e, 0)} href="#a">Home</a></li>
      <li><a on:keydown={(e) => handleMenuItemKeydown(e, 1)} href="#b">Products</a></li>
      <li><a on:keydown={(e) => handleMenuItemKeydown(e, 2)} href="#c">Services</a></li>
      <li><a on:keydown={(e) => handleMenuItemKeydown(e, 3)} href="#d">Contact</a></li>
    </ul>
  </details>
</nav>

补充上述优化点后，你的实现就能完全符合A11Y无障碍标准。

内容的提问来源于stack exchange，提问作者Doombringer