area 的 alt 属性是强制必需的，必须为动词短语（如“查看火星详情”），长度10–15字，且需确保 usemap 关联正确、area 嵌套在 map 内，三者缺一不可。
area 的 alt 属性是必需的，不是可选的
只要 area 带有 href 属性，alt 就是强制要求的——HTML5 规范明文规定，不是建议，更不是“锦上添花”。漏掉它，后果很实在：
- Chrome 控制台会报
Warning: The area element has no alt attribute - NVDA、JAWS 等读屏软件可能只朗读“链接”，不说明去向；用户无法判断点击后会发生什么
- 旧版 Safari 甚至会直接忽略该
area的链接行为，导致热区完全失效 -
alt=""同样不合规：语义上表示“无实质内容”，但带href的热区显然有导航意图
alt 值必须是动词短语，不是图片描述
area 的 alt 和 img 的 alt 完全不同类——前者描述“点击后做什么”，后者描述“图里有什么”。写错就等于废掉可访问性锚点：
- ✅ 正确：
alt="查看火星详情"、alt="跳转到产品参数"、alt="下载用户手册PDF" - ❌ 错误：
alt="火星"（只是名词，没动作）、alt="更多信息"（毫无指向性）、alt="世界地图中的美国区域"（复述图像，非交互结果） - 长度控制在 10–15 字内，过长会被读屏软件截断；避免标点、空格堆砌
动态生成的 area 很容易静默丢失 alt
服务端模板渲染或 JS 插入的 area 元素，常因拼接疏忽漏掉 alt。它不像 img 那样有视觉 fallback：失效时页面看起来完全正常，但读屏和部分浏览器已悄悄跳过该热区。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 检查 DOM 而非源码：Chrome 开发者工具中右键 → “检查”，定位到
area元素，确认alt是否真实存在于渲染后的节点中（某些框架会动态删掉） - 用 axe 插件扫描，搜索
areamissingalt—— 这是 WCAG 2.1 A 级强制项，工具不会放过 - 启用系统级读屏（如 macOS VoiceOver），聚焦到图像上，逐个听热区播报内容是否完整、准确
usemap 关联失败时 alt 也白写
area 的 alt 再规范也没用，如果 img 和 map 根本没连上——90% 的图像地图失效问题出在这里。
立即学习“前端免费学习笔记（深入）”；
-
usemap必须以#开头，且大小写、连字符、空格须与<map name="xxx">中的name逐字节一致：usemap="#product-section"对应<map name="product-section"> -
area必须直接嵌套在<map>内部，不能被<div>、注释、<script>包裹，也不能放在<head>里 - 验证方法：Chrome 中右键图片 → “检查”，看能否高亮对应
<map>；不能高亮，说明关联断裂，alt再对也无效
