Open Menu, Close Menu – Designing Accessible Toggle Menus

Recommendation: 这从键盘优先模式开始：将展开操作绑定到 Enter 键和空格键，提供清晰的焦点指示器，并通过实时区域宣布更改，以便那些依赖辅助技术的用户无需额外点击即可听到新状态。.

控制位于板子的北侧，靠近标题，因此在线访问或本地设置的用户无需长时间导航即可访问。当面板显示时，应推送周围内容或滑动到视图中，而不是陷入其他元素之下，并且必须易于通过按 Escape 键来折叠。包含链接的区域被设计师简称为“菜单”，适用于短标签和长列表。.

使用 ARIA 角色：role=”region” 或 “navigation”，aria-expanded 以反映 state, ，使用 aria-controls 将控件链接到可折叠面板，并确保当面板变为可见时，内容通过友好的 ARIA 实时区域更新。此系统应可在各种设备和时区中工作，无论在线还是离线，且这些模式应在不同的屏幕尺寸上进行测试。.

对于那些在固定界面上进行小足迹设计的用户，请考虑长标签和短切换开关；如果某个组件已停用，请用稳健的替代方案替换它并记录更改。权衡之下，用户体验的珍珠是：用户节省的几秒钟，不仅仅是供思考的素材。在多语言项目中，规划特定于国家/地区的布局和并排面板，这些面板最初是凹陷的，直到激活为止。仅使用经过验证的模式以减少认知负荷。.

以下考虑因素可帮助各种情境下的团队：从小设备上的用户测试开始；实施该模式的团队将这种直接的方法视为参考，而不是复杂的方法。良好体验的代价是通过顾客在菜单上找到选项时节省的时间来衡量的，而不是通过脆弱的演示来衡量的。水手们欣赏可预测的反馈和珍珠般的互动，即使界面必须适应不同的语言和国家。.

如何实现具有 aria-expanded、aria-controls 和焦点管理的键盘可访问切换

建议：将单个按钮绑定为触发器，将其连接到带有 aria-controls 的面板，使用 aria-expanded=”false” 和 aria-hidden=”true” 进行初始化，以便隐藏面板；激活时，将 aria-expanded 翻转为 “true”，将 aria-hidden 设置为 “false”，并将焦点移动到面板内的第一个可聚焦项目。.

结构与行为

该控件应当是一个带有 id 的按钮（例如 toggleBtn），并且 aria-expanded 反映当前状态，加上 aria-controls 指向该面板（例如 panel1）。该面板，带有 id=”panel1″，应当使用 role=”region” 以及 aria-labelledby=”toggleBtn”，加上 tabindex=”-1″ 和 aria-hidden=”true”，以使其在打开之前不包含在 tab 顺序中。当打开时，将 aria-hidden 切换为“false”，并确保该面板包含至少一个可聚焦的元素；如果不存在，则将焦点放在面板本身上。关闭时，将 aria-expanded 设置回“false”，aria-hidden 设置为“true”，并将焦点返回到触发器，以便来回导航保持流畅。.

键盘交互

在触发器上处理 keydown 事件：Enter 键或空格键切换面板；Esc 键关闭面板并将焦点返回到触发器。在面板内，通过 Tab 键和 Shift+Tab 键循环来限制焦点，以防用户游走到隐藏内容。关闭后，将焦点返回到触发器。对于移动设备，提供大的点击目标，并确保通过触摸激活的可靠性。为了清晰起见，在触发器上和面板内第一个可交互项目上以视觉方式指示焦点。.

在实际应用中，这种方法支持各种情境下的日常使用，访客可以在这些情境中浏览旅游、项目和座位选项。当网站以纪念馆或景点命名，例如欧胡岛、犹他州或亚利桑那州时，模式保持一致：打开一个紧凑的选项区域，选择首选项目，下面的内容更新，而不会中断键盘流。如果先前使用的功能停止使用或转售选项发生变化，请更新 aria 状态和标签，以便在访问顺利进行的同时，行为保持可预测性。.

实际部署的技巧包括确保控件在用户等待或穿行设施时仍然可用，面板位于触发器下方以保持逻辑阅读顺序。在计划访问期间，保持面板可见几分钟，并在关闭后提供返回主要内容的清晰路径。此模式支持快速访问导览、信息包、座位详情和节目列表，同时在繁忙时段和全年活动期间保持在移动设备上的可用性。经过周全的设计，无论用户是在探索亚利桑那州的当地场馆，还是在计划访问像瓦胡岛或犹他州这样的遥远地点，它都能帮助用户在没有困惑的情况下探索每个选项，并且可以跨越以不同项目和产品命名的场馆进行扩展。.

