HTML 语义化与可访问性

• 状态：未准备
• 适用方向：前端 / Go 全栈
• 最近复习：待填写
• 下次复习：待安排

一句话回答

语义化是用符合内容含义的元素表达结构，例如用 button 表示操作、a 表示导航；这让浏览器和辅助技术理解页面，并提供默认键盘交互。

原理解释

为什么不用 div 写所有东西？

div 没有按钮的默认语义和键盘行为。原生 button 通常直接支持焦点、键盘激活和禁用状态。把 div 改成按钮需要补足这些行为，单独写 role="button" 不会自动实现它们。

常见元素怎么选？

• header / nav / main / footer 表达页面区域，标题使用有逻辑的 h1～h6 层次。
• a href 用于前往地址，button 用于提交、切换、弹窗等动作。
• 表单用 label 关联输入框；placeholder 不能替代持久标签。
• 有意义的图片写描述性 alt；装饰图片用空 alt，避免冗余朗读。

<form>
  <label for="email">邮箱</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  <button type="submit">提交</button>
</form>

场景与边界

语义结构有利于内容理解，但不保证 SEO 排名。原生 HTML 是基础，复杂弹窗还需处理焦点进入、关闭后恢复、键盘退出。表单里的普通按钮应明确 type="button"，避免意外提交。

项目中的应用

阅读 Blog 前端实现与难点，沿目录组件检查导航标签、标题层级与折叠按钮。这里只列检查方向，尚未断言项目已通过可访问性审核。

常见追问

• ARIA 和原生标签选哪个？ 优先合适的原生标签；ARIA 补语义，交互仍需实现。
• 隐藏元素有什么区别？ display:none 不参与布局，通常也不进入可访问性树；opacity:0 仍占布局空间，默认仍可能被点击或聚焦。
• 怎么验证？ 只用键盘走完表单、检查焦点可见性和可访问名称，再用浏览器 Accessibility 面板核对。

参考资料

• MDN：HTML 与可访问性