css - 响应式菜单的可访问性

Question

我想加深对可访问性的了解。所以我很感激任何反馈。请检查此代码是否满足响应式菜单的（希望是高的）可访问性标准。我认为键盘导航可能存在一些问题——但我不知道。

首先是 HTML。请。注意 HTML 中的注释：

为方便起见，我在这里也列出了它们：

• 将导航包裹在 nav 标签中。不要使用<div class="navigation">
• 给导航一个role="navigation"
• 不要将按钮包装在a标签或div. 而是使用button
• 给屏幕阅读器一个提示，菜单是用 展开还是隐藏area-expanded="Boolean"。使用 JS 动态添加提示。

所以完整的HTML是：

<header class="header">

        <!-- role=navigation to ensure better support, since not all browsers/screen readers will recognize the <nav> element. -->

        <nav role="navigation" class="navbar">
            <a href="#" class="nav-logo">companyLogo</a>
            <ul class="nav-menu">
                <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">nav</a></li>
            </ul>
         
            <!-- By using aria-expanded attribute, the user will be able to know that the button content is expanded or collapsed. At first, we will add the attribute by default and then JavaScript will help changing the value. 
            https://www.a11ymatters.com/pattern/mobile-nav/ -->

            <button class="hamburger" aria-expanded="false">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
        </nav>
    </header>

我将 CSS 部分简化为：

.hamburger {
display: none;

}

在 DOM 中隐藏 .hamburger 是否合适？（我也给了它一个area-expanded——这有意义吗？）

JS：在这里，我主要感兴趣的是改变区域扩展的 if 语句是否按预期工作。

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", openMenu);

function openMenu() {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");

  // Not sure whether, this is correct
  if (navMenu.classList.contains("active")) {
    hamburger.setAttribute("aria-expanded", "true");
  } else {
    hamburger.setAttribute("aria-expanded", "false");
  }
}

如果：

1. 您可以提供反馈，这使该菜单更易于访问。
2. 你可以告诉我如何优化键盘输入。
3. 您评论是否适合隐藏汉堡包display: none
4. 您可以告诉我动态更改区域扩展中的布尔值的 JS 是否正确。

感谢您的时间。

标签： cssmenuaccessibilityresponsive