哪些 ARIA 角色、属性和 DOM 结构定义了切换菜单

Recommendation：实现一个切换开关来切换隐藏的选项面板。在开关上使用 aria-expanded，并使用 aria-controls 来引用面板。用 aria-labelledby 将面板与开关关联，以便屏幕阅读器能清晰地播报标签。应该在所有设备上检查此模式，包括 平板电脑, ，并在设施环境（如）中工作。 memorials 以及国家级景点，其入场程序和可达性会产生影响 every 用户，, what 要暴露的标签以及如何暴露。.

DOM结构：开关出现在 DOM 中面板之前。 开关具有稳定的 id，例如 切换按钮, ，并且面板具有诸如此类的 ID 选项面板. 在面板内放置交互元素（按钮或链接），以提供诸如以下操作： Tours, 座椅, Visiting hours, Visitors, Board access, 日期 信息，, Program 细节, Food和 Drinks. 。每个项目使用其自己的可访问名称。面板应使用 aria-labelledby 引用开关，开关应使用 aria-controls 引用面板。这种安排对于以下情况很有用： small 屏幕，但也适用 below 具有一致的语义，尤其当被 national 博物馆或 福特相关设施。.

ARIA 角色和属性：使用类似列表的语义描述面板，并将每个项目描述为可单击的控件。使用 ARIA 属性来传达状态（开关上的 aria-expanded）、标识（开关上的 aria-controls，面板上的 aria-labelledby）和可见性（关闭时的 aria-hidden 或 hidden 属性）。通过在关闭时将面板排除在顺序焦点之外，并在关闭时将焦点返回到开关，确保焦点顺序保持逻辑性。, though 一些实验表明 minutes 测试的方法很有帮助。 在许多情况下，这种方法是 been 尤为鲜明有力。 荣誉 程序或 板 会议。.

键盘和焦点行为：打开时，将焦点移动到第一个项目。允许使用向上/向下箭头在项目之间移动，使用Home/End键跳转到第一个或最后一个项目，使用Enter/空格键激活，使用Escape键关闭。此行为应该与下列项一起使用： every 用户包括 平板电脑 在线用户 small 屏幕和屏幕阅读器用户，并且还应在本地化的 UI 上运行。 最终模式旨在取得平衡。 最终 并被广泛接受于 national 上下文; though 有些团队可能会调整，但核心流程仍然是可预测且易于遵循的。该 chosen 方法支持会议、参观和项目公告，并通过以下方式： 板 或其他委员会。.

实际考虑：在画廊、入口和餐饮设施等实际场景中，确保 drinks, food和 连衣裙- 代码通知可以通过相同的控件显示，而不会影响语义。选择选项后，请提供清晰的状态和稳定的路径以 日期 信息或 tours 日程安排。考虑 福特- 品牌站点，, national 博物馆，和 memorials 设施，确保无障碍通行。 visiting 和 visitors 以及日常运营。为本地化提供支持，以及 japanese 在需要时使用语言。.

测试与本地化：通过键盘检查和辅助技术，在从小型手机到 平板电脑 设备和更大的台式机。为 Japanese 受众，提供读起来自然的本地化内容，并保持相同的结构。测试的几分钟时间 板 或委员会应告知最终更改，以及 chosen 方法应该为做好……的准备。 date 和 event 规划，包括 late 抵达和 entrance 程序。目标是平静的，, 主要 可预测的流畅通行，从而为访客和员工提供便利。.

如何处理打开/关闭期间的焦点顺序、焦点陷阱和可访问标签

建议：当面板变为可见时，将焦点移至面板内的第一个互动元素，并将导航限制在面板内，直到其折叠；折叠后，将焦点返回到触发控件。.

关键原则包括建立确定性的焦点顺序、清晰的标签，并将面板视为一个独立的控制区域，从而增强每个访问者的可访问性。.

1. 确定性焦点路径：按照逻辑顺序识别面板内的所有可聚焦元素——从折叠按钮开始，然后是任何实用工具控件（如搜索或过滤器），再之后是主要操作和内容部分。保持 DOM 顺序以支持自然的阅读流程，这有助于主要使用键盘浏览内容的用户。激活时，聚焦于第一个项目；如果焦点落在外部，则重定向回面板根目录。.

