分类：前端与客户端 · 路径：docs/topics/html-semantics-and-forms/README.md

学会用语义化 HTML5 的 landmark / section / 表单 / ARIA，把任何页面做出屏幕阅读器和搜索引擎都看得懂的结构

语义化 HTML5 与表单：从 landmark 到无障碍表单

0. 元信息

主题路径：docs/topics/html-css-responsive/subtopics/html-semantics-and-forms/
父主题：html-css-responsive
主分类：前端与客户端
辅助分类：无障碍
适合对象：会写 HTML，但页面靠 <div> 拼装、不理解 landmark 与表单可访问性的开发者
建议周期：1 周（每周 8~10 小时）
前置知识：会用编辑器写 HTML、能开本地 http server
最终目标：能独立写出任意页面的语义化结构与无障碍表单，并通过 axe-core 0 critical 违规

1. 学习路线

HTML5 文档结构（<!DOCTYPE>、<html lang>、meta、head、body）
  → landmark 五大区（header / nav / main / aside / footer）
  → 内容分区（article、section、figure、details、address、time、mark）
  → 表单元素（<form>、<label>、<fieldset>、<legend>、<input>、<select>、<textarea>、<datalist>、<output>）
  → 原生校验（required、pattern、min/max、type=email/url/tel/number、:invalid/:valid、Constraint Validation API）
  → ARIA 补缝（aria-label、aria-labelledby、aria-describedby、aria-live、aria-current、role）
  → 焦点与跳转（tabindex、skip links、focus management）

按”骨架 → 内容 → 表单 → ARIA”的顺序学。每一步用一个 demo 验证，不堆链接不背书。

2. 阶段周数分配（1 周，每天 1.5~2 小时）

阶段	建议周数	每天时长	概述
1. 文档骨架	0.5	1.5h	doctype / html lang / meta viewport / title / link / color-scheme
2. landmark	0.5	1.5h	header / nav / main / aside / footer 与多 main 写法
3. 内容分区	0.5	1.5h	article / section / figure / details / address / time
4. 表单元素	0.5	1.5h	form / label / fieldset / legend / input / datalist / output
5. 原生校验	0.5	1.5h	required / pattern / min-max / type / :invalid / :user-invalid
6. ARIA 补缝	0.5	1.5h	aria-label / aria-labelledby / aria-describedby / aria-current
7. 焦点与跳转	0.5	1.5h	tabindex / skip link / roving tabindex / 焦点回退
8. 表单可访问	0.5	1.5h	aria-live 提交反馈 / 错误汇总 / output
9. 综合 demo	1.0	1.5~2h	完整 contact 页面 + axe 0 critical

总计 5 小时 × 7 天 ≈ 35 小时。1 周内可完成；如时间紧，至少 7 天写完 §4 全部任务。

3. 九阶段表

阶段	核心知识	实践产出	学会标准
1. 文档骨架	`<!DOCTYPE html>`、`<html lang>`、`<meta charset>`、`<meta viewport>`、`<title>`、`<link>`、`<style>`、`<meta name="color-scheme">`	最小可访问 HTML5 模板	能解释 viewport 的 `width=device-width, initial-scale=1`
2. landmark	`header` / `nav` / `main` / `aside` / `footer`，多个 main / nav 的 aria 写法	一份 1 页博客骨架	axe 报”page-has-heading-one”与 landmark 计数为 1 main
3. 内容分区	`article` / `section` + heading、`figure` + `figcaption`、`details` + `summary`、`address`、`time`	一篇带目录与可折叠 FAQ 的博客	能解释”article vs section”的差别
4. 表单元素	`<form action method>`、`<label for>`、`<fieldset>`、`<legend>`、`<input list>`、`<datalist>`、`<output>`	注册页（用户名 / 邮箱 / 密码 / 确认）	不看答案能写出”显示/隐藏密码”切换
5. 原生校验	`required`、`pattern`、`minlength`、`maxlength`、`type`、`:invalid`、`:user-invalid`、`:focus-visible`	注册页带错误样式	能解释 `:invalid` 与 `:user-invalid` 的区别
6. ARIA 补缝	`aria-label`、`aria-labelledby`、`aria-describedby`、`aria-invalid`、`aria-required`、`aria-current="page"`	导航高亮当前页 + 表单错误关联	能解释何时 ARIA 该加、何时不该
7. 焦点与跳转	`tabindex`（0 / -1）、skip link、roving tabindex、焦点回退	可用键盘通行的 navbar	能用 Tab 走完一遍表单不出错
8. 表单可访问	`aria-live="polite"` 表单提交反馈、错误汇总、`<output>`	提交后展示成功或失败总结	NVDA / VoiceOver 报”提交成功”
9. 综合 demo	把 1~8 拼成”联系页”——带表单校验、ARIA、键盘路径、打印友好	完整 contact 页面 + axe 0 critical	Lighthouse a11y ≥ 95

