应优先使用原生语义化标签而非div模拟：button提供内置焦点、键盘响应与无障碍支持；details/summary天然支持折叠交互与可访问性；表单控件如range、checkbox等自带状态、事件与平台行为；aria仅作为原生语义缺失时的补丁。

为什么比

更可靠

浏览器对 button 有内置焦点管理、键盘响应（space/enter 触发）、disabled 状态拦截和可访问性语义。用 div 加 onclick 不仅要手动处理 tabindex、keydown、aria-pressed，还容易漏掉屏幕阅读器无法识别的交互意图。

• 点击后不进 tab 顺序，键盘用户根本点不到
• 按空格键不触发，只响应鼠标 click
• 设 disabled="true" 后仍能被 JS 监听 click，逻辑错乱
• 辅助技术读作 “division”，而非 “button”

用

替代手写折叠面板的三大好处

details/summary 是原生折叠控件，无需 JS 就能响应点击、键盘展开/收起，并自动同步 open 属性和 aria-expanded 状态。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 支持所有键盘操作：Enter、Space、方向键（部分浏览器）
• 不用监听 DOM 变化或手动切换 class 或 ARIA 属性
• 移动端点击区域更大，且原生支持 touchstart 防抖
• 若需自定义样式，只覆盖 summary::marker 或重置 list-style 即可，别删 summary 标签

range、checkbox、radio 这类表单控件为何不该用 div 模拟

原生控件自带语义、状态同步、无障碍属性和平台级行为。比如 input[type="range"] 拖动时自动触发 input 事件，位置计算由浏览器完成；而用 div + mousemove 手算，精度低、耗电高、键盘不可控。

• input[type="checkbox"] 自带 checked/indeterminate 状态，label 关联后点击 label 也能 toggle
• 自定义 radio 组必须用相同 name，否则无法互斥；div 模拟极易漏掉这个约束
• 所有原生表单控件默认可聚焦、可 keyboard 导航，且在 form 提交时自动收集值
• 设 aria-invalid="true" 时，原生控件会与 aria-describedby 正确联动，div 模拟需额外绑定

什么时候必须用 ARIA，什么时候该停手

ARIA 是补丁，不是替代品。只有当原生语义完全缺失时才用，比如自定义树形菜单、多选时间选择器。但凡有对应原生标签，优先用它。

• 用 role="button" 前先问：能不能换成 button？
• 用 role="tablist" 前确认：是否已用 button[role="tab"] + div[role="tabpanel"]，并实现键盘导航（→← 切换、Home/End 跳首尾）？
• 避免 aria-live 误用：仅用于动态插入内容（如表单错误提示），不要给整个页面加 aria-live="polite"
• 最常被忽略的是焦点管理：模态框打开后焦点必须移入，关闭后必须回退到触发元素——这点 JS 逃不掉，但结构得靠语义打底

语义化不是“多套几个标签”，而是让每个标签都承担它本该承担的职责。一旦你习惯先想“这东西本质是按钮？是开关？是可折叠区块？”，再选对应标签，JS 就自然退居二线——只管业务逻辑，不管交互契约。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！