构建可访问的导航菜单：理解 aria-expanded 与模态对话框的正确用法

本文深入探讨了在bootstrap中实现汉堡菜单时，aria-expanded 属性在屏幕阅读器中无法正常播报“展开”或“折叠”状态的问题。核心在于混淆了导航菜单与模态对话框的无障碍模式。文章解释了模态对话框的焦点管理机制，并强调了为导航菜单选择正确的wai-aria模式（如菜单按钮或展开/折叠模式）的重要性，以确保卓越的用户体验和可访问性。

在现代Web开发中，为网站提供良好的可访问性至关重要，尤其是在使用屏幕阅读器等辅助技术时。开发者经常会遇到一些看似简单但实际上涉及复杂无障碍模式的问题。本文将围绕一个常见的场景——使用Bootstrap实现一个可切换的汉堡菜单（通常表现为一个全屏覆盖的导航），并解决其在屏幕阅读器中无法正确播报 aria-expanded 状态的问题。

问题分析：aria-expanded 与模态对话框的冲突

开发者在尝试创建一个全屏覆盖的导航菜单时，希望屏幕阅读器（如NVDA）能在用户点击汉堡按钮时正确播报“展开”和“折叠”状态。然而，当代码中引入了隐藏/显示页面上其他元素（例如 member-un）的逻辑时，aria-expanded 的播报功能便失效了。

问题的核心在于对“模态对话框”和“导航菜单”这两种UI模式的混淆。在提供的代码中，#navbarNav 被赋予了 position: fixed; width: 100%; height: 100%; 等CSS属性，使其行为更像一个模态对话框或全屏覆盖层。

#navbarNav {
    /*display: none;*/
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: blue;
    z-index: 2;
    cursor: pointer;
}

同时，JavaScript代码中手动控制了 member-un 元素的 display 属性：

function showNN() {
    memberUN.style.display = "none"; // 隐藏页面其他元素
    shown = true;
}

function hideNN() {
    memberUN.style.display = "flex"; // 显示页面其他元素
    shown = false;
}

这种行为模式（全屏覆盖、隐藏外部元素）与模态对话框的特性非常相似。

模态对话框与焦点管理

根据WAI-ARIA Authoring Practices Guide (APG) 的对话框模式（Dialog Pattern），模态对话框有以下关键特性：

1. 焦点捕获 (Focus Trapping): 当模态对话框打开时，焦点必须被移动到对话框内部的某个元素，并被“捕获”在对话框内。用户无法通过Tab键将焦点移出对话框。
2. 背景内容不可交互: 对话框外部的背景内容通常会被禁用或遮罩，使其不可访问和不可交互。

当一个元素（如汉堡按钮）触发了一个模态对话框或类似的全屏覆盖层时，屏幕阅读器用户的焦点会立即转移到新打开的覆盖层内部。这意味着：

• 触发按钮（汉堡按钮）不再是当前焦点所在的元素。
• 即使 aria-expanded 属性在按钮上更新了，由于焦点已经转移，屏幕阅读器也不会再次播报该按钮的状态变化。
• Bootstrap 通常不会为模态对话框自动更新触发按钮的 aria-expanded 状态，因为它假定焦点会转移。

因此，memberUN.style.display = "none"; 这行代码本身并非直接导致 aria-expanded 播报失效的原因，而是这种“隐藏外部元素”的行为模式，进一步强化了将导航视为模态对话框的误解，从而引发了焦点管理的问题。对于屏幕阅读器用户而言，一旦进入了全屏覆盖层，外部元素的显示与否已经无关紧要，因为他们已经被“困”在覆盖层内。

导航菜单的正确无障碍模式

将一个简单的导航菜单实现为模态对话框通常不是最佳实践。模态对话框旨在中断用户流程，强制用户与对话框内容进行交互。而导航菜单的目的是提供网站内容的便捷访问，不应过度打断用户体验。

为了实现可访问的导航菜单，WAI-ARIA APG 提供了更合适的模式：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