陷阱集中在三个：把 landmark 当样式挂钩、用 <div> 代替 <button>、给 <label> 写但不绑。

4. 第一周（每天 1.5~2 小时）

Day 1 约定：编辑器 = VS Code + 官方 HTML 扩展 + axe DevTools 扩展；浏览器 = Chrome + Firefox；本计划全程静态 HTML，不引入框架。所有截图、axe 报告与 DevTools 设备模拟记录到 notes/week1/dayN/，便于复盘与综合项目引用。

日	任务	当天交付	自检
Day 1	用语义化标签写 hello page（含 `<header><nav><main><article><aside><footer>`），装 axe DevTools 并扫一次	截图 + axe 报告（HTML/JSON）	axe 报”page-has-heading-one”且 landmark 计数=1 main
Day 2	表单 + 校验：注册页（用户名 / 邮箱 / 密码 / 确认），用 `<label for>`、`<fieldset>`、`pattern`、`required`、`:invalid`	4 类边界（空 / 错 / 短 / 长）的截图	提交前 4 类输入分别触对应错误样式；label 点击聚焦正确控件
Day 3	landmark 多 main 练习：写 2 个 `<main>`（一主一子区），给次级加 `aria-label`；用 NVDA / VoiceOver 跳区	屏幕阅读器跳区文字记录	主区被读为”main”；次区被读为”main, X”
Day 4	内容分区：写一篇带 `<article>`、`<section>`、`<figure>`、`<figcaption>`、`<details>`、`<summary>`、`<time>` 的博客	截图 + Markdown 源	Heading rank 连续；details 键盘可展开
Day 5	原生校验 + `<datalist>` + `<output>`：做一个带输入建议与结果展示的计算器	截图 + 笔记	`:user-invalid` 在字段离开后才显示；output 内容随 input 变化
Day 6	ARIA 补缝：导航 `aria-current="page"` 高亮；表单错误用 `aria-describedby` 关联段落；用 `aria-live="polite"` 段落提交反馈	截图 + axe 报告	axe 0 critical；VoiceOver 朗读错误信息
Day 7	项目：最小 contact 页面。步骤 A：手机版 360×640 跑通；步骤 B：补桌面 1440×900 与打印预览；步骤 C：axe 0 critical	3 张截图 + axe 报告 + 简短 README	axe 0 critical；Lighthouse a11y ≥ 95；打印样式保留主内容

Day 7 步骤 A 只求”移动能看”；步骤 B 每次只加一个断点；步骤 C 必须手测键盘路径（Tab + Enter 走完整个表单）。

5. 阶段通用验收

