有没有办法将导航菜单的 open/close 按钮放在导航元素之外而不影响可访问性？
Is there a way to place the open/close button of a navigation menu outside the nav element without hurting accessibility?
到目前为止，我找不到明确的 answer/explanation 这个问题。
从可访问性的角度来看，这似乎没有争议：
示例 A：
<header>
<!-- Other stuff like a logo or other buttons -->
<nav>
<button>Menu</button>
<ul>
<li><a href="">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</nav>
</header>
然而，从 UI 设计的角度来看，这可能是有限的。拥有这样的标记将是一种解放：
示例 B：
<header>
<!-- Other stuff like a logo or other buttons -->
<button>Menu</button>
<nav>
<ul>
<li><a href="">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</nav>
</header>
在任何一种情况下，如果导航关闭，则不必隐藏 nav 元素，使用显示 none 隐藏 ul 元素就足够了。
尽管在示例 B 中，从用户体验的角度来看，隐藏 nav 元素（即整个导航）可能会更好，因为没有 open/close 按钮的封闭导航作为子项可能会造成混淆, 但我不确定。
简答
选项 1 更好，因为语义使关系变得明显。选项 2 可以通过 aria 属性访问（假设用户屏幕 reader 和浏览器组合支持它们）。
选择选项 1，除非绝对没有办法通过定位等实现您想要的设计（我认为这种情况非常罕见！）
更长的答案
80%+ 的可访问性是语义和语义关系。
在您的第一个示例中，控制菜单的按钮是导航的一部分，这非常合理。如果这是一个模态类型的菜单（你没有指定，但模式表明它可能是），这有一个额外的好处，那就是让任何焦点捕获和管理变得容易得多。
在你的第二个例子中，有一个空的 <nav> 元素因为你隐藏了 <ul> 不理想 因为按地标导航仍然可以引导一些屏幕 readers 以显示该地标，因此当用户导航到它时，他们会发现它是空的。
另一种选择是完全隐藏 <nav> 元素，这也不理想，因为按地标导航时不会有 <nav>。
尽管有这些缺点，如果您想使用第二个标记，WAI-ARIA 可以帮助定义按钮和菜单等之间的关系。
通过在 <button> 上使用 aria-haspopup and aria-owns（不要忘记 aria-expanded，但这两个示例都需要）。
请注意： aria-controls is actually the more appropriate aria attribute instead of aria-owns, but support is not great for aria-controls sadly.
最后的想法
你又一次没有指定这是否是模式类型菜单，但我假设它来自模式。
这样 and making it clear that the menu button acts as both an open and a close button depending on the menu state. For that you could use some visually hidden text在按钮中表示状态，比单独依靠aria-expanded要好:
<!--closed state-->
<button aria-expanded="false"><span class="visually-hidden">Open </span>Menu</button>
<!--opened state-->
<button aria-expanded="true"><span class="visually-hidden">Close </span>Menu</button>
到目前为止，我找不到明确的 answer/explanation 这个问题。
从可访问性的角度来看，这似乎没有争议：
示例 A：
<header>
<!-- Other stuff like a logo or other buttons -->
<nav>
<button>Menu</button>
<ul>
<li><a href="">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</nav>
</header>
然而，从 UI 设计的角度来看，这可能是有限的。拥有这样的标记将是一种解放：
示例 B：
<header>
<!-- Other stuff like a logo or other buttons -->
<button>Menu</button>
<nav>
<ul>
<li><a href="">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</nav>
</header>
在任何一种情况下，如果导航关闭，则不必隐藏 nav 元素，使用显示 none 隐藏 ul 元素就足够了。
尽管在示例 B 中，从用户体验的角度来看，隐藏 nav 元素（即整个导航）可能会更好，因为没有 open/close 按钮的封闭导航作为子项可能会造成混淆, 但我不确定。
简答
选项 1 更好，因为语义使关系变得明显。选项 2 可以通过 aria 属性访问（假设用户屏幕 reader 和浏览器组合支持它们）。
选择选项 1，除非绝对没有办法通过定位等实现您想要的设计（我认为这种情况非常罕见！）
更长的答案
80%+ 的可访问性是语义和语义关系。
在您的第一个示例中，控制菜单的按钮是导航的一部分，这非常合理。如果这是一个模态类型的菜单（你没有指定，但模式表明它可能是），这有一个额外的好处，那就是让任何焦点捕获和管理变得容易得多。
在你的第二个例子中，有一个空的 <nav> 元素因为你隐藏了 <ul> 不理想 因为按地标导航仍然可以引导一些屏幕 readers 以显示该地标，因此当用户导航到它时，他们会发现它是空的。
另一种选择是完全隐藏 <nav> 元素，这也不理想，因为按地标导航时不会有 <nav>。
尽管有这些缺点，如果您想使用第二个标记，WAI-ARIA 可以帮助定义按钮和菜单等之间的关系。
通过在 <button> 上使用 aria-haspopup and aria-owns（不要忘记 aria-expanded，但这两个示例都需要）。
请注意： aria-controls is actually the more appropriate aria attribute instead of aria-owns, but support is not great for aria-controls sadly.
最后的想法
你又一次没有指定这是否是模式类型菜单，但我假设它来自模式。
这样aria-expanded要好:
<!--closed state-->
<button aria-expanded="false"><span class="visually-hidden">Open </span>Menu</button>
<!--opened state-->
<button aria-expanded="true"><span class="visually-hidden">Close </span>Menu</button>