移动端汉堡菜单初始加载不显示及焦点异常的无障碍问题求助

问题根源 #

核心原因是你将汉堡菜单按钮放在了初始状态位于视口外的<nav>容器内，不同浏览器对「隐藏父容器内的固定定位子元素」的渲染、焦点遍历逻辑存在差异，导致了多端表现不一致的问题。

1. <nav>的初始CSS设置为right: -300px，默认位于视口右侧外部，汉堡按钮作为其子元素，初始位置被父容器的偏移影响
2. 调整视口宽度会触发浏览器重排，部分浏览器此时会重新计算固定定位元素的位置，导致汉堡按钮突然显示
3. 浏览器默认会跳过视口外元素的Tab焦点遍历，所以初始状态下汉堡按钮无法通过Tab聚焦，反向shift+tab可以触发是因为浏览器反向焦点逻辑的优先级不同
4. Chrome下头部消失是因为当汉堡按钮获得焦点时，浏览器触发「自动将聚焦元素滚动到视口内」的默认逻辑，把原本位于视口外的黑色<nav>容器整体移到了视口内，挡住了下方的头部内容，焦点离开后浏览器恢复视口位置，头部内容重新显示

修复步骤 #

1. 调整HTML结构 #

将汉堡按钮从<nav>容器中移出，改为与<nav>平级的<header>直接子元素，示例结构如下：

<header>
  <div class="skip">
    <a href="#content">Skip to main content</a>
  </div>
  <!-- 汉堡按钮移到此处 -->
  <button id="hamburger_Id" class="hamburgerMenu" aria-label="Main menu" aria-expanded="false">
    <span class="menu">Menu</span>
    <div class="line line-1"></div>
    <div class="line line-2"></div>
    <div class="line line-3"></div>
  </button>
  <div class="pageBannerContainer">
    <div class="pageBanner" style="background-image: url(<?php echo get_theme_file_uri('/img/coventryImage.jpg') ?>);" ></div>
    <nav class="mainNavigation">
      <?php wp_nav_menu(array(
        'theme_location' => 'mainHeaderNavigation'
      )); ?>
    </nav>
    <!-- 其余原有结构不变 -->
  </div>
</header>

2. 修复CSS冲突 #

• 移除<header>、<nav>的overflow-x: hidden属性，避免父容器裁剪固定定位的子元素
• 修正aria-current属性选择器的语法错误，把nav ul li a[aria-current="'page'"]改为nav ul li a[aria-current="page"]

3. 优化无障碍逻辑 #

新增导航显隐时的焦点控制代码，避免隐藏的导航链接被Tab聚焦：

const menuIcon = document.querySelector(".hamburgerMenu");
const navbar = document.querySelector("nav");
// 获取导航内所有可聚焦元素
const navFocusable = navbar.querySelectorAll('a, button');

// 初始化隐藏状态的焦点控制
navFocusable.forEach(el => el.setAttribute('tabindex', '-1'));
navbar.setAttribute('aria-hidden', 'true');

document.addEventListener("DOMContentLoaded", event => {
  menuIcon.addEventListener("click", () => {
    navbar.classList.toggle("change");
    const isExpanded = menuIcon.getAttribute("aria-expanded") === "true";
    const newExpandedState = !isExpanded;
    menuIcon.setAttribute("aria-expanded", newExpandedState);
    
    // 同步导航内元素的可聚焦状态
    navFocusable.forEach(el => el.setAttribute('tabindex', newExpandedState ? '0' : '-1'));
    navbar.setAttribute('aria-hidden', !newExpandedState);
    
    // 展开后自动将焦点移到导航第一个链接，符合无障碍规范
    if(newExpandedState) navFocusable[0]?.focus();
  });
});

验证点 #

修复后可以按以下顺序验证问题是否解决：

• 页面初始加载时汉堡菜单正常显示
• Tab键可以按「跳转到主内容→汉堡按钮→logo」的顺序正常遍历
• 键盘操作打开菜单后，焦点自动进入导航链接，关闭菜单后焦点回到汉堡按钮
• 不同浏览器、触摸模拟模式下表现一致

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