不看答案重写该阶段的最小 demo（用最少元素完成同样语义）；
解释”landmark vs div”、“label for vs aria-label”、“required vs aria-required”的取舍；
截图 3 种宽度（360 / 768 / 1440）+ 打印预览 + axe 报告；
键盘路径手测一次：Tab 顺序正确、Enter 提交、Esc 关弹窗、Shift+Tab 退到 skip link；
屏幕阅读器（VoiceOver 或 NVDA）至少跳区一次 + 朗读错误一次；
列出至少 3 类边界（空字段 / 超长 / 仅鼠标 / 关闭 JS 后的 native 校验）；
能修改现有页面（加 landmark、换 ARIA、加 skip link）而不是只能照抄。

6. 最终验收

独立完成：1 份完整 contact 页面（4 个断点：360 / 768 / 1024 / 1440）+ 1 份注册页（含校验 + 错误样式 + aria-live）；
至少完成 9 个练习：3 个语义化结构、2 个表单校验、2 个 ARIA 补缝、2 个内容分区；
Lighthouse 跑分：A11y ≥ 95、Best Practices ≥ 90、SEO ≥ 90；
axe-core / axe DevTools 0 critical / serious 违规；
W3C HTML Validator 0 error；
键盘路径手测：可仅用 Tab / Shift+Tab / Enter / Space 走完 contact 页与注册页；
屏幕阅读器手测：VoiceOver / NVDA 至少完成 1 次跳区、1 次表单错误朗读；
能用 10 分钟讲清”native first”与”ARIA 补缝”的边界。

7. 综合项目

首选：设计并实现一套个人作品集 landing + 联系页（同品牌两套页），每页覆盖桌面 / 平板 / 手机 / 打印 4 态，落地”语义化结构 + 无障碍表单 + 键盘路径”。

必做：

landmark 完整：header / nav / main / aside / footer 至少 1 套；
表单 ≥ 2 种（联系 / 订阅 / 注册中选 2），含 <fieldset> / <legend> / <label for>；
原生校验：必填 / 邮箱 / 长度 / pattern 至少各 1 例；
ARIA：aria-current="page"、aria-describedby 错误关联、aria-live="polite" 提交反馈各 1 例；
焦点：:focus-visible 自定义焦点环 + skip link + 弹窗焦点回收；
打印：@media print 隐藏 nav / 按钮，保留主内容并附 URL 链接；
资源：图标 SVG inline；图片带 alt；<meta name="color-scheme" content="light dark">；
验证：W3C HTML Validator 0 error；axe DevTools 0 critical；Lighthouse a11y ≥ 95。

备选：重构一套遗留的”全 div 拼装”营销页为语义化结构 + 无障碍表单，附”原 vs 新”对比截图与 axe 报告。

notes/ 与 README 存放规范

所有截图、axe 报告、HTML Validator 输出、Lighthouse JSON 统一存放在项目根目录的 notes/ 子目录或 README 的对应章节；提交时一并带上，避免散落在聊天或临时文件里。综合项目的 notes/ 至少包含：

notes/design.md：页面结构（landmark 树）、表单字段说明、ARIA 决策表；
notes/test.md：每张截图对应的断点、axe 报告粘贴、键盘路径逐项记录；
notes/retrospective.md：复盘（用时、难点、收获、未完成项）。

任何综合项目都必须包含：

需求与受众；
完整源码（HTML + 必要 CSS，可含少量 JS 用于 menu / 弹窗）；
语义化结构图（landmarks + sections）；
表单字段清单（label / name / type / required / autocomplete / validation）；
边界测试：空 / 长 / 短 / 错 / 仅键盘 / 仅屏幕阅读器 6 类各 1 例；
axe + Lighthouse + W3C Validator 报告（HTML / JSON 原文）；
README：项目介绍、运行步骤、目录结构、复盘；
复盘记录：用时、难点、收获、下一步。

本主题贡献（Loop 6-D · html-css-responsive / html-semantics-and-forms）

本主题给所有前端子主题铺”语义正确 + 表单可填 + 屏幕阅读器可读”的工程底座，让每一段 HTML 都能被 axe-core 收、键盘走得通、屏幕阅读器跳区、表单错误能被 aria-live 朗读。

3 项核心职责

