area标签必须显式设置href或nohref，alt需为动词短语描述动作，usemap与map的name须逐字节一致，coords须基于原始尺寸并动态适配缩放。
area 标签没 href 或 nohref，屏幕阅读器直接跳过
很多开发者只写 <area shape="rect" coords="0,0,100,100">，既不加 href 也不加 nohref，结果屏幕阅读器压根不把它当可交互元素——用户无法用键盘聚焦，也不会被朗读。这不是“没声音”，是根本没识别到。
必须按用途二选一：
- 有跳转目标：显式写
href，哪怕只是href="#"（后续用 JS 绑定逻辑） - 纯装饰/占位：加
nohref属性（HTML5 已标记为废弃，但 NVDA、JAWS 等仍依赖它判断语义） - 绝对不要只靠
onclick驱动：JS 事件本身不提供语义，若必须用，得补role="link"和tabindex="0"
alt 属性不是可选，而是必需功能描述
area 的 alt 不是图片说明的复述，而是对“点击后发生什么”的动词短语。漏掉或写空，NVDA/JAWS 就只报“链接”，不讲去向；Chrome 控制台也会警告 areamissingalt。
正确写法要点：
- 以动作开头：如
alt="查看火星详情"，不是alt="火星" - 锚点跳转也要明确目标：
href="#section2"对应alt="跳转到产品参数" - 避免空泛文案：
alt="更多信息"或alt="点击查看"违反 WCAG 原则 - 长度控制在 10–15 字内，防止读屏截断
usemap 与 map name 不匹配，整个热区对辅助技术不可见
<img usemap="#world-map"> 和 <map name="world-map"></map> 必须逐字节一致：大小写、连字符、空格、符号全算。错一个字符，所有 area 都不会被屏幕阅读器扫描到。
常见失效场景：
-
usemap="world-map"（漏了#）→ 匹配失败 -
<map id="world-map"></map>（用了id而非name）→ 浏览器无视 -
<map name="World-Map"></map>（大小写不一致）→ macOS VoiceOver 可能静默跳过 -
<map></map>被 JS 动态插入，但晚于<img>渲染 → 部分读屏工具加载时找不到关联
coords 失准导致热区点不中，屏幕阅读器也跟着“迷路”
坐标永远基于原始图片尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 缩放后的显示尺寸。一张 1200×800 的图缩成 375px 宽，coords="0,0,100,100" 在屏幕上只剩约 31×21px —— 远低于触控最小推荐尺寸 44×44px，键盘焦点和读屏导航都会偏移。
这不是样式问题，是语义锚点漂移：
- 响应式页面里，纯 HTML/CSS 无法自动适配
coords - 必须用 JS 监听
resize和load，动态重算缩放比并更新每个area的coords - 更稳妥的替代方案是 SVG：天然支持响应式、语义完整、
<title></title>+<desc></desc>可直接替代alt作用
area 在视觉缩放、JS 动态插入、多端聚焦、读屏播报这四个维度上始终同步生效。稍有疏忽，失效就是静默的——没有报错，没有提示，只有用户卡在那儿。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
