用原生 HTML details 标签构建零 JavaScript 的可访问折叠组件
来源：dev.to — 2026-08-17
📋 概述
作者在「可复用、更关键是可访问组件」系列中，教读者用原生 HTML 标签实现折叠/展开组件，完全不需要 JavaScript 或 WAI-ARIA。他先列出可访问折叠组件必须满足的交互要求——Enter/Space 展开收起、Tab 焦点移动、读屏朗读状态与可访问名称——然后逐一说明 如何天然满足这些要求，并拆解 、::marker、::details-content 等内部结构以及 open、name 属性的用法。
🔑 核心要点
- 用原生
标签实现的折叠组件天然可访问，无需任何 JS 或 WAI-ARIA 增强。
- 可访问折叠组件需满足：焦点在 时用 Enter/Space 切换、Tab/Shift+Tab 正确移动焦点、读屏能播报展开/收起状态与可访问名称。
- 是第一个直接子元素，充当控制展开收起的头部；内容可包含 h1-h6 与文本级内容。
- ::marker 是表示开合状态的三角图标，::details-content 则是承载内容、与 summary 并列的兄弟元素。
- open 属性控制默认展开状态（默认收起），name 属性让折叠组件分组、实现互斥展开。
💡 金句
最好的可访问性，往往来自浏览器原生就帮你做对的事。
👍 0
👎 0
← 返回 dev.to 首页