Semantic HTML 结构：用 Semantic HTML（<header> / <nav> / <main> / <article> / <aside> / <footer>）搭出 landmark 树，配 heading 级别正确（h1 → h2 → h3 不跳级），让屏幕阅读器（VoiceOver / NVDA）能按 landmark 跳区。
ARIA 与键盘可达：只在 semantic 缺口处用 aria-*（aria-label / aria-labelledby / aria-current / aria-live / aria-describedby / aria-invalid），避免与 <label> 双重朗读；用 tabindex="0/-1"、roving tabindex、skip link 让纯键盘能走完整个交互。
表单可填 + 可验：每个输入都有 <label for> / name / type / required / autocomplete，错误用 aria-live="polite" 段落朗读，HTML5 validation 与 ARIA 错误并存且不抢焦点。

4 项交付物

Semantic HTML 模板页：含完整 landmark 树（<header> / <nav> / <main> / <article> / <aside> / <footer>）+ heading 级别清单，axe 0 critical。
表单组件库：login / register / search / contact 4 类表单，每类带 label / autocomplete / validation / aria-describedby / aria-live 错误段，外加键盘路径逐项记录。
aria- 决策表*：每条 semantic 缺口 → 选择哪个 aria-* → 验证命令（axe + 屏幕阅读器手测），明确”何时用 ARIA、何时优先改语义”。
边界测试 6 类：空 / 长 / 短 / 错 / 仅键盘 / 仅屏幕阅读器，每类 1 例截图 + axe + W3C Validator 报告（HTML / JSON 原文）。

3 个验收指标

axe-core：表单 / landmark / heading 三类规则 0 critical / 0 serious，CI 阻断命中示例 ≥ 1 个。
W3C HTML Validator：0 error，warning 全注释。
屏幕阅读器跳区：VoiceOver / NVDA 至少能跳 5 个 landmark，能听到表单错误 live 朗读。

8. 推荐开源资料

阶段	角色	资料	链接	用法
1~8	权威参考	MDN HTML elements reference	https://developer.mozilla.org/en-US/docs/Web/HTML/Element	查元素语义、attribute 与 content model
4~8	权威参考	MDN Forms guides	https://developer.mozilla.org/en-US/docs/Learn/Forms	表单主线
6~8	权威参考	MDN ARIA	https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA	ARIA 速查
1~8	规范	WHATWG HTML Living Standard	https://html.spec.whatwg.org/multipage/	HTML 唯一权威
6~8	规范	WAI-ARIA 1.2	https://www.w3.org/TR/wai-aria-1.2/	ARIA 规范
6~8	验收基准	WCAG 2.2	https://www.w3.org/TR/WCAG22/	无障碍验收
1~8	入门	web.dev — Learn HTML	https://web.dev/learn/html/	Google 出品，结构清晰
6~8	入门	web.dev — Accessibility	https://web.dev/accessibility/	Google 实践
6~8	速查	The A11y Project	https://www.a11yproject.com/	a11y checklist
6~8	控件范式	WAI ARIA Authoring Practices Guide	https://www.w3.org/WAI/ARIA/apg/	自定义控件写法
6~8	自动化	axe-core rules	https://github.com/dequelabs/axe-core/tree/develop/doc	axe 规则清单
7~8	工具	axe DevTools 浏览器扩展	https://www.deque.com/axe/devtools/	浏览器内 a11y 扫描
7~8	验证	W3C HTML Validator	https://validator.w3.org/	标红 HTML 错误
8	历史	HTML5 Doctor	http://html5doctor.com/	元素语义史

许可证提示：MDN 内容采用 CC BY-SA 2.5；WCAG / WAI-ARIA 规范文本由 W3C 公开；axe-core 是 MPL-2.0；web.dev 文章为 CC BY 4.0。复制代码或长段引用前先看 LICENSE；默认做法是读思路后自己重写，而不是复制粘贴。

