area标签的提示文字必须用alt，title仅为补充；alt是强制属性，用于屏幕阅读器读取功能描述，缺失将导致热区失效；usemap关联错误或响应式缩放未重算coords均会使alt无法触发。
area 标签的提示文字该用 title 还是 alt？
必须用 alt，title 只是锦上添花，不是可访问性必需项。屏幕阅读器默认读 alt 值，而 title 在移动端常被忽略、在键盘焦点下也不稳定触发。
alt 是强制属性：没它，部分浏览器（如旧版 Safari）会直接跳过该 area，导致点击无效；W3C 和 WCAG 也明确定义它是图像映射区域的“替代文本”，描述功能而非外观。
实操建议：
-
alt要写具体动作，比如alt="点击查看法国分店地址"，而不是alt="法国" -
title可以补充视觉提示，例如title="（点击后在新窗口打开）"，但不能替代alt - 如果区域无跳转（仅作标注），
href省略，但alt仍需保留，且值不能为空（alt=""表示“此处无内容”，会跳过读取）
usemap 关联失效时，提示文字还显示吗？
不显示。alt 和 title 都绑定在 area 上，而 area 只有在被正确关联到 img 后才生效。如果 usemap 值写错（比如漏掉 #）、name 大小写不一致、或 map 不在同文档内，整个 area 集合就形同虚设——既不响应点击，也不会触发任何提示。
常见静默失效点：
-
#，应为usemap="#world" -
与usemap="#world"大小写不匹配 -
map放在或 iframe 里，浏览器不解析其内部area
响应式缩放后提示文字错位或消失？
提示文字本身不会错位，但热区失效了，用户点不到，自然看不到提示。根本原因是 coords 基于原始像素，缩放后坐标未重算，area 实际已脱离图片目标区域。
此时即使 alt 写得再准，也没机会被触发。不要试图靠 title “补救”——它依附于有效热区存在。
解决路径只有两条：
- 用 JS 动态重算：
img.naturalWidth/img.offsetWidth得到缩放比，再按shape类型分别缩放coords值（矩形 4 个、圆形 3 个、多边形成对处理） - 换 SVG：把图片转为 SVG，用
title元素，天然支持缩放，title也会随图形一起缩放和定位
为什么加了 alt 还被无障碍检测工具报错？
因为检测工具不仅查有没有 alt，还查它是否「有意义」。空值（alt=""）、纯标点（alt="•"）、或泛泛而谈（alt="链接"）都会被标记为「低质量替代文本」。
真正起作用的 alt 必须满足：用户不看图也能理解点击后发生什么。例如：
- ❌
alt="按钮" - ✅
alt="跳转至售后服务条款页" - ✅
alt="下载 iOS 版本安装包（124 MB）"
复杂多边形区域如果描述困难，宁可拆成多个 area，每个配独立 alt，也不要堆砌长句。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