2. 捕获并恢复：实现焦点捕获，以便 Tab 键和 Shift+Tab 键仅在可见区域内循环。提供清晰的退出机制（折叠），并确保按下 Escape 键可折叠面板并将焦点返回到触发器。在面板处于活动状态时，不允许焦点泄漏到面板外部的伪影。.

3. 无障碍标签：面板必须具有反映其用途的无障碍标签。使用描述内容的可视标题（例如，纪念品和工艺品画廊）。触发控件应使用 aria-controls 引用面板，并且面板应通过 aria-labelledby 或 aria-label 进行标记。如果面板的行为类似于对话框，请考虑使用带有描述性标题的 aria-modal；否则，请使用带有清晰标签的 role=region。.

4. 内容标签和语义：如果面板列出了诸如纪念品或文物之类的项目，请使用标题对相关项目进行分组，并使用描述性列表结构。为屏幕阅读器添加一个关于内容范围的简短说明（例如，“太平洋海事文物和相关纪念品”）。内容可能提及来自太平洋地区的船只和舰船，包括来自不同国家历史的物品；应明确说明它们来自哪个国家，以避免歧义。.

关于可能包含诸如票券、日期和日程安排等内容之实现说明：

• 互动版块标签：应将票务选择器或时间安排区声明为一个独立的逻辑单元，并附上简洁的标题。以纯文本形式包含日期和时间，并确保每个项目都保持对键盘用户的可聚焦性。.
• 保持单一数据源：如果面板显示时间线或日历，请确保更改能传播到实时标签，以便访客不必依赖记忆。当票务影响对特定内容的访问以及预定的活动时，这一点至关重要。.
• 规则： - 只提供翻译，不作解释 - 保持原文的语气和风格 - 保持格式和换行.
• 视觉和非视觉提示：提供可见标题和隐藏文本供屏幕阅读器解释面板用途；确保面板状态（展开/折叠）能告知辅助技术，且不重复内容。.

与内容目录的实际示例集成：

• 日期和时间字段应遵循一致的格式，并在面板的焦点顺序内按顺序宣布。.
• 文物展区可以列出多件物品，包括纪念品和船只，并附上简明扼要的描述，说明其来源（国家）和年代（太平洋地区、国家背景）。.
• 关于可访问性的说明：请确保仅通过键盘即可浏览面板，并且当展开屏幕阅读器时，屏幕阅读器会将该区域宣布为一个独立的、可折叠的单元；这有助于专门来了解海事历史或参观当地博物馆的访客了解相关背景。.

最终考虑事项：跨设备测试，以确保面板的可访问性问题始终得到监控。焦点路径不应绕过提供关于事件、将要显示的物品或已安排的体验的重要上下文的内容。该方法应支持避免碎片化并保持流畅向前流程的用户旅程，从而实现清晰、无干扰的演练，类似于规划参观海事展览或文化国家收藏。.

如何测试辅助功能：手动键盘、屏幕阅读器和自动化检查

首先进行在线的、键盘优先的审核：映射焦点顺序，验证显示列表的控件是否可以通过 Tab 和 Shift+Tab 访问，通过 Enter 或空格键激活，并在折叠后将焦点返回到触发器。确保每个可聚焦项目都用清晰的标签进行宣告，并与依赖键盘导航的人员进行测试。保持循环简短，记录结果，并验证下一个控件是否在不卡顿的情况下向前接收焦点；这可以减少状态遗漏，并为喜欢快速、可预测流程的用户建立安心感。测试时，考虑夏威夷美食和饮品区、座位选择和户外海港景观等内容，以模拟真实场景的使用情况，并确认标签在布局更改时保持一致。标志性来源和 исторический источник？翻译？无论来源如何，请查阅官方指南，并遵循可重复的测试计划。测试应附带回调以统一格式报告结果，并且每次通过都应显示交互项目的可用时间，以便用户知道下一步会发生什么。.

手动键盘测试

聚焦第一个互动元素，然后使用向前导航移动到下一个；按下激活键以显示面板，然后遍历每个项目，确保不会产生陷阱，并且 Esc 键能将焦点返回到触发器。检查面板的标签是否清晰地描述了内容（食物、座位、户外选项、船只、港口），以及屏幕阅读器用户是否能听到有意义的公告。确认控件以南北阅读顺序排列，并且长标签和短标签都能正确呈现。如果元素更改状态，请确保播放或宣布简短的描述性更新，并且辅助操作（回调）仍然可访问，而无需强制刷新整个页面。.

