必须用 button 标签而非 div 实现按钮功能，因其自带聚焦、键盘响应和语义；标题需严格按 h1→h2→h3 层级嵌套；label 必须显式或隐式关联 input；语义化标签（nav/main/header）不可省略且须正确使用；动态内容更新后须同步可访问性属性。

为什么用

写按钮会直接导致键盘用户无法操作

因为 div 默认不可聚焦、不响应 Enter 或 Space 键，屏幕阅读器也不会将其识别为交互元素。即使加了 onclick，键盘用户 Tab 到它时焦点不会停留，按回车也无反应。

• 必须用 button 标签——它自带 tabindex="0"、键盘事件支持和 role="button" 隐式语义
• 如果非要用 div（极少数场景），至少补全：tabindex="0" + role="button" + 手动监听 keydown 事件处理 Enter/Space
• button 的默认 type="submit" 在表单里可能意外提交，建议显式写成 type="button"

标题层级错乱会让屏幕阅读器用户“迷路”

标题不是用来控制字号的，而是构建内容骨架。跳过 h2 直接写 h4，或一个页面塞多个 h1，会让 AT（辅助技术）无法建立逻辑路径。

• 每个页面有且仅有一个 h1，代表主主题
• 子级标题严格按顺序嵌套：h1 → h2 → h3，不跳级、不倒序
• 避免用 CSS 把 h2 样式调得比 h1 小——视觉样式不影响语义层级
• 不要用 strong 或 font 模拟标题；它们没有结构意义，AT 完全忽略

label 不配 for 或没包裹输入框，等于没写

没关联的 input 对屏幕阅读器来说就是“一个没名字的空白框”。用户听到的是“编辑文本”，不知道该填什么。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 优先用隐式关联：把 input 放进 label 标签内，最简、最稳
• 显式关联需确保 label 的 for 值与 input 的 id 完全一致（含大小写、空格）
• placeholder 不是 label 替代品——它会消失，且部分 AT 不读取
• 多选/单选组用 fieldset + legend，否则每个选项都孤立无上下文

nav、main、header 这些标签不是“可选装饰”

它们提供隐式 ARIA role（如 nav ≡ role="navigation"），是浏览器和 AT 理解页面区块的唯一可靠依据。靠 class 名模拟毫无作用。

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

• main 必须且只能出现一次；重复会导致 AT 跳转混乱
• nav 应包裹真正用于导航的链接，页脚一堆“友情链接”不算导航，别硬套
• aside 仅用于与主内容相关但可独立存在的内容（如侧边栏推荐），广告或无关推广别滥用
• 所有语义容器都应有实际内容支撑——空的 header 或只有 logo 的 footer 仍要保留，但别为了“结构完整”而堆砌

真实项目里最容易被忽略的，是动态内容更新后的语义同步：比如用 JS 替换了一段 DOM，新插入的 button 如果没重置 tabindex 或遗漏 aria-* 属性，就会立刻掉出可访问链路。语义不是写完 HTML 就一劳永逸的事。