aria-expanded 的基础与作用
什么是 aria-expanded
aria-expanded 是一个用于指示可扩展控件当前状态的 ARIA 属性，通常用于告知辅助技术当前是否处于展开状态。它的值通常是 true 或 false，以反映控件的可见性与展开/收起的状态。通过明确的布尔值，屏幕阅读器能提供一致的朗读信息，从而帮助用户理解界面结构。
在实现可折叠或可隐藏区域时，aria-expanded 应与区域的实际可见性保持同步，以确保辅助技术获得准确的状态反馈。若控件处于展开状态，屏幕阅读器通常会播报“已展开”或“展开中”的提示，反之则播报“已折叠”或“收起中”。
与常见控件的关系
在实际应用场景中，按钮、切换面板、以及可折叠区域是 aria-expanded 的常见应用对象。通过将 aria-expanded 应用于触发控件，并将被控区域绑定到该控件的 aria-controls，可以实现清晰的状态传达。无论样式如何变化，无障碍性 的核心在于用明确定义的状态来驱动辅助技术的反馈。
需要注意的是，即使外观上看起来只有视觉变化，aria-expanded 的状态仍应真实反映控件与内容的关系。这样一来，屏幕阅读器读取时就能给出一致的提示，降低用户的认知负担。
正确实现 aria-expanded 的要点
使用语义控件优先
优先选择使用 button 等原生控件来实现可交互的折叠逻辑，这样浏览器会自动提供基本的键盘导航和聚焦行为，减少自定义实现的复杂度。将 aria-expanded 应用于原生控件还能获得更好的浏览器兼容性与行为一致性。
如果确实需要自定义控件，请确保实现 键盘事件 支持（例如 Enter 和 Space 键触发），并将角色明确设定为 button 或等效的可聚焦元素，以满足初次与辅助技术的交互预期。
状态与控件的绑定
在结构层面，aria-controls 指向被控区域的 id，而 aria-expanded 表示该区域当前的可见性。通过两者的协同，辅助技术可以建立控件与目标区域之间的明确关系。
切换时应同时更新两者，确保隐藏/显示与状态属性保持一致，从而避免屏幕阅读器给出不一致的提示。将状态管理与可见性分离，便于维护与后续扩展。
示例代码
下面给出一个简化的实现示例，展示 aria-expanded 与 aria-controls、以及区域隐藏状态的绑定关系。
<button id="toggle" aria-expanded="false" aria-controls="panel" onclick="togglePanel()">显示详情</button>
<div id="panel" role="region" aria-labelledby="toggle" hidden>这里是可折叠内容。</div>
<script>
function togglePanel() {const btn = document.getElementById('toggle');const panel = document.getElementById('panel');const expanded = btn.getAttribute('aria-expanded') === 'true';btn.setAttribute('aria-expanded', String(!expanded));panel.hidden = expanded;
}
</script>
实现细节与最佳实践
键盘交互与焦点管理
确保按下 Enter 或 Space 时能够触发切换，并且焦点始终落在可控元素上，以保持良好的可访问性。避免在没有明确可用性标识的情况下仅用鼠标事件触发状态变化。通过合理的事件处理，可以让无障碍用户与普通用户获得一致的交互体验。
在实现中，aria-expanded 的状态更新应与内容区域的显示/隐藏同步，避免出现状态指示与视觉呈现不一致的情况。若使用自定义控件，请确保屏幕阅读器能在切换时读出正确的状态变化。
兼容性考量与测试要点
要在不同浏览器和屏幕阅读器组合中进行测试，例如 NVDA/Chrome、VoiceOver/iOS、以及 Firefox 等环境，以确保 aria-expanded 的提示一致性。不同版本的读屏软件对 ARIA 属性的解释可能存在细微差异，持续的可访问性测试是必要的。
在不支持 aria-expanded 的极端环境中，应结合缘由清晰的视觉提示来辅助用户理解状态，但不要仅依赖视觉提示来传达状态信息。通过综合测试，可以发现并解决潜在的可访问性陷阱。