默认使用顺序：MDN / WHATWG 规范查文档 → web.dev / A11y Project 走主线 → 自己写 demo → 跑 axe DevTools + W3C Validator → 看 axe-core rules 排错 → WCAG 2.2 对照验收 → 必要时再查 ARIA Authoring Practices 写自定义控件。

9. 学习资料汇聚（v0.3 自包含）

9.1 背景与动机

HTML 在 1991 年只用来描述超文本——标题、段落、链接。1999 年 HTML 4.01 是上一代”完整”标准。2014 年 HTML5 标准发布，<header>、<nav>、<main>、<article>、<section> 等 landmark 出现，浏览器与屏幕阅读器从”按 div 猜”变成”按标签定位”。2023 年 WAI-ARIA 1.2 让任何自定义控件也能向辅助技术暴露语义。

形式化的语义带来三件事：1) 屏幕阅读器能跳区（Skip to main content）；2) 搜索引擎能识别主内容；3) 表单能原生校验并被屏幕阅读器读出来。

9.2 概念地图

flowchart LR
  Doc[文档 doctype/html/head/body] --> Lang[html lang]
  Doc --> Meta[meta: viewport / color-scheme]
  Doc --> Title[title]
  Doc --> Link[link: stylesheet / preload]

  Body --> Landmark[landmark: header/nav/main/aside/footer]
  Body --> Section[article/section + heading]
  Section --> Figure[figure + figcaption]
  Section --> Details[details + summary]
  Section --> Time[time datetime]

  Body --> Form[form]
  Form --> Label[label for / aria-labelledby]
  Form --> Fieldset[fieldset + legend]
  Form --> Input[input + type + pattern]
  Form --> Datalist[datalist]
  Form --> Output[output]
  Form --> Validation[Constraint Validation API]

  Body --> A11y[ARIA: roles / aria-* / aria-live]
  A11y --> Focus[tabindex / skip link / roving tabindex]

9.3 基础知识讲解

9.3.1 论文 / 规范

资料	影响	建议读法
W3C HTML Living Standard — Semantics	当前 HTML 唯一权威	查元素语义、attribute 与 content model
WAI-ARIA 1.2	ARIA 角色与属性	决定”何时加 role vs 直接换 native 元素”
WCAG 2.2 — Success Criterion 1.3.1 / 4.1.2	landmark 与 label 强制要求	验收必查
HTML5: A vocabulary and associated APIs (W3C, 2014)	HTML5 历史规范	留作溯源

9.3.2 经典书籍

书	作者	用法
HTML5: The Missing Manual	Matthew MacDonald	入门主线
Web Content Accessibility Guidelines 配套书	various	配套 WCAG 2.2
Inclusive Components	Heydon Pickering	控件 a11y 进阶

9.3.3 优秀博客 / 文档

资料	用法
MDN HTML elements reference	默认查文档
MDN Forms guides	表单主线
MDN ARIA	ARIA 速查
web.dev — Learn HTML	Google 出品
The A11y Project	a11y 速查
axe-core rules	自动化规则清单
WAI — ARIA Authoring Practices	自定义控件写法
HTML5 Doctor	元素语义历史

9.3.4 核心人物

人物	主要影响	建议追踪的材料
Tim Berners-Lee	HTML / Web 起源	1989 提案
Ian Hickson	HTML5 主编（2004~2011）	WHATWG 早期
Anne van Kesteren	WHATWG 编辑	HTML Living Standard
Steve Faulkner	HTML 与 ARIA 实践	博客与 Twitter
Léonie Watson	AT 视角的 a11y	Tetralogical 博客
Heydon Pickering	包容性组件	Inclusive Components

9.3.5 开发方法

方法	具体动作	何时用
Native first	先用原生元素（`<button>`、`<select>`），不够再加 ARIA	一开始
Label-or-aria-label	表单控件必须有可访问名	表单必查
Skip-to-content first landmark	跳转链接作为第一个可聚焦元素	长页面
Live region 谨慎	用 `aria-live="polite"` 通知，避免 `assertive`	表单提交反馈
Heading-rank continuity	不跳级	结构清晰

