HTML折叠内容可访问性实现方法

为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和button等元素来构建自定义的折叠组件。在这种情况下，核心在于通过WAI-ARIA属性来弥补语义上的不足，并通过JavaScript来管理状态和键盘交互。

你需要一个触发器元素（通常是

<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示例 (伪代码，需要根据实际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）进行测试。听听屏幕阅读器如何报读你的组件，用户能否轻松地找到并操作它。这往往能揭示出你意想不到的可访问性问题。记住，可访问性不仅仅是遵守规范，更是确保每个人都能无障碍地使用你的产品。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML折叠内容可访问性实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。