错误提示页面可访问性核心在于让屏幕阅读器感知并播报错误：需用aria-live="polite"主动通知，错误容器置<form>前；字段须设aria-invalid="true"和aria-describedby指向可见错误ID；错误页必含语义化<main>与<h1>，按钮用原生元素，html须声明lang="zh-CN"。
错误提示页面的可访问性问题，90% 出现在用户根本“听不到”错误、也“找不到”错误位置——不是没写提示，而是没让屏幕阅读器感知到它。
错误消息必须用 aria-live 主动通知
表单提交失败、字段校验不通过、网络异常等错误，若只靠 CSS 显示/隐藏（比如 display: none → display: block），屏幕阅读器不会读出新内容。它只在初始渲染时构建可访问树，动态插入的内容默认被忽略。
-
aria-live="polite"是最常用且安全的选择：等用户当前操作（如朗读完当前段落）后再播报，不打断 - 必须把错误容器放在 DOM 中靠前位置，推荐紧贴
<form>开头，否则可能被跳过 - 避免包裹空文本或纯图标：
<div aria-live="polite"><span aria-hidden="true">⚠️</span>邮箱格式错误</div>是 OK 的；但<div aria-live="polite"><img src="error.svg"></div>不行——没文字，读屏无内容可读 - 不要对同一区域反复设置
aria-live，会导致重复播报；建议复用一个固定容器，只更新其 innerText
每个报错字段必须绑定 aria-invalid 和 aria-describedby
光有视觉红框和下方文字，对键盘用户和读屏用户是无效的。他们需要明确知道：“这个输入框出错了，错在哪，怎么改”。
-
aria-invalid="true"告诉辅助技术该控件当前状态异常（比 class 名可靠得多） -
aria-describedby="error-email"必须指向错误消息元素的id，且该元素不能被display: none或visibility: hidden隐藏——要用clip-path+sr-only类或aria-hidden="true"控制视觉隐藏 - 如果一个字段有多个错误（如“不能为空”+“邮箱格式错误”），
aria-describedby可以用空格分隔多个 id：aria-describedby="error-required error-format" - 禁用 placeholder 作为错误提示：它不持久、不被读屏识别、对比度常不达标
错误页主体结构必须含 <main> 且有语义化标题
404、500、网络断开等错误页，常被写成简单 div 堆砌，导致屏幕阅读器无法定位主内容，用户打开页面后不知所措。
立即学习“前端免费学习笔记（深入）”；
-
<main>必须存在、唯一、且是<body>的直接子元素；不能包在<div class="wrapper">里 - 错误页至少要有
<h1>，比如<h1>页面未找到（404）</h1>，不能只靠大号字体或图标传达 - 关键操作按钮（如“返回首页”）必须用
<button>或带href的<a>，禁用<div onclick>+tabindex="0"—— 后者无法被语音指令识别（如“点击返回首页”） - 如果错误页含搜索框或联系表单，同样要遵守 label 绑定、
aria-live提示等规则，不能因为“只是错误页”就降级处理
最容易被忽略的点：错误页往往没设 lang 属性，或用了模糊的 lang="zh"。NVDA 和 VoiceOver 在遇到无语言声明的页面时，会按系统默认语言朗读，中文字符可能被读成日文或拼音。务必写明 <html lang="zh-CN">，哪怕只是静态错误页。
