area的alt属性是强制必需的，缺失或为空会导致屏幕阅读器仅朗读“链接”而不说明去向，旧版Safari甚至忽略交互；必须用动词短语描述点击结果，如“查看火星探测器详情”。
area 的 alt 属性不是可选，而是强制要求
只要 area 带有 href，HTML5 就规定 alt 是必需属性；空字符串 alt="" 也不行——它语义上表示“无内容”，但带链接的热区显然有导航意图。漏掉或写空，NVDA、JAWS 等读屏软件可能只报“链接”，不说明去向；旧版 Safari 甚至直接忽略该 area 的交互行为。
正确写法必须是动词短语，描述点击结果：
-
alt="查看火星探测器详情"✅（动作明确、对象具体） -
alt="跳转到产品参数"✅（对应href="#specs"） -
alt="火星"❌（只是图像描述，不是操作说明） -
alt="更多信息"❌（空泛，违反 WCAG 2.1 A 级） -
alt=""或alt=" "❌（静默失效，无 fallback）
area 必须显式声明 href 或 nohref 才能被辅助技术识别
只写 <area shape="rect" coords="...">，没 href 也没 nohref，屏幕阅读器会直接跳过这个区域——它不被视为可聚焦、可交互元素。这不是“没声音”，是根本没注册进无障碍树。
实际处理方式分两类：
立即学习“前端免费学习笔记（深入）”；
- 有跳转目标：必须写有效
href，哪怕临时用href="javascript:void(0)"，后续再用 JS 绑定逻辑 - 纯装饰/占位区域：加
nohref（HTML5 已废弃但主流读屏器仍依赖） - 仅靠
onclick不够：JS 事件不自动赋予语义，若真要用，得补role="link"和tabindex="0"
usemap 与 map name 不匹配会导致 area 完全不可见于辅助技术
浏览器只做逐字节字符串匹配：usemap="#product-map" 必须对应 <map name="product-map">。大小写、连字符、空格、漏掉 # 全部算错。一旦断连，所有 area 对辅助技术来说都不存在。
调试时别靠肉眼扫，推荐三步验证：
- 右键图片 → “检查” → 复制
usemap值，再选中map元素复制其name，粘贴到编辑器里做纯文本比对 - 用键盘按
Tab键，看焦点能否落到任意一个area上（应有 focus 样式） - 开启 VoiceOver 或 NVDA，用方向键浏览，确认每个
alt能被逐条朗读
动态插入的 area 很容易漏掉 alt，且失效时完全静默
服务端渲染模板拼接、或 JS 动态生成 area 时，alt 最常被遗漏。它不像 img 那样有视觉 fallback：漏了，用户看不见提示，也点不动，控制台还不报错。
真实验证不能只看源码，得用工具确认是否生效：
- Chrome DevTools 中定位到
area元素，查看 DOM 树里是否真实渲染出alt属性（某些框架会 runtime 删除） - 运行 axe 插件，搜索
areamissingalt错误 - 在移动端真机上启用系统读屏，测试触控焦点路径是否覆盖全部热区
coords 坐标本身不影响可访问性，但缩放后热区偏移会导致触控失败——44×44px 是移动端最小可触控尺寸，原始图上 coords="0,0,20,20" 缩放到手机后可能只剩 10×10px，用户点不中，也就触发不了任何 alt 朗读。这点常被忽略：可访问性不只是“能读出来”，更是“能点进去”。
