area标签的alt是强制可访问性属性，非提示文字；必须用动词短语明确描述点击功能与目标，如“跳转至产品页：无线耳机系列”，缺失将导致屏幕阅读器完全忽略热区。
area 标签的 alt 是强制可访问性属性，不是“提示文字”
alt 在 <area> 中和 <img> 一样，是 WCAG 强制要求的可访问性属性。它不负责悬停提示，只在图像映射（<map></map>）中某块区域无法被识别、渲染或被屏幕阅读器解析时，提供语义替代。比如热区链接失效、图片加载失败、用户关闭图片，甚至邮件客户端屏蔽远程图时，alt 就是唯一能传达“这块区域干什么用”的文本。
常见错误包括：
- 写成 alt="link" 或 alt="click here"——缺乏上下文，应写明功能与目标，如 alt="跳转至产品页：无线耳机系列"
- 装饰性热区（如空白分隔区）用了 alt=" "（含空格）——正确写法是 alt=""，否则会被读作“空白”
- 在 CMS 或邮件模板导出 HTML 时自动删掉 area 的 alt——导致整块热区对视障用户不可操作
title 在 <area> 上行为不可靠，且不提升无障碍能力
title 属性在 <area> 上和 <img> 类似：桌面浏览器可能显示 tooltip，但 Safari 常忽略、Firefox 截断超 60 字符、移动端基本无响应。更重要的是，主流屏幕阅读器（NVDA、VoiceOver、JAWS）默认不朗读 title，即使用户手动开启该选项，其优先级也远低于 alt。
你不能靠 title 补救缺失或简陋的 alt。
- title 不参与任何无障碍审计（axe、WAVE 等工具完全不检查它）
- 搜索引擎不索引 area 的 title，对 SEO 零贡献
- 旧版 IE（≤7）曾把 title 当 alt 渲染，这个 bug 已彻底消失，别再沿用
同时写 alt 和 title 时，必须语义分离，不能复制粘贴
当 <area> 同时带两个属性，重复内容会直接损害体验：
- 屏幕阅读器可能重复朗读两次，打断用户流
- Firefox tooltip 可能显示冗余信息（如 alt="联系我们" + title="联系我们"）
- HTML 字节数白增，无实际收益
正确做法：
- 先确保 alt 自身完整：描述热区功能+目标，如 alt="查看上海门店营业时间与地址"
- title 仅补充非必要但有时有用的信息，如 title="覆盖静安、徐汇、浦东三区，支持预约到店试戴"
- 如果 alt 已足够清晰（例如热区本身就是独立可理解的操作按钮），title 完全可以省略
<area> 的 alt 缺失会导致链接功能完全不可达
这是比 <img> 更严峻的问题：<area> 本身不渲染可见内容，它依附于 <img> 的 usemap。一旦 alt 缺失，屏幕阅读器既不知道这块区域存在，也不知道它指向哪、做什么。用户无法聚焦、无法触发、无法理解上下文。
尤其注意：
- <area> 没有默认 fallback，不像 <img> 至少还能看到占位框
- 浏览器不会报错，但 axe 工具会明确标出 “area missing alternative text” 错误
- 多数前端构建流程（如 html-validate）默认校验 area[alt] 是否存在，缺失即构建失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
