HTML中如何正确使用aria-expanded？

aria-expanded 应用在触控元素上，用于指示关联内容的展开或折叠状态，其值为 true 或 false。1. 它用于控制器（如按钮）而非内容本身，2. 通常与 aria-controls 配合指向被控区域的 id，3. 点击时需同步切换内容显示与 aria-expanded 状态，4. 与 aria-hidden 不同，后者控制内容对辅助技术的可见性，5. 常见应用场景包括折叠面板、下拉菜单、汉堡菜单、显示/隐藏更多内容，6. 常见误区是错误地将 aria-expanded 放在内容上，7. 注意事项包括动态更新状态、确保键盘可访问、设置正确的初始状态及保持视觉反馈同步。 在 HTML 中，是用来告诉辅助技术（比如屏幕阅读器）某个交互元素（比如按钮）所控制的区域，当前是处于展开状态还是折叠状态。简单来说，它就像一个开关指示灯，指明了关联内容的可见性状态。 解决方案 正确使用 的核心在于，它应该被放置在 触发 展开/折叠动作的那个元素上，而不是被控制的内容本身。它的值可以是 （表示内容已展开且可见）或 （表示内容已折叠且不可见）。 通常，你会将它与 属性一起使用。 指向你正在控制的那个内容区域的 ID，这样辅助技术就能明确知道哪个元素控制着哪个区域。 立即学习 “ 前端免费学习笔记（深入） ”； 想象一下一个简单的折叠面板： 这段代码展示了一个很经典的用法。当用户点击按钮时，我们不仅要切换内容的 样式，更重要的是要同步更新 的值。这就像我每次写这类交互时，都会提醒自己，视觉变化和辅助功能属性更新，两者缺一不可。 和 有什么区别？ 这是一个非常好的问题，也是很多人初次接触 ARIA 时容易混淆的地方。我个人觉得，理解它们的区别，能让你对可访问性有更深的认识。 ，我们刚才说了，它主要用在 控制器 （比如按钮）上，指示它所控制的区域是展开还是折叠。它描述的是“这个按钮打开了什么，或者关闭了什么”的状态。 而 则完全不同，它用在 内容本身 上，告诉辅助技术这段内容是否应该被“看到”或“听到”。当 时，屏幕阅读器会完全忽略这部分内容，即使它在视觉上是可见的（这通常是错误的用法，但偶尔也有例外）。当 时，内容才会被辅助技术正常识别。 所以，它们经常是协同工作的： 当你的按钮 时，它所控制的那个内容区域，很可能也同时设置了 。这样，屏幕阅读器就知道：这个内容不仅是折叠的（通过按钮的 ），而且它目前对用户是不可访问的（通过内容本身的 ）。 反之，当按钮 时，内容区域的 应该被切换为 。 举个例子，一个模态对话框（Modal）：当模态框被关闭时，触发按钮可能没有 （或者如果你用它来表示模态框的开启状态，那它可能是 ），但更重要的是，模态框的整个内容区域应该设置 ，确保屏幕阅读器不会读到隐藏的对话框内容。当模态框打开时，模态框内容区域的 必须变为 。 它们各自扮演着不同的角色，一个描述 控制器 的状态，另一个描述 内容 对辅助技术的可见性。理解这一点，对于构建复杂的交互组件至关重要。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 在哪些常见场景下应该使用 ？ 的应用场景非常广泛，只要是涉及到“点击一个元素，另一个区域随之展开或折叠”的交互，都应该考虑使用它。我平时在项目里，遇到这些情况基本都会用： 折叠面板（Accordions） ：这是最典型的场景。每个折叠面板的标题或触发按钮都应该有 属性，指示其对应的内容区是展开还是收起。 这里 属性和 类似，也可以用来控制视觉和辅助技术的可见性。 下拉菜单（Dropdown Menus） ：导航栏中的下拉菜单按钮，或者任何触发下拉列表的按钮，都应该使用 来指示菜单是打开还是关闭。 汉堡菜单（Hamburger Menus） ：在移动端或响应式设计中常见的“汉堡”图标按钮，用于切换侧边导航栏的显示与隐藏。这个按钮就应该带有 。 这里的 是一个常见的 CSS 类，用于将文本隐藏在屏幕上，但仍对屏幕阅读器可见，提供更清晰的语义。 显示/隐藏更多内容（Show More/Less） ：例如文章摘要下方的“阅读更多”按钮，点击后显示全文。这个按钮也应该使用 。 本质上，只要用户界面中存在一个“切换可见性”的机制， 就应该被考虑进去。这能极大地提升使用辅助技术的用户的体验，让他们知道当前界面的状态，而不是盲目地探索。 使用 时常见的误区和注意事项是什么？ 尽管 看起来简单，但在实际开发中，我确实见过不少开发者会犯一些小错误，或者忽略一些重要的细节。 误区：将放在被控制的内容上。 这是最常见的误区。我看到过有人直接在 上写 ，这是完全错误的。这个属性是给 控制器 用的，它描述的是控制器所控制内容的 状态 。记住，它就像按钮上的指示灯，不是被控制区域的标签。 注意事项：动态更新是关键。 的值必须随着内容的实际展开或折叠而动态更新。如果你的内容已经展开了，但按钮上的 还是 ，那么屏幕阅读器用户就会得到错误的信息。这就像一个灯泡亮了，但开关上的指示灯还是熄灭的，会让人困惑。所以，在 JavaScript 中切换内容的可见性时，务必同步更新 。 注意事项：与配合使用（强烈推荐）。 虽然 本身就能提供状态信息，但配合 使用，可以更明确地告诉辅助技术，这个按钮具体控制的是哪一个 ID 的元素。这就像给一个遥控器贴上标签，写明它控制的是“电视”还是“空调”。虽然不是强制性的，但它提供了更强的语义关联，对复杂的页面尤其有用。 注意事项：键盘可访问性。 如果一个元素使用了 ，那么它通常是一个可交互的元素（比如 或带有 的 ）。确保这个元素可以通过键盘（Tab 键聚焦，Enter/Space 键激活）来操作。如果你的触发器不是原生的 或 标签，你可能需要手动添加 来使其可聚焦，并编写 JavaScript 来处理 键盘事件 。 注意事项：初始状态的设置。 页面加载时， 的初始值应该与内容的初始可见状态一致。如果你的折叠面板默认是收起的，那么按钮上的 应该初始化为 。别小看这个细节，它决定了用户第一次接触你组件时的体验。 技术挑战：状态同步与视觉反馈。 有时候，我们会在 CSS 中使用 这样的选择器来控制元素的样式（比如添加一个旋转图标来表示展开）。这要求你的 JavaScript 必须准确地更新 属性，才能确保视觉和辅助功能状态的同步。我见过一些情况，视觉上内容展开了，但 没变，或者反过来，这都是需要避免的。 总的来说， 是一个非常实用且重要的 ARIA 属性，它在提升 Web 可访问性方面扮演着关键角色。正确理解并应用它，能让你的交互组件对所有用户都更加友好。