如何利用HTML原生标签重构手风琴组件以实现完美的可访问性键盘导航-html教程-PHP中文网

原生是开箱即用可访问方案，但须满足三条件：结构正确（summary为details首个子元素且无包裹）、属性补全（动态设置aria-expanded/aria-controls等）、键盘焦点可及（加tabindex="0"、禁用display:none隐藏）。

如何利用html原生标签重构手风琴组件以实现完美的可访问性键盘导航

原生 <details></details> + <summary></summary> 就是目前最接近“开箱即用可访问性”的方案，但必须满足三个硬性条件：结构正确、属性补全、键盘焦点可及，否则屏幕阅读器会跳过或误读。

这是触发原生交互和键盘支持的前提。浏览器只认 <summary></summary> 作为可聚焦、可激活的控制节点，且必须紧贴 <details></details> 开始标签后——中间不能插 div、span 或注释。

✅ 正确：<details><summary>标题</summary><p>内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details>
❌ 错误：<details><div><summary>标题</summary></div> <p>内容</p></details>（Firefox 和旧 Safari 会失去空格/回车响应）
❌ 错误：<details><summary>标题</summary></details>（部分 Edge 版本忽略 summary）

原生 <details></details> 不自动同步 ARIA 状态，屏幕阅读器依赖这些属性判断当前是否展开。仅靠 open 属性不够，必须用 JS 动态更新。

监听 toggle 事件，而不是 click —— 因为键盘操作（Space/Enter）也会触发 toggle
每次事件中显式设置：summary.setAttribute('aria-expanded', details.open)
为 summary 添加 aria-controls="content-id"，对应内容容器的 id；内容容器需加 role="region" 和 aria-labelledby="summary-id"
不要省略 tabindex="0"：Safari 16.4 之前版本对 <summary></summary> 默认不聚焦，必须手动加

常见错误是用 display: none 或 visibility: hidden 替换原生三角图标，这会让 <summary></summary> 完全退出可访问流。

✅ 正确做法：用 summary::-webkit-details-marker + summary::marker { content: "" } 隐藏原生符号，再用伪元素或 inline SVG 插入自定义图标
❌ 错误做法：summary { display: none; } 或 summary::marker { display: none; }（后者在 Safari 下无效且破坏焦点链）
测试方法：按 Tab 键，焦点应能准确停在每个 <summary></summary> 上，并触发 Enter/Space 展开

真正难的不是写对标签，而是让所有浏览器把 <summary></summary> 当作一个语义化按钮来对待——它得能被键盘抵达、被屏幕阅读器识别、被辅助技术同步状态。漏掉 tabindex 或没设 aria-controls，就等于关掉了半条可访问通道。