语义标签需构建清晰线性内容流：包裹唯一核心，按逻辑分块并配，嵌套不超过三层；表单控件须紧邻提示文本、用aria-describedby指向真实id、错误提示加role="alert"；禁用自动交互，文字行高≥1.5、字号≥16px，链接描述明确，语言须简洁主动。
用语义标签建立清晰、线性的内容流
认知障碍用户依赖可预测的结构来降低理解负担，<main></main>必须包裹唯一核心内容，<section></section>按逻辑分块（如“操作步骤”“注意事项”“常见问题”），每个<section></section>配一个<h2></h2>——跳过<h1></h1>或混用<h3></h3>作主标题会打乱阅读节奏。避免嵌套过深：<section></section>里不要套<article></article>再套<section></section>，三层即顶限。
表单与交互控件必须有即时、无歧义的反馈
认知障碍用户难以推断隐含状态，所以所有按钮和输入框需在 DOM 中紧邻对应提示文本，不靠 CSS 定位“视觉对齐”。例如：
<label for="email">请输入邮箱地址</label> <input type="email" id="email" aria-describedby="email-hint"><p id="email-hint">我们会用它发送确认邮件，格式如 name@example.com</p>
关键点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
aria-describedby必须指向真实存在的id，不能只写字符串 - 错误提示不能仅靠颜色变化（如红字），要加
role="alert"并动态插入 DOM - 提交按钮文案用动词短语（
提交申请），不用模糊词（确定）
禁用复杂交互与自动变更
轮播图、自动跳转的 tab、倒计时提交、模态框强制聚焦——这些都会打断用户的自主节奏。如果必须用：
- 轮播图加
aria-live="polite"且提供“暂停”按钮，按钮需在 DOM 中位于轮播容器之前 - tab 切换必须支持键盘方向键，且当前 tab 要有
aria-selected="true"和视觉高亮（不能只靠 :focus） - 任何页面内跳转（如锚点链接）后，焦点必须手动移至目标区域顶部：
element.focus()，否则用户会卡在原位置
文字与布局的硬性约束
这不是样式偏好，而是可读性底线：
- 正文行高 ≥ 1.5，字体大小 ≥ 16px（不能靠 rem 换算后实际小于 16px）
- 段落间留白 ≥ 行高的 1.5 倍，避免用
<br>强制换行 - 禁用纯图标按钮（如仅用 ? 图标），必须带可见文字或
aria-label，且aria-label写“搜索”，不写“放大镜” - 所有链接文字描述动作或目标（
下载使用指南（PDF，2MB）），不写“点击这里”
最常被忽略的是：即使用了 <h2></h2> 和 <section></section>，若内容本身用长句、被动语态、专业术语堆砌，结构再规范也无效。可访问性始于代码，成于语言。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
