具有 4 个以上项目的可访问下拉导航菜单的响应式设计的正确解决方案是什么？
What is the right solution for the responsive design of an accessible dropdowm navigation menu with more than 4 items?
我从 Stephanie Eckles's CSS-Only Accessible Dropdown Navigation Menu 那里学到了东西。但是她对那个下拉导航菜单的响应式设计只适用于少于 3 个项目的菜单，不适用于超过 4 个项目的菜单。
我想保留那个菜单，但我不知道移动设备上超过 4 个项目的菜单的解决方案 phones，使其可访问和可用。
有些文章说带有汉堡包图标的侧面导航菜单不可访问和使用。
At my site，在手机上phone，超过 4 个项目的菜单超出了屏幕限制。
我不确定所指示的这些菜单是否可以在移动设备上访问和使用phone：
- https://portfolio-eddi3.herokuapp.com/（看起来很理想，但我需要保留主题和语言图标，我想确保它可以访问和使用）。
- https://accessibility.mste.illinois.edu/demos/keyboard-accessible-hamburger-menu（在手机上 phone，我需要保留主题和语言图标，而不仅仅是这个菜单，它还有另一个他们在 Codepen 上分享的替代菜单演示，但是在这是另一种情况，我需要在桌面上显示所有项目。
如何保留相同的菜单并为移动 phone 重新使用这些菜单之一？
这里有几点要解决。
有些文章说带有汉堡包图标的侧面导航菜单不可访问和使用。
不确定这些是哪些文章，但这根本不是真的。显然，您必须正确地实现它们（这就是为什么其中许多无法访问的原因）但是没有什么可以阻止您使用这种模式。
汉堡包图标本身就是一个可访问性问题，最好在它旁边加上“菜单”这个词，也许这就是这里的问题所在。
我从 Stephanie Eckles 的 CSS-Only Accessible Dropdown Navigation Menu 那里学到了东西。
这不是一个完整的解决方案，虽然文章确实说明了这一点，但认为她的模式仅适用于 CSS 是一种误导，它不是完全可访问的。
要修复她的例子，您需要做几件事：
当下拉菜单打开时，使用JavaScript切换aria-expanded到true。菜单关闭后，您将其切换回 aria-expanded="false"。这是屏幕 reader 用户的重要信息。
您还需要停止下拉菜单自动打开焦点。键盘用户被迫使用当前实现的方式在下拉菜单中的所有项目中切换。相反，您应该将菜单的打开和关闭附加到 Enter 键，以便用户可以导航到与他们无关的菜单项。幸运的是，此更改使第 1 项变得容易，因为您可以在 Enter.
上切换 aria-expanded
可以使用 <kbd>Escape</kbd> 键关闭下拉菜单。
可能还有其他问题需要解决，但您可能会说，这些问题远非可及，恐怕也不是一个值得学习的好例子。
超过 4 个项目的菜单超出了屏幕限制。
因为你有 运行 水平方向 space 你只有几个选择。
首先是将菜单变成 <select> 或我们之前讨论过的侧边导航菜单。
关于可访问的滑出式菜单 this codepen is a good starting point for the general principle, which is taken from this article explaining how to make slide-out menus accessible 以及为什么每个项目都是这样实现的。我没有详细检查，但我看不到任何直接的缺陷/故障，HTML 应该足够接近您现有的 HTML 以允许您保留桌面版本的菜单（使用上一节中所述的修复程序）。
或者，如果您只有 4 个主菜单项（这不太可能改变），那么您可以将菜单项堆叠在 2 x 2 的网格中。
这很容易实现，只需在移动媒体查询的菜单 <li> 中添加 float: left 和 width: 50%，这样它们就会堆叠成 2 x 2 的网格。
还有其他方法可以做到这一点，但快速浏览一下您的网站似乎是最快的方法。
我从 Stephanie Eckles's CSS-Only Accessible Dropdown Navigation Menu 那里学到了东西。但是她对那个下拉导航菜单的响应式设计只适用于少于 3 个项目的菜单，不适用于超过 4 个项目的菜单。
我想保留那个菜单，但我不知道移动设备上超过 4 个项目的菜单的解决方案 phones，使其可访问和可用。
有些文章说带有汉堡包图标的侧面导航菜单不可访问和使用。
At my site，在手机上phone，超过 4 个项目的菜单超出了屏幕限制。
我不确定所指示的这些菜单是否可以在移动设备上访问和使用phone：
- https://portfolio-eddi3.herokuapp.com/（看起来很理想，但我需要保留主题和语言图标，我想确保它可以访问和使用）。
- https://accessibility.mste.illinois.edu/demos/keyboard-accessible-hamburger-menu（在手机上 phone，我需要保留主题和语言图标，而不仅仅是这个菜单，它还有另一个他们在 Codepen 上分享的替代菜单演示，但是在这是另一种情况，我需要在桌面上显示所有项目。
如何保留相同的菜单并为移动 phone 重新使用这些菜单之一？
这里有几点要解决。
有些文章说带有汉堡包图标的侧面导航菜单不可访问和使用。
不确定这些是哪些文章，但这根本不是真的。显然，您必须正确地实现它们（这就是为什么其中许多无法访问的原因）但是没有什么可以阻止您使用这种模式。
汉堡包图标本身就是一个可访问性问题，最好在它旁边加上“菜单”这个词，也许这就是这里的问题所在。
我从 Stephanie Eckles 的 CSS-Only Accessible Dropdown Navigation Menu 那里学到了东西。
这不是一个完整的解决方案，虽然文章确实说明了这一点，但认为她的模式仅适用于 CSS 是一种误导，它不是完全可访问的。
要修复她的例子，您需要做几件事：
当下拉菜单打开时，使用JavaScript切换
aria-expanded到true。菜单关闭后，您将其切换回aria-expanded="false"。这是屏幕 reader 用户的重要信息。您还需要停止下拉菜单自动打开焦点。键盘用户被迫使用当前实现的方式在下拉菜单中的所有项目中切换。相反，您应该将菜单的打开和关闭附加到 Enter 键，以便用户可以导航到与他们无关的菜单项。幸运的是，此更改使第 1 项变得容易，因为您可以在 Enter.
上切换aria-expanded可以使用
<kbd>Escape</kbd>键关闭下拉菜单。
可能还有其他问题需要解决，但您可能会说，这些问题远非可及，恐怕也不是一个值得学习的好例子。
超过 4 个项目的菜单超出了屏幕限制。
因为你有 运行 水平方向 space 你只有几个选择。
首先是将菜单变成 <select> 或我们之前讨论过的侧边导航菜单。
关于可访问的滑出式菜单 this codepen is a good starting point for the general principle, which is taken from this article explaining how to make slide-out menus accessible 以及为什么每个项目都是这样实现的。我没有详细检查，但我看不到任何直接的缺陷/故障，HTML 应该足够接近您现有的 HTML 以允许您保留桌面版本的菜单（使用上一节中所述的修复程序）。
或者，如果您只有 4 个主菜单项（这不太可能改变），那么您可以将菜单项堆叠在 2 x 2 的网格中。
这很容易实现，只需在移动媒体查询的菜单 <li> 中添加 float: left 和 width: 50%，这样它们就会堆叠成 2 x 2 的网格。
还有其他方法可以做到这一点，但快速浏览一下您的网站似乎是最快的方法。