area标签必须带href或nohref，否则屏幕阅读器直接忽略；alt属性强制要求且需动词短语描述功能；usemap与map name须逐字节匹配；coords不支持响应式，推荐svg替代。
area 标签不被屏幕阅读器朗读，基本就等于它不存在——不是“读得不好”，而是压根没被识别为可交互元素。
area 必须带 href 或 nohref 才能进屏幕阅读器的 DOM 树
只写 <area shape="rect" coords="0,0,100,100">，没 href 也没 nohref，NVDA、VoiceOver、JAWS 全部跳过。这不是兼容性问题，是规范强制要求：没有导航意图（href）或明确声明无交互（nohref），辅助技术直接忽略该节点。
- 有跳转目标的区域，必须写
href，哪怕临时用href="#"，后续再用 JS 绑定逻辑 - 纯装饰性热区（比如占位、视觉分隔），显式加
nohref（HTML5 已标记为 obsolete，但所有主流读屏器仍依赖它） - 仅靠
onclick驱动交互？不行。JS 事件不提供语义，必须补role="link"+tabindex="0"，否则键盘用户无法聚焦
alt 属性不是可选，而是强制校验项
area 的 alt 是 WCAG 2.1 A 级硬性要求，缺失或为空字符串 alt="" 会导致读屏器只报“链接”或静默跳过。它和 img 的 alt 完全不同：前者描述“点击后做什么”，后者描述“图上有什么”。
- 正确写法：
alt="查看上海分公司联系方式"（动词开头，10–15 字内） - 错误写法：
alt="上海"（静态描述）、alt="更多信息"（空泛）、alt=""（语义失效） - 服务端渲染或 JS 动态插入的
area最容易漏掉alt，它不报错也不警告，必须手动验证
usemap 和 map name 匹配失败 = 整个热区系统失效
<img usemap="#world-map"> 和 <map name="world-map"></map> 名称必须**完全一致**（大小写、符号、空格），且 <map></map> 必须在 DOM 中出现在 <img> 后方或同级。若用 JS 异步插入 <map></map>，而图片已渲染完成，部分读屏器会直接无视所有 area。
- 验证方式：Chrome DevTools 中检查
<img>的 computed 属性，确认usemap对应的map是否被正确引用 - 用键盘 Tab 测试：焦点能否落到任意一个
area上（出现 focus 样式） - 用 VoiceOver / NVDA 开启后，按 Ctrl+Alt+→ 逐个朗读热区，确认每个
alt都能被读出
coords 像素坐标在响应式下必然错位，别指望它自适应
area 的 coords 只接受像素值，不支持百分比或 rem。图像缩放后，热点区域会整体偏移——手机上点不中，键盘聚焦也对不准位置。这不是 bug，是规范限制。
- 小项目且图像尺寸固定：用 CSS
image-rendering: -webkit-optimize-contrast减少缩放失真，但不能解决坐标偏移 - 中大型项目：直接换 SVG 实现热点，
<path></path>+aria-label+focusable="true"更可控、可缩放、可动画 - 临时兼容方案：用 JS 监听
resize，按缩放比例重算coords并重写area的coords属性（注意防抖，避免高频重绘）
真正难的不是写对属性，而是每次改图、换图、加新热区时，都得重新校验 href、alt、usemap、coords 四者是否同时成立——漏掉任一环，对屏幕阅读器用户就是彻底不可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
