在现代网页交互里，HTML 中 aria-expanded 的正确使用方法直接影响到无障碍体验。本文围绕 可访问性最佳实践，结合实际案例，讲解如何在不同控件中合理管理该属性的值，并确保屏幕阅读器和键盘用户能够明确理解组件的当前状态与可用性。通过系统的要点、代码示例与实战技巧，帮助前端开发者落地实现合规且友好的交互体验。
1. 了解 aria-expanded 的定义与作用
aria-expanded 是一个布尔属性，指示一个可展开或可折叠的控件当前是否处于展开状态。正确设置为 true 表示内容可见，设置为 false 表示内容隐藏，且应与实际显示状态保持同步，以避免误导辅助技术用户。
在实际场景中，aria-expanded 不仅影响屏幕阅读器的反馈，还能帮助键盘导航者快速判断下一步操作。状态的同步性是无障碍实现的核心，一旦状态发生改变，相关的区域也应随之改变可见性或可访问性属性，确保信息的一致。
1.1 语义与含义
当你为一个控件提供展开/折叠能力时，aria-expanded 应始终反映实际的可见性。如果控件的可折叠区域隐藏，aria-expanded 应为 false；若区域可见，则为 true。这一点对于屏幕阅读器用户尤为关键，因为它直接决定了后续操作的可行性描述。
此外，aria-controls 或 aria-labelledby 常与 aria-expanded 搭配使用，帮助屏幕阅读器建立控件与内容区域之间的关系。确保在内容区域的结构中明确标注标签，从而提升可访问性的一致性。
1.2 实战要点
在实际编码中，第一要务是确保控件的初始状态与面板可见性一致。以下要点应优先考虑：初始渲染时设定 aria-expanded，并在每次交互后及时更新该属性；避免仅通过 CSS 影响可见性而不更新 ARIA 状态，否则屏幕阅读器仍会告知错误的状态。
另一个要点是对区域使用明确的语义标签。将可展开区域标记为 role="region"，并通过 aria-labelledby 将区域与触发控件绑定，从而让辅助设备能更好地描述区域内容。下面给出一个简化的演示代码，帮助理解基本结构与状态同步要点。
这里是可展开的内容，包含详细信息和可访问性提示。
2. 实现要点：同步 aria-expanded 与状态
实现无障碍折叠控件的关键，是在每次交互后确保 aria-expanded 的值与区域显示状态保持一致。通过 JavaScript 来控制布尔状态的切换，同时更新区域的可见性属性，可以让辅助技术获取准确的状态信息。
一个常见的做法是将区域的可见性通过 hidden 属性控制，并在切换时同步修改 aria-expanded。这种组合在大多数现代浏览器和屏幕阅读器中都能稳定工作。
2.1 同步策略
实现的核心策略是：获取当前 aria-expanded 的值，根据当前状态切换到相反值，并将区域的可见性与之匹配。通过事件监听器对用户动作做出即时响应，确保无论是鼠标点击还是键盘事件，状态都可靠更新。
另外，优雅的做法是将状态更新放在一个专门的函数中，确保后续扩展只有一个入口点，降低维护成本并提升一致性。
// 伪代码：同步 aria-expanded 与区域显示
const btn = document.getElementById('toggle-1');
const panel = document.getElementById('panel-1');function syncToggle() {const currentlyExpanded = btn.getAttribute('aria-expanded') === 'true';const nextExpanded = !currentlyExpanded;btn.setAttribute('aria-expanded', String(nextExpanded));panel.hidden = !nextExpanded;// 如果需要，触发额外的焦点处理或动画
}btn.addEventListener('click', syncToggle);
2.2 错误常见
常见错误包括：未在内容显示/隐藏时同步更新 aria-expanded，导致屏幕阅读器持续读出错误状态；或是仅用 CSS 控制显隐而不更新 ARIA 状态，造成无障碍工具的信息错乱。确保在所有展开/折叠操作中都执行状态同步，是避免这一问题的关键。
3. 常用模式：手风琴、折叠面板、下拉菜单
aria-expanded 的正确用法并不仅限于一个简单按钮，它是多种交互模式的基础。例如手风琴、折叠面板以及带有下拉菜单的控件都需要维护明确的展开状态，从而为辅助技术提供一致的导航体验。下面的示例展示了不同模式中的要点与实现思路。
在实现这些模式时，务必遵循无障碍最佳实践：为头部触发区域提供清晰的文本标签、使用适当的角色与关系属性，以及确保所有可折叠区域的可访问性信息不被隐藏或错乱。
3.1 手风琴模式实现
手风琴模式通常由若干可展开的区域组成，每个区域由一个可聚焦的触发控件控制。核心原则是：同一组中只有一个区域可见，且 aria-expanded 需要对每个区域独立维护。将区域包裹在 role="region" 下，并通过 aria-controls 与触发按钮建立连接。
以下是一个简化的手风琴结构示例，展示了如何为每个条目维护独立的 aria-expanded 状态，并通过可控的区域实现无缝切换。
内容一区域。内容二区域。
在这个结构中，按键的状态变化会同步更新对应的区域显示与 aria-expanded。对于无障碍用户，屏幕阅读器将清晰地读出“标题一，已展开”或“标题二，已折叠”等提示，从而提供准确的导航线索。
3.2 折叠面板与下拉菜单的无障碍实现
折叠面板通常以一个按钮触发，区域内承载更多信息或控制项。下拉菜单则需要明确的可聚焦列表与选择状态。在这两种模式下，aria-expanded 的正确使用确保了父控件的状态对所有子区域可预测地传播。
下面给出一个折叠面板的基本示例，包含 aria-expanded、aria-controls、aria-labelledby 以及 hidden 的组合使用，适用于大多数可折叠内容场景。
说明文本及详细信息。
若要实现更复杂的下拉菜单，可以将按钮的 aria-expanded 用于指示菜单的可见性，并通过 aria-expanded 与 aria-controls 的组合来描述当前活动的菜单项。结合键盘导航（箭头键、Tab、Esc）可以实现完整的无障碍交互。
在实际应用中，保持一致的状态管理是关键。无论是手风琴、折叠面板还是下拉菜单，统一的状态更新逻辑能显著降低维护成本并提升可访问性体验。