屏幕阅读器和自动检查

使用VoiceOver、NVDA和JAWS进行测试，验证显示列表中的每个项目都以正确的顺序宣告，并且aria-expanded和aria-controls反映当前状态。使用在线工具中的自动检查来标记缺失的alt文本、不正确的地标用法和较差的颜色对比度；这有助于识别手动检查中可能遗漏的问题。运行Lighthouse和axe-core检查，以对照第二个基线比较结果；确保面板的动态更新被宣告，或者通过aria-live处理，以便用户在浏览座位、可用时间和活动列表等内容时保持知情。如果开发人员说明引用了犹他州或类似地区的recreationgov页面，请验证实现是否在布局转换和第三方嵌入中保持一致。确保调用不需要鼠标，并且该序列将被测试人员称为在所有设备上都是统一的。应访问并遵循此内容推荐，然后记录结果以进行追溯。较新的屏幕阅读器是否会暴露标签中的细微不匹配？如果是这样，请调整标签并重新运行检查，以保持所有用户的可靠性和安心。目标是创建一个强大、可访问的体验，经受住在线真实世界的使用，包括与相同测试的第二次迭代等简短、重复场景的比较。通过仔细的文档记录和重复测试，团队可以提供一个有弹性的解决方案，该方案仍然对有不同需求的人可用。.

如何解决跨浏览器怪异和渐进增强的切换菜单

Recommendation: 使用语义化按钮作为触发器，以及在激活时展开的区域；基本交互无需脚本即可工作，并且可以通过键盘（Enter/Space）操作。.

在瓦胡岛，太平洋沿岸的一个海军纪念馆，入口处应提供门票、音频和活动时长信息；所选模式必须确保每位游客都能访问，并符合无障碍指南。内容应为等候和沿途步行时刻设计，配有清晰的标牌以及便捷的餐饮预订选项。纳入二战叙事，例如珍珠港的回忆和袭击事件，以丰富背景信息，同时保持导航简洁。.

当依赖显示规则或基于高度的显示时，会出现跨浏览器怪异现象。为了避免 iOS 版 Safari 和 Windows 版 Edge 出现布局跳动，请保持面板处于流中，并在 max-height 或 transform 上应用 CSS 过渡，并为禁用动画的用户提供非动画回退。在下面，确保初始状态符合预期，并且非 JS 用户仍然可以看到清晰的交互提示。可访问性考虑应指导该方法，确保每个元素在首屏下方以及沿主要内容路径保持可用。.

渐进增强 意味着通过添加一个小脚本来丰富它，该脚本可以更新 aria-expanded，将焦点限制在显示的区域内，并在打开时将焦点移动到第一个链接。最终的体验应该支持使用 Esc 键关闭并在此后将焦点返回到触发器。.

测试应涵盖桌面和移动端的 Edge、Safari、Chrome 和 Firefox。使用 prefers-reduced-motion 和高对比度模式进行验证，并确保在脚本被阻止时，核心流程仍然可用。 保持首屏下方的内容可见，并提供一致的访问路径，以获取有关营业时间、剧院节目和后续步骤的基本信息，包括门票、音频，以及纪念活动等沿海访问的服务时间记录。.

内容策略对于绘制用户旅程至关重要：入口、门票和语音导览应包含清晰的标签，如最终通知、定期更新和服务时间。包含下次旅行的重要细节以及沿途预订、食物和饮料的各种选项，以便大多数用户可以顺利进行，不会延误。.

基线方法与回退

核心体验依赖于原生触发器和一个在脚本失败时仍可访问的内容块。使用 aria-expanded 来传递状态，并确保面板内的所有链接都可通过键盘访问；这对于站点地图上的等待时间和步行路线至关重要，在这些情况下，标牌和统一的视觉效果有助于保持一致的访问。.

测试、辅助功能模式和内容策略

审核对比度，在地下设备上进行测试，并验证辅助技术是否能清晰地播报 reserve、more 和 next 等操作。 当脚本失败时，请将基本信息保留在主要流程中，包括入口、剧院信息和语音导览选项，以支持各种情况下的用户，并确保所有访客都能访问。.