alt属性必须显式声明，空字符串alt=""表示图片无语义可忽略，而缺失alt会导致屏幕阅读器误读文件名；装饰图用alt=""，信息图需有意义描述，动态图须手动设置，链接内图片alt应说明动作目标。
为什么 alt 不能为空字符串但有时又必须写成 ""
空 alt（即 alt=""）不是“没写”，而是明确告诉屏幕阅读器“这个图片是装饰性的，跳过”。如果完全省略 alt，多数辅助技术会把图片的文件名或路径读出来，比如 header-logo.png，造成干扰。
常见错误：用 alt=" "（空格）代替 alt=""——空格会被读作“空白”，反而触发播报。
- 功能性图标（如搜索按钮里的放大镜）：必须有有意义的
alt，例如alt="搜索" - 纯装饰图（如分割线、背景花纹）：用
alt=""，且不要加任何空格或注释 - 图表/信息图：不能只靠
alt交代全部信息，需配合<figure></figure>+<figcaption></figcaption>或页面附近文字说明
表单控件必须绑定 label，但 for 和 aria-labelledby 怎么选
没绑定 label 的输入框，屏幕阅读器无法关联名称和控件，用户不知道“这是填什么的”。for 是最直接的方式，但前提是 id 唯一且可预测；aria-labelledby 更灵活，适合动态生成或复用场景，但依赖 DOM 顺序和 ID 存在性。
- 静态表单、简单字段：优先用显式
<label for="email">邮箱</label><input id="email"> - 复选框组或单选按钮组：用
<fieldset>+<legend>，不用多个label拼凑 - 模态框内动态渲染的输入：若
id不稳定，改用aria-labelledby="title-desc"并确保目标元素存在且文本可读 - 避免
aria-label覆盖原label文本——它会完全替代视觉标签，导致上下文丢失
role="button" 不等于真按钮，什么情况下该用 <button>
用 div 加 role="button" + tabindex="0" + 手动处理 Enter/Space 事件，看似能“模拟按钮”，实则漏掉焦点管理、禁用状态样式、语义继承等隐式行为。只有当无法修改 DOM 结构（如第三方组件封装死）时才妥协使用。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有可点击的交互控件，只要能用
<button>、<a href="#">（带真实跳转）或<input type="button">，就绝不用role模拟 - 禁用状态必须同时设
disabled属性（对<button>）或aria-disabled="true"（对role="button"），仅 CSSopacity: 0.5不起作用 -
<button>默认是type="submit"，表单内非提交按钮务必显式写type="button"，否则触发表单提交
颜色对比度不够？别只盯着 #333 on #fff，检查实际渲染环境
WCAG AA 级要求文本与背景对比度 ≥ 4.5:1，但工具（如 axe 或 Lighthouse）检测的是静态 CSS 值，不考虑字体粗细、字号、抗锯齿、高亮状态、甚至系统级深色模式切换后的实际渲染结果。
立即学习“前端免费学习笔记（深入）”；
- 小字号（
- 按钮悬停/聚焦状态：必须重新验证对比度，很多团队只测默认态，而
:hover背景变浅后可能跌破阈值 - 深色模式下，别直接反转色值；用
@media (prefers-color-scheme: dark)单独定义，且测试真机（iOS/Android 辅助功能开启时的渲染差异） - 避免用
opacity降低文字可读性——它同时削弱前景色和背景色，对比度计算失效
可访问性不是加几个 aria- 属性就完事，而是从结构语义、键盘流、视觉反馈到运行时环境的全链路校验。最容易被忽略的，是那些“看起来没问题”的交互状态——比如折叠菜单展开后焦点没自动进入、表格排序后无 ARIA live 区域提示、或者深色模式下 SVG 图标颜色没同步更新。
