aria-expanded 应用在触控元素上，用于指示关联内容的展开或折叠状态，其值为 true 或 false。1. 它用于控制器（如按钮）而非内容本身，2. 通常与 aria-controls 配合指向被控区域的 id，3. 点击时需同步切换内容显示与 aria-expanded 状态，4. 与 aria-hidden 不同，后者控制内容对辅助技术的可见性，5. 常见应用场景包括折叠面板、下拉菜单、汉堡菜单、显示/隐藏更多内容，6. 常见误区是错误地将 aria-expanded 放在内容上，7. 注意事项包括动态更新状态、确保键盘可访问、设置正确的初始状态及保持视觉反馈同步。
aria-expanded 在 HTML 中，是用来告诉辅助技术（比如屏幕阅读器）某个交互元素（比如按钮）所控制的区域，当前是处于展开状态还是折叠状态。简单来说，它就像一个开关指示灯，指明了关联内容的可见性状态。
解决方案
正确使用 aria-expanded 的核心在于，它应该被放置在触发展开/折叠动作的那个元素上，而不是被控制的内容本身。它的值可以是 true（表示内容已展开且可见）或 false（表示内容已折叠且不可见）。
通常，你会将它与 aria-controls 属性一起使用。aria-controls 指向你正在控制的那个内容区域的 ID，这样辅助技术就能明确知道哪个元素控制着哪个区域。
立即学习“前端免费学习笔记（深入）”；
想象一下一个简单的折叠面板：
const toggleButton = document.getElementById('toggleButton'); const collapsibleContent = document.getElementById('collapsibleContent'); toggleButton.addEventListener('click', () => { const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true'; // 切换 aria-expanded 状态 toggleButton.setAttribute('aria-expanded', String(!isExpanded)); // 切换内容的显示/隐藏 if (isExpanded) { collapsibleContent.style.display = 'none'; } else { collapsibleContent.style.display = 'block'; } }); // 确保初始状态也同步，虽然这里HTML已经设置了，但JS初始化时可以再检查一下 if (collapsibleContent.style.display === 'none') { toggleButton.setAttribute('aria-expanded', 'false'); } else { toggleButton.setAttribute('aria-expanded', 'true'); }这是被折叠起来的内容，只有点击按钮后才会显示。
这段代码展示了一个很经典的用法。当用户点击按钮时，我们不仅要切换内容的 display 样式，更重要的是要同步更新 aria-expanded 的值。这就像我每次写这类交互时，都会提醒自己，视觉变化和辅助功能属性更新，两者缺一不可。
aria-expanded 和 aria-hidden 有什么区别？
这是一个非常好的问题，也是很多人初次接触 ARIA 时容易混淆的地方。我个人觉得，理解它们的区别，能让你对可访问性有更深的认识。
aria-expanded，我们刚才说了，它主要用在控制器（比如按钮）上，指示它所控制的区域是展开还是折叠。它描述的是“这个按钮打开了什么，或者关闭了什么”的状态。
而 aria-hidden 则完全不同，它用在内容本身上，告诉辅助技术这段内容是否应该被“看到”或“听到”。当 aria-hidden="true" 时，屏幕阅读器会完全忽略这部分内容，即使它在视觉上是可见的（这通常是错误的用法，但偶尔也有例外）。当 aria-hidden="false" 时，内容才会被辅助技术正常识别。
所以，它们经常是协同工作的：当你的按钮 aria-expanded="false" 时，它所控制的那个内容区域，很可能也同时设置了 aria-hidden="true"。这样，屏幕阅读器就知道：这个内容不仅是折叠的（通过按钮的 aria-expanded），而且它目前对用户是不可访问的（通过内容本身的 aria-hidden）。反之，当按钮 aria-expanded="true" 时，内容区域的 aria-hidden 应该被切换为 false。
举个例子，一个模态对话框（Modal）：当模态框被关闭时，触发按钮可能没有 aria-expanded（或者如果你用它来表示模态框的开启状态，那它可能是 false），但更重要的是，模态框的整个内容区域应该设置 aria-hidden="true"，确保屏幕阅读器不会读到隐藏的对话框内容。当模态框打开时，模态框内容区域的 aria-hidden 必须变为 false。
它们各自扮演着不同的角色，一个描述控制器的状态，另一个描述内容对辅助技术的可见性。理解这一点，对于构建复杂的交互组件至关重要。
在哪些常见场景下应该使用 aria-expanded？
aria-expanded 的应用场景非常广泛，只要是涉及到“点击一个元素，另一个区域随之展开或折叠”的交互，都应该考虑使用它。我平时在项目里，遇到这些情况基本都会用：
折叠面板（Accordions）：这是最典型的场景。每个折叠面板的标题或触发按钮都应该有 aria-expanded 属性，指示其对应的内容区是展开还是收起。
这里 hidden 属性和 aria-hidden 类似，也可以用来控制视觉和辅助技术的可见性。
下拉菜单（Dropdown Menus）：导航栏中的下拉菜单按钮，或者任何触发下拉列表的按钮，都应该使用 aria-expanded 来指示菜单是打开还是关闭。
汉堡菜单（Hamburger Menus）：在移动端或响应式设计中常见的“汉堡”图标按钮，用于切换侧边导航栏的显示与隐藏。这个按钮就应该带有 aria-expanded。
这里的 sr-only 是一个常见的 CSS 类，用于将文本隐藏在屏幕上，但仍对屏幕阅读器可见，提供更清晰的语义。
显示/隐藏更多内容（Show More/Less）：例如文章摘要下方的“阅读更多”按钮，点击后显示全文。这个按钮也应该使用 aria-expanded。
本质上，只要用户界面中存在一个“切换可见性”的机制，aria-expanded 就应该被考虑进去。这能极大地提升使用辅助技术的用户的体验，让他们知道当前界面的状态，而不是盲目地探索。
使用 aria-expanded 时常见的误区和注意事项是什么？
尽管 aria-expanded 看起来简单，但在实际开发中，我确实见过不少开发者会犯一些小错误，或者忽略一些重要的细节。
误区：将 aria-expanded 放在被控制的内容上。这是最常见的误区。我看到过有人直接在 div 上写 aria-expanded="true"，这是完全错误的。这个属性是给控制器用的，它描述的是控制器所控制内容的状态。记住，它就像按钮上的指示灯，不是被控制区域的标签。
注意事项：动态更新是关键。aria-expanded 的值必须随着内容的实际展开或折叠而动态更新。如果你的内容已经展开了，但按钮上的 aria-expanded 还是 false，那么屏幕阅读器用户就会得到错误的信息。这就像一个灯泡亮了，但开关上的指示灯还是熄灭的，会让人困惑。所以，在 JavaScript 中切换内容的可见性时，务必同步更新 aria-expanded。
注意事项：与 aria-controls 配合使用（强烈推荐）。虽然 aria-expanded 本身就能提供状态信息，但配合 aria-controls 使用，可以更明确地告诉辅助技术，这个按钮具体控制的是哪一个 ID 的元素。这就像给一个遥控器贴上标签，写明它控制的是“电视”还是“空调”。虽然不是强制性的，但它提供了更强的语义关联，对复杂的页面尤其有用。
注意事项：键盘可访问性。如果一个元素使用了 aria-expanded，那么它通常是一个可交互的元素（比如 button 或带有 role="button" 的 div）。确保这个元素可以通过键盘（Tab 键聚焦，Enter/Space 键激活）来操作。如果你的触发器不是原生的 button 或 a 标签，你可能需要手动添加 tabindex="0" 来使其可聚焦，并编写 JavaScript 来处理键盘事件。
注意事项：初始状态的设置。页面加载时，aria-expanded 的初始值应该与内容的初始可见状态一致。如果你的折叠面板默认是收起的，那么按钮上的 aria-expanded 应该初始化为 false。别小看这个细节，它决定了用户第一次接触你组件时的体验。
技术挑战：状态同步与视觉反馈。有时候，我们会在 CSS 中使用 [aria-expanded="true"] 这样的选择器来控制元素的样式（比如添加一个旋转图标来表示展开）。这要求你的 JavaScript 必须准确地更新 aria-expanded 属性，才能确保视觉和辅助功能状态的同步。我见过一些情况，视觉上内容展开了，但 aria-expanded 没变，或者反过来，这都是需要避免的。
总的来说，aria-expanded 是一个非常实用且重要的 ARIA 属性，它在提升 Web 可访问性方面扮演着关键角色。正确理解并应用它，能让你的交互组件对所有用户都更加友好。
以上就是HTML中如何正确使用aria-expanded？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1569184.html
微信扫一扫 
支付宝扫一扫 
