最直接且推荐的方式是使用原生html的
标签，若需自定义则结合wai-aria属性和JavaScript。1. 优先使用
和
，它们具备内置可访问性，支持键盘导航和屏幕阅读器语义；2. 当需自定义时，使用
，它们具备内置可访问性，支持键盘导航和屏幕阅读器语义；2. 当需自定义时，使用
为HTML折叠内容添加可访问性，最直接且推荐的方式是优先使用原生HTML的
标签。如果需要自定义样式和行为，则必须结合WAI-ARIA属性（如aria-expanded、aria-controls）和JavaScript来模拟原生行为，确保键盘导航和屏幕阅读器能正确识别和操作。
解决方案
要实现可访问的HTML折叠内容，我们通常有两种主要路径：
第一种，也是最推荐的，是利用html5引入的
元素。它们天生就具备可访问性，浏览器会自动处理大部分键盘交互（如Tab键聚焦、Enter/Space键切换展开/折叠状态）和屏幕阅读器语义。
元素作为折叠内容的标题或触发器，点击它会切换其父级
元素的展开状态。所有在
内部但不在
内部的内容，都是可折叠的。
内部的内容，都是可折叠的。
立即学习“前端免费学习笔记（深入）”；
<details> <summary>点击查看更多信息</summary> <p>这里是折叠起来的内容，可以包含文本、图片、链接等。</p> <ul> <li>项目一</li> <li>项目二</li> </ul> </details>
这种方法的优点在于，它几乎不需要额外的JavaScript或复杂的ARIA属性就能提供良好的基础可访问性。浏览器和辅助技术对它们的理解是内置的，省去了我们大量手动处理的工作。
第二种情况，当设计要求非常特殊，或者你需要构建更复杂的交互组件时，你可能不得不放弃原生的
你需要一个触发器元素（通常是
<div class="accordion-item"> <h2 id="headingOne"> <button type="button" aria-expanded="false" aria-controls="collapseOne" id="buttonOne"> 自定义折叠标题 </button> </h2> <div id="collapseOne" role="region" aria-labelledby="headingOne" hidden> <p>这是自定义折叠组件的内容。</p> <p>需要JavaScript来切换`aria-expanded`和`hidden`属性。</p> </div> </div>
通过JavaScript，你需要监听buttonOne的点击事件，当点击时，切换buttonOne的aria-expanded属性，并切换collapseOne的hidden属性（或者通过css来控制显示/隐藏，但hidden属性对可访问性更好）。同时，你还需要确保用户可以通过键盘（Tab键聚焦到按钮，Enter或Space键触发）来操作这个组件。
为什么原生HTML的
和
是可访问性首选？
是可访问性首选？
我个人在实际项目中，如果不是有非常特殊的设计限制，几乎总是倾向于使用
。原因其实很简单，它们是浏览器“理解”的。这意味着，无需我们额外编写复杂的JavaScript代码去管理状态、处理键盘事件（比如Tab键的焦点管理，Enter或Space键的激活），或者担心屏幕阅读器是否能正确解析其语义。
举个例子，当你使用
添加role=”button”的语义，并处理好其展开/折叠的状态，屏幕阅读器会自然地报读“可折叠，已折叠”或“已展开”。用户可以通过Tab键聚焦到
，然后按Enter或Space键来切换。这一切都是“免费”的，而且是浏览器厂商和可访问性专家们经过深思熟虑后实现的标准行为。这种内置的支持大大降低了开发者的负担，也减少了引入可访问性缺陷的风险。相比之下，自己从零开始构建一个完全可访问的折叠组件，其复杂度和潜在的坑要多得多。
如何为自定义折叠组件添加ARIA属性和键盘支持？
如果你真的不能用
，那么自定义折叠组件的可访问性就成了你的责任。这不仅仅是加几个ARIA属性那么简单，它是一个完整的交互体验设计。
核心步骤是：
- 确定触发器：通常是一个
- ARIA属性：
- 给触发器按钮添加aria-expanded=”false”（初始状态是折叠的）。当内容展开时，将这个属性值改为”true”。
- 给触发器按钮添加aria-controls=”[内容区域的ID]”，指向被折叠/展开的内容区域的唯一ID。这告诉辅助技术，这个按钮控制着哪个元素。
- 被控制的内容区域，如果它是一个逻辑上的“区域”，可以考虑给它添加role=”region”，并用aria-labelledby=”[触发器或标题的ID]”来提供一个可访问的名称。
- 内容区域在折叠时，最好加上hidden属性。这不仅能隐藏内容，还能从可访问性树中移除它，确保屏幕阅读器不会意外地读到隐藏内容。
- JavaScript逻辑：
// 简单的JavaScript示例 (伪代码，需要根据实际HTML结构调整) document.addEventListener('DOMContentLoaded', () => { const toggleButton = document.getElementById('buttonOne'); const collapsibleContent = document.getElementById('collapseOne'); if (toggleButton && collapsibleContent) { toggleButton.addEventListener('click', () => { const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true'; toggleButton.setAttribute('aria-expanded', !isExpanded); collapsibleContent.toggleAttribute('hidden', isExpanded); // Toggle hidden attribute }); // 键盘支持：Enter 和 Space 键 toggleButton.addEventListener('keydown', (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); // 阻止默认的滚动行为或表单提交 toggleButton.click(); // 模拟点击事件 } }); } });
这段代码是一个非常基础的示例，实际项目中可能需要更健壮的错误处理和更复杂的逻辑，例如处理多个折叠项、焦点管理等。
在设计可访问折叠内容时，还有哪些常见误区或额外考量？
在构建折叠内容时，除了上述技术细节，还有一些思维上的“坑”和需要额外注意的地方。
一个常见的误区是过度依赖CSS来控制显示/隐藏。虽然display: none;或visibility: hidden;能隐藏元素，但display: none;会将元素从可访问性树中移除，而visibility: hidden;则会让元素保留在可访问性树中，但不可见。使用hidden属性通常是更好的选择，因为它明确地向浏览器和辅助技术表明该元素当前是隐藏的，且不应被访问。如果你的内容是真正地“隐藏”而不是仅仅“不可见”，那么hidden是语义上最准确的。
另一个是焦点管理。当折叠内容展开时，用户的焦点应该停留在哪里？是停留在触发器上，还是应该移动到展开内容的开头？这取决于具体的使用场景。对于简单的折叠内容，焦点停留在触发器上通常是可接受的。但如果展开的内容是一个表单或一个需要立即交互的区域，你可能需要将焦点程序化地移动到该区域的第一个可交互元素上。反之，当内容折叠时，如果焦点在折叠区域内，它应该被移回到触发器上。这需要额外的JavaScript来处理focus()方法。
还有就是视觉指示器。仅仅依靠文本来表示“展开/折叠”是不够的。一个清晰的图标（比如一个箭头或加号/减号）可以直观地告诉用户当前状态，并且指示它是一个可交互的元素。确保这些图标在展开和折叠状态下有明显的视觉变化，并且它们的语义（例如，通过aria-label或sr-only文本）能被屏幕阅读器正确识别。例如，一个旋转的箭头，在展开时向下，折叠时向右。
最后，测试是关键。不要只在视觉上检查你的折叠内容是否工作，务必使用键盘（不碰鼠标）来操作它，并用屏幕阅读器（如NVDA、JAWS或VoiceOver）进行测试。听听屏幕阅读器如何报读你的组件，用户能否轻松地找到并操作它。这往往能揭示出你意想不到的可访问性问题。记住，可访问性不仅仅是遵守规范，更是确保每个人都能无障碍地使用你的产品。
