90% HTML无障碍问题集中在alt、label、lang、main四点：alt需描述功能而非名称，label须显式关联控件，lang必须正确声明，main须为body直系唯一子元素。
HTML无障碍可访问性问题，90% 都出在四个地方：alt 缺失或无效、label 与表单控件未显式关联、lang 属性缺失或错误、main 结构错位或冗余。改完这四点，Lighthouse 可访问性得分通常能从 40+ 直接跳到 85+，且无需重写逻辑。
img 标签的 alt 属性为什么总报错
不是“没写 alt”才报错，而是写了但写得不对——工具会把 alt="图片"、alt="icon"、alt="submit.svg" 全部标为严重问题。屏幕阅读器需要知道“这个图用来干什么”，不是“它叫什么”。
- 功能性图片（按钮图标、图表、产品图）必须写用途：
alt="提交表单"，不是alt="submit" - 带链接的图片，alt 应描述目标：
alt="前往帮助中心"，而非alt="问号图标" - 纯装饰图必须显式写
alt=""；留空或缺失，读屏器会跳过或误读 - SVG 内联时，不能只靠
title；需配合role="img"或aria-hidden="true"（若已有title） - 旁边已有相同文字说明的图片，
alt=""比重复文本更合适
表单控件为什么键盘聚焦后读不出名称
视觉对齐 ≠ 语义关联。仅靠 <div>邮箱<input type="email"></div> 这种写法，屏幕阅读器根本不知道这是邮箱字段——它只看到一个无名的 input。
- 优先用包裹式：
<label>邮箱<input type="email"></label>，天然绑定，点击 label 也能聚焦 - 分离布局时，必须配对
for和id：<label for="email">邮箱</label><input id="email" type="email">，id值不能含空格、大写或下划线 -
placeholder不是 label 替代品：它不持久、对比度常不达标、输入后消失，读屏器也不会把它当字段名 - 禁用状态必须加
disabled属性，光靠 CSSopacity: 0.5不行——键盘仍可聚焦，读屏仍报“可编辑”
lang 属性和 main 标签为什么一动就崩
lang 写错或漏掉，NVDA/VoiceOver 会切错语音引擎；main 嵌套或冗余，会导致“M 键跳转”直接失效——用户按 M 想直达正文，结果停在广告栏里。
立即学习“前端免费学习笔记（深入）”；
-
<html lang="zh-CN">必须写在第一行开头，前面不能有 BOM、空格或注释，否则 IE/Edge 进入 Quirks Mode，ARIA 全部失效 - 全页面只能有一个
<main></main>，且必须是<body>的直接子元素，不能包在<div class="wrapper">里 -
<main>里只放核心内容（如文章正文、商品列表、主表单），不能塞顶部 banner、侧边栏、footer - Next.js / Vue 等 SPA 场景下，
<title>和<h1>必须随路由动态更新，否则读屏器永远只读初始页
第三方模板和插件怎么补可访问性
别指望插件文档里写着“支持 ARIA”就真能用。日历、下拉框、富文本编辑器等，默认往往连 role="button" 都不加，更别说焦点捕获或 aria-live。
- 先手动测试：用 Tab 键走一遍流程，开 NVDA 听一遍，再看 Elements 面板里关键节点有没有
aria-expanded、aria-controls动态更新 - 不改源码的前提下，在外层 wrapper 补语义：
<div role="application">...插件容器...</div>（仅限复杂控件） - 用
MutationObserver监听插件渲染完成，动态注入缺失属性，比如给触发按钮加aria-label="打开日期选择器" - 每个
<nav>必须带具体aria-label：aria-label="主导航"可行，aria-label="Navigation"或空着等于没标 - iframe 必须设
title，否则 VoiceOver 只报“框架”，用户无法预判内容类型
真正卡住修复进度的，从来不是 alt 没写或 tabindex 没设，而是“这张图对用户意味着什么”“这个按钮在上下文中该叫什么”——这些必须人来读、来判、来写，脚本没法猜。