9.3.6 必读资源子集（≥5 条）

MDN HTML elements reference
MDN Forms: Structuring web forms
WAI-ARIA 1.2 Spec
web.dev — Learn HTML / Accessibility
The A11y Project — Checklist
WAI ARIA Authoring Practices Guide
axe-core rules

9.4 经典问题与经典案例

#	问题	为什么重要	最简答案
1	`<div onClick>` 代替 `<button>`	丢键盘与屏幕阅读器	改 `<button type="button">`；如要 styled-as-div，CSS reset button 样式
2	`<label>用户名</label>` 不绑	label 与 input 无关联，点 label 不聚焦	`<label for="username">` + input id 同步
3	多 main / 多 nav 冲突	landmark 重复报错	嵌套时给次级 nav 加 `aria-label` 区分
4	placeholder 代替 label	失去焦点后输入无标签	label 永远在；placeholder 仅作提示
5	错误用 `alert()` 通报	屏幕阅读器抢焦点	用 `aria-live` 区域展示提交反馈
6	`<fieldset>` 内多个独立 `<legend>`	字段分组语义混乱	一个 fieldset 一个 legend
7	autocomplete=“off” 关掉自动填充	用户体验变差	改为 `autocomplete="email"` 等标准 token
8	`<select>` 内塞自定义 UI	原生 select 不能样式化所有浏览器	简单用 native；如必须自定义，用 Listbox pattern + ARIA + 键盘
9	必填字段无 `required` 与 `aria-required`	屏幕阅读器不读”必填”	HTML `required` + `aria-required="true"` 兼容旧 AT
10	焦点被抢走	用 JS `.focus()` 不当	仅在用户行为（提交）后聚焦；保持文档顺序
11	`tabindex="1"` 显式排序	干扰 natural tab order	用 `tabindex="0"` 纳入顺序；负数挪走
12	隐藏元素仍可聚焦	`display:none` 后 Tab 还进	用 `inert` 或 `visibility:hidden` + `tabindex="-1"`

9.5 学习难点

概念难点

难点	为什么卡	突破路径
article vs section vs div	难定”何时升级”	有独立可分发内容 = article；按主题分组 = section；纯装饰 = div
landmark 嵌套	怕报”multiple main”	nav 嵌套时给子 nav 加 `aria-label`；aside 内的 nav 用次级
当用 native vs 当用 ARIA	写错都被 axe 报	永远 prefer native；ARIA 只在 native 不够时

思维难点

难点	为什么卡	突破路径
表单 UX 与 a11y 拉扯	为了好看改控件	用 CSS 把原生控件画漂亮；不替换语义
错误信息写法	不知何时 pop	用 `aria-describedby` 指向错误段落；切下一段 `aria-live`

工程难点

难点	为什么卡	突破路径
表单反垃圾不挡真人	honeypot / 时间戳副作用	时间戳 + 简单 `<input type="text" hidden tabindex="-1">` + 服务端校验
多页表单状态	刷新丢失	默认 `<form>` 提交即可；如要 SPA，用 `<output>` + history API
表单 i18n	label / error 文案分散	抽成对象 + `aria-label="t('email')"`

9.6 技术标准与接口

9.6.1 Entity

名称	版本	发布组织	状态	许可证
HTML Living Standard	持续	WHATWG	Living Standard	CC BY 4.0 / public-domain source
WAI-ARIA	1.2	W3C WAI	Recommendation	公开
WCAG	2.2	W3C	Recommendation	公开
Constraint Validation API	HTML Living Standard	WHATWG	稳定	同上

9.6.2 Scope

HTML 定义结构与语义；ARIA 补充 native 控件够不到的语义；WCAG 给出 a11y 验收。
表单原生能力：required、pattern、type、min / max / step、minlength / maxlength、Constraint Validation API。

