移动端导航切换按钮ARIA标签适配VoiceOver读取需求求助

核心思路 #

要让VoiceOver仅读取“open menu”，需要保留元素的可交互性，同时替换默认的角色描述，并确保图标不被辅助技术读取。优先使用语义化的<button>元素而非<div>，避免手动处理键盘交互的麻烦。

方案1：使用语义化<button>元素（推荐） #

替换原<div>为<button>，利用aria-roledescription替换默认的“Button”读取文本，同时隐藏图标：

<header>
  <div class="logo_container">
      <a href="/">
        <img src="xxx" alt="网站logo"> <!-- 建议补充img的alt文本，提升可访问性 -->
      </a>
  </div>
  <nav class="">
        <ul>
        <li>
          <a href="xxx" title="xxxx" >xxx</a>
        </li>
        <li>
          <a href="xxxx" title="xxx" >xxx</a>
        </li>
        <li>
          <a href="xxxx" title="xxxx">xxx</a>
        </li>
        <!-- 修复原代码中未闭合的<li>标签 -->
        </ul>
  </nav>
  <button class="toggle_menu" aria-roledescription="open menu">
    <em class="fa-solid fa-bars" aria-hidden="true"></em>
  </button>
</header>

• aria-roledescription="open menu"：将按钮的默认角色描述“Button”替换为“open menu”，VoiceOver会直接读取该文本
• aria-hidden="true"：隐藏字体图标，避免辅助技术读取无意义的图标内容
• <button>原生支持回车、空格触发点击，无需手动设置tabindex和键盘事件

方案2：保留<div>元素（不推荐，需额外处理交互） #

如果坚持使用<div>，需手动维护键盘交互，并设置相关ARIA属性：

<header>
  <div class="logo_container">
      <a href="/">
        <img src="xxx" alt="网站logo"> <!-- 补充alt文本 -->
      </a>
  </div>
  <nav class="">
        <ul>
        <li>
          <a href="xxx" title="xxxx" >xxx</a>
        </li>
        <li>
          <a href="xxxx" title="xxx" >xxx</a>
        </li>
        <li>
          <a href="xxxx" title="xxxx">xxx</a>
        </li>
        </ul>
  </nav>
  <div class="toggle_menu" role="button" tabindex="0" aria-roledescription="open menu">
    <em class="fa-solid fa-bars" aria-hidden="true"></em>
  </div>
</header>

需添加JavaScript处理键盘交互（确保回车和空格能触发点击）：

const toggleBtn = document.querySelector('.toggle_menu');
toggleBtn.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    toggleBtn.click();
  }
});

• tabindex="0"：确保元素可通过键盘Tab键聚焦，不要用tabindex="1"，避免打乱页面默认导航顺序
• 其余ARIA属性作用同方案1

关于“end banner”的说明 #

“end banner”是VoiceOver对<header>（默认识别为banner地标区域）的结束提示，用于帮助用户感知页面结构。若强行移除需修改<header>的role（如role="region"），但会破坏语义化，不建议这么做。

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