1. 展开/折叠模式 (Disclosure Pattern)

适用于简单的展开/折叠内容，如手风琴菜单或简单的导航切换。

• 触发器: 一个按钮（或链接），带有 aria-expanded 属性（true 或 false）和 aria-controls 属性（指向被控制内容的ID）。
• 内容: 被展开/折叠的区域。

示例结构:

<button id="toggleNavButton" aria-expanded="false" aria-controls="mainNav">
    菜单
</button>
<nav id="mainNav" hidden> <!-- 初始状态隐藏 -->
    <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
    </ul>
</nav>

JavaScript 逻辑:

const toggleButton = document.getElementById('toggleNavButton');
const mainNav = document.getElementById('mainNav');

toggleButton.addEventListener('click', () => {
    const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true';
    toggleButton.setAttribute('aria-expanded', !isExpanded);
    if (isExpanded) {
        mainNav.setAttribute('hidden', ''); // 隐藏内容
    } else {
        mainNav.removeAttribute('hidden'); // 显示内容
    }
    // 注意：这里不需要手动管理焦点，因为内容是直接展开/折叠在页面流中的
});

在这种模式下，当按钮被点击时，aria-expanded 状态会更新，并且由于焦点仍停留在按钮上，屏幕阅读器会正确播报其状态。

2. 菜单按钮模式 (Menu Button Pattern)

适用于更复杂的下拉菜单或多级导航，类似于桌面应用的菜单栏。

• 触发器: 一个按钮，带有 aria-haspopup="menu" 和 aria-expanded 属性。
• 菜单: 一个具有 role="menu" 的列表，其中包含 role="menuitem" 的子项。
• 焦点管理: 菜单打开时，焦点应移动到菜单的第一个可交互项；菜单关闭时，焦点返回到触发按钮。

示例结构 (简化):

<button id="menuButton" aria-haspopup="menu" aria-expanded="false">
    用户菜单
</button>
<ul id="userMenu" role="menu" hidden>
    <li role="none"><a role="menuitem" href="#">个人资料</a></li>
    <li role="none"><a role="menuitem" href="#">设置</a></li>
    <li role="none"><a role="menuitem" href="#">退出</a></li>
</ul>

这种模式需要更精细的键盘和焦点管理，但它为复杂的导航提供了强大的无障碍支持。

总结与最佳实践

1. 选择正确的 ARIA 模式： 不要将所有可切换的UI元素都视为模态对话框。根据其功能和预期用户体验，选择最合适的WAI-ARIA模式（如展开/折叠、菜单按钮、选项卡等）。对于一般的汉堡菜单，展开/折叠模式或菜单按钮模式通常更合适。
2. 理解焦点管理： 模态对话框的核心是焦点捕获。如果您的UI元素不打算捕获焦点，那么它很可能不是一个模态对话框。对于非模态的展开/折叠内容，触发按钮的 aria-expanded 状态更新后，焦点应保留在按钮上，以便屏幕阅读器播报。
3. 避免不必要的背景元素操作： 如果您的菜单不是一个模态对话框，就没有必要在它打开时隐藏页面上的其他元素。这不仅对辅助技术用户没有帮助，反而可能导致不必要的复杂性。
4. 利用语义化HTML和Bootstrap组件： Bootstrap的 collapse 组件通常已经内置了对 aria-expanded 和 aria-controls 的支持。确保您正确使用了这些组件，并避免自定义CSS和JS逻辑覆盖其默认的无障碍行为。
5. 进行辅助技术测试： 始终使用实际的屏幕阅读器（如NVDA、JAWS、VoiceOver）进行测试，以验证您的实现是否真正可访问。视觉效果良好不代表可访问性也良好。

通过正确理解和应用WAI-ARIA模式，开发者可以构建出既美观又高度可访问的Web界面，确保所有用户都能无障碍地使用您的网站。

以上就是构建可访问的导航菜单：理解 aria-expanded 与模态对话框的正确用法的详细内容，更多请关注php中文网其它相关文章！