9.6.3 Structure

文档结构：<!DOCTYPE html><html lang><head><body>。
landmark：header / nav / main / aside / footer。
内容：article / section + h1..h6、figure + figcaption、details + summary、time + datetime、mark、address。
表单：form + fieldset + legend + label + input / select / textarea + datalist + output。
通用：button、a、<template>、<slot>（Web Components）、dialog（原生弹窗）、popover（HTML invoker）。

9.6.4 Ecosystem

默认控件：<input type=email|tel|url|number|date|time|color|range|file|checkbox|radio>。
ARIA 完整集：role (~70) + aria-* (~50)，最常用：aria-label、aria-labelledby、aria-describedby、aria-current、aria-expanded、aria-controls、aria-live、aria-invalid、aria-required、aria-hidden、aria-modal。
验证：HTML5 Validator、axe-core、Lighthouse、pa11y、eslint-plugin-jsx-a11y。

9.6.5 Depth Tiers

层级	能力	HTML 子主题可观察标准
L0	知道存在	知道有 landmark、表单、ARIA
L1	看得懂示例	能读懂 MDN 表单示例
L2	能正确调用	能写语义化结构 + 无障碍表单
L3	能解释与排错	能解释何时用 ARIA；能修 axe 报错
L4	能设计与扩展	能设计自定义组件 + 键盘 + 屏幕阅读器三条路径

本子主题目标：L3。

9.6.6 Source

HTML Living Standard：HTML 唯一权威。
WAI-ARIA 1.2：ARIA 规范。
WCAG 2.2：无障碍验收基准。
引用快照日期：2026-07-30。

10. 常见误区

用 <div> + <span> 凑所有结构；
landmark 标签写错（如 <section> 包整页但当作 main）；
<label> 写在 <input> 旁但不绑 for；
<button> 缺 type，被当成 submit；
必填字段只靠 * 视觉提示，无 required 与 aria-required；
placeholder 代替 label；
自动校验报错用浏览器默认 tooltip，无可见错误关联；
aria-hidden="true" 隐藏后仍可 Tab 进入；
tabindex 显式排序（tabindex="1"、2、3）破坏 natural tab order；
用 <select> 装自定义选项，外面套 div 又不标 ARIA；
表单提交后没 aria-live 反馈；
把 skip link 放到页面中间而不是第一个 tab；
popover / dialog 不管理焦点回收；
表单字段没有 autocomplete token，浏览器不能自动填充；
表单错误只显示一行，没用 role="alert" 或 aria-live 通知 AT。

11. 所有知识点分类（统一规则）

本子主题归属：前端与客户端 主 + 无障碍（工程技术） 辅。

语义化 HTML5 与表单：从 landmark 到无障碍表单

父主题

子主题（0）

语义化 HTML5 与表单：从 landmark 到无障碍表单

0. 元信息

1. 学习路线

2. 阶段周数分配（1 周，每天 1.5~2 小时）

3. 九阶段表

4. 第一周（每天 1.5~2 小时）

5. 阶段通用验收

6. 最终验收

7. 综合项目

notes/ 与 README 存放规范

本主题贡献（Loop 6-D · html-css-responsive / html-semantics-and-forms）

8. 推荐开源资料

9. 学习资料汇聚（v0.3 自包含）

9.1 背景与动机

9.2 概念地图

9.3 基础知识讲解

9.3.1 论文 / 规范

9.3.2 经典书籍

9.3.3 优秀博客 / 文档

9.3.4 核心人物

9.3.5 开发方法

9.3.6 必读资源子集（≥5 条）

9.4 经典问题与经典案例

9.5 学习难点

概念难点

思维难点

工程难点

9.6 技术标准与接口

9.6.1 Entity

9.6.2 Scope

9.6.3 Structure

9.6.4 Ecosystem

9.6.5 Depth Tiers

9.6.6 Source

10. 常见误区

11. 所有知识点分类（统一规则）

直接依赖（0）