重构时按钮事件失效的根源在于删除onclick却未补addEventListener，且用div/span替代button会丢失键盘支持与语义；应保留原生button、用data-属性传参、显式preventDefault，并确保滑块、分页、弹窗等组件同步ARIA状态与焦点管理。

重构时按钮事件失效，别急着改JS逻辑

直接删掉 onclick 属性却没补上 addEventListener，是重构中最常见的可访问性断点。原生 button 元素自带键盘支持（空格/回车触发），但换成 div 或 span 后，即使加了点击事件，也失去了焦点能力和语义。

• 保留 button 标签，哪怕只是视觉上“不像按钮”，也比用 div + tabindex="0" + 手动监听 keydown 更可靠
• 传参别写在 onclick 里，改用 data- 属性：比如把 onclick="edit(123)" 换成 data-id="123"，再统一监听 click 事件并读取 e.target.dataset.id
• 必须显式调用 e.preventDefault() —— 尤其当按钮嵌套在 form 里，否则会意外提交

滑块控件从 div 模拟切回 input type="range"，值和标签要同步

很多老项目用 div + CSS + JS 实现滑块，看似灵活，实则丢掉了键盘操作、屏幕阅读器播报、原生 focus 状态等能力。切回 input type="range" 不是简单替换标签，关键在状态映射。

• aria-valuemin、aria-valuemax、aria-valuenow 必须与 min、max、value 属性保持一致，否则屏幕阅读器读出的值和实际值不匹配
• label 元素必须用 for 关联到滑块的 id，不能只靠视觉位置或 aria-labelledby 指向一个非 label 元素
• 如果滑块值是语义化描述（如“低/中/高”），必须动态更新 aria-valuetext，且该文本要真实反映当前档位，不能写死

分页、步骤向导这类导航组件，别用 div 套 ul

重构时图省事把 nav 换成 div，再加一堆 role="navigation" 和 aria-label，看起来功能正常，但破坏了语义层级。辅助技术对原生语义的信任度远高于 ARIA 补丁。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 分页必须用 nav 包裹 ul，每个页码用 li + a 或 button，禁用态用 aria-disabled="true" + tabindex="-1"，当前页用 aria-current="page"
• 步骤向导优先用 ol，每个步骤是 li，配合 aria-current="step"；若需进度条语义，加 role="progressbar" 并同步 aria-valuenow
• 所有 role 属性必须有对应的状态管理逻辑——比如切换步骤后，旧 li 的 aria-current 要清掉，新 li 要设上，否则屏幕阅读器永远停留在“第一步”

动态弹窗、折叠面板这些内容，焦点陷阱和 aria-live 是硬要求

重构时最容易忽略的是“内容出现后用户在哪”。模态框弹出后焦点还在页面顶部，折叠面板展开后键盘无法进入内容区，这些不是小问题，而是直接阻断操作路径。

立即学习“前端免费学习笔记（深入）”；

• 弹窗打开时，立即把焦点移到第一个可交互元素（如关闭按钮或首输入框），关闭时焦点必须回到触发按钮
• 使用 dialog 元素能自动处理焦点陷阱（inert 机制），比手写 aria-hidden + tabindex 更稳妥
• 搜索结果动态加载、表单验证实时反馈，必须用 aria-live="polite" 区域包裹变化内容，且该区域不能 display: none 或 visibility: hidden

重构 HTML 时，可访问性不是“加几个属性就完事”的事后补救，而是每换一个标签、每删一行内联 JS，都要问一句：这个操作对键盘用户意味着什么？对屏幕阅读器来说，它现在“说”对了吗？最常被跳过的，恰恰是焦点移动和状态同步这两步。