WordPress可访问键盘菜单：Tab键唤起子菜单问题求助

我之前帮朋友处理过一模一样的问题，鼠标悬停正常但Tab键导航时子菜单不出来，核心原因是键盘导航依赖焦点状态，而你之前只写了hover的样式，给你几个具体的解决步骤：

• 补全焦点状态的CSS样式
  鼠标悬停用的是:hover伪类，而键盘Tab导航对应的是:focus和:focus-within伪类。把你的hover样式扩展一下：

  /* 原来的鼠标悬停样式 */
  .menu-item-has-children:hover .sub-menu {
    display: block;
  }
  /* 新增键盘焦点触发样式 */
  .menu-item-has-children:focus-within .sub-menu,
  .menu-item-has-children > a:focus + .sub-menu {
    display: block;
  }
  

  这里:focus-within更实用——只要父菜单项或它的子元素获得焦点，就会触发子菜单显示，完美适配Tab从父菜单项跳转到子菜单的场景。

• 确保菜单项可被聚焦
  检查你菜单里的父菜单项<a>标签有没有设置tabindex="-1"，这个属性会让元素失去焦点能力。如果有的话，把它改成tabindex="0"或者直接删掉，保证Tab键能正常聚焦到父菜单项。

• 用过渡替代display:none（可选但更友好）
  如果你的子菜单用display:none隐藏，元素在隐藏状态下是无法被聚焦的。可以换成visibility:hidden+opacity:0来实现隐藏，配合CSS过渡效果，同时保证元素在DOM中始终存在：

  .menu-item-has-children .sub-menu {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    /* 其他定位样式保持不变 */
  }
  .menu-item-has-children:hover .sub-menu,
  .menu-item-has-children:focus-within .sub-menu {
    visibility: visible;
    opacity: 1;
  }
  

  这样Tab键聚焦到父菜单项时，子菜单平滑展开，里面的链接也能被正常选中。

• 添加键盘事件增强交互（可选）
  有些用户习惯用Enter或Space键展开子菜单，你可以加一点JS来支持这个操作，同时优化无障碍体验：

  document.querySelectorAll('.menu-item-has-children > a').forEach(link => {
    // 给父菜单项添加aria属性，告诉屏幕阅读器有子菜单
    link.setAttribute('aria-haspopup', 'true');
    link.setAttribute('aria-expanded', 'false');
  
    link.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        const parentItem = this.parentElement;
        parentItem.classList.toggle('show-submenu');
        // 更新aria状态
        const isExpanded = parentItem.classList.contains('show-submenu');
        link.setAttribute('aria-expanded', isExpanded);
      }
    });
  });
  

  然后CSS里加上.menu-item-has-children.show-submenu .sub-menu { visibility: visible; opacity: 1; }就可以了。

• 核对菜单类名是否正确
  不同WordPress主题可能给菜单用不同的类名，比如有的主题用.dropdown替代.menu-item-has-children，.dropdown-menu替代.sub-menu。打开浏览器开发者工具，检查你菜单元素的实际类名，确保CSS选择器和它对应。

最后记得测试：用Tab键一步步导航，看父菜单项获得焦点时子菜单会不会显示，子菜单里的链接能不能被正常选中~

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