area元素的alt属性必须显式声明且不可省略，每个area需单独设置描述功能动作的alt值，不能继承父img的alt，纯装饰区域也须写alt=""，长度建议不超过125字符。
area 元素的 alt 属性不是可选项，不写或写错会导致屏幕阅读器跳过整个图像映射区域、Lighthouse 报错 Image map area elements do not have [alt] attributes，且搜索引擎无法理解该热点的功能意图。
area 标签必须显式声明 alt，不能依赖父 img 的 alt
很多人误以为给 <img> 写了 alt，里面的 <area> 就自动继承——完全错误。浏览器和辅助技术只读取每个 <area> 自身的 alt 属性，父级 <img> 的 alt 对它毫无作用。
-
<img src="map.png" usemap="#regions" alt="中国行政区划图">—— 这个alt描述整张图，但对任何<area>都无效 - 每个
<area>必须单独写alt，例如：<area shape="poly" coords="..." href="/beijing" alt="进入北京市页面"> - 如果某区域纯装饰（比如一个无交互的阴影层），也必须写
alt=""，而不是删掉属性
alt 值要描述“点击后干什么”，不是“这块长得像什么”
图像映射本质是多个可点击热区组成的导航结构，alt 的职责和链接内 <img> 一致：告诉用户点这里会触发什么动作。写外观描述（如 alt="红色圆形"）等于没写。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 正确：
alt="查看上海分公司联系方式"、alt="跳转至产品A技术文档" - 错误：
alt="蓝色按钮形状"、alt="地图上的江苏轮廓"（用户不知道点了能干啥） - 若区域指向外部链接，建议包含目标域名提示，如
alt="访问官网 help.example.com"，避免用户误入陌生站点
动态生成 area 时，alt 容易被漏设或覆盖
用 JS 拼 HTML 字符串或 DOM 方法创建 <area> 时，alt 是最容易被遗忘的字段。Vue/React 中通过循环渲染 area 列表时，也常因 props 未透传而失效。
- JS 创建：
const area = document.createElement('area'); area.alt = '下载用户手册'; area.href = '/manual.pdf'; map.appendChild(area); - Vue 模板中：
<area v-for="r in regions" :key="r.id" :href="r.url" :alt="r.label">——r.label必须在数据中真实存在且非空 - 常见陷阱：把
alt错写在<map></map>标签上（<map alt="xxx"></map>），浏览器完全忽略；或写成title（仅悬停提示，无障碍无效）
area 的 alt 长度与兼容性限制
WCAG 推荐 alt 控制在 125 字符内，因为多数屏幕阅读器会在该长度后截断。虽然浏览器支持最长 1024 字符，但超长文本反而降低可理解性；同时注意 IE 和旧版 JAWS 对含 Unicode 或标点的 alt 解析不稳定。
- 优先用动宾结构：
alt="播放第3章视频"比alt="这是课程视频的第三章节，点击开始播放"更可靠 - 避免堆砌关键词：
alt="上海 北京 广州 办公室 联系方式"不如alt="查询全国办公室联系方式" - 不要嵌入 HTML 标签或换行符，
<br>或\n在alt中会被当作普通字符读出，造成干扰
真正难的不是写 alt，而是为每个 <area> 准确判断它的功能边界——同一张图里，相邻两个热区可能分别对应“查看详情”和“立即购买”，语义差一点，视障用户的操作成本就翻倍。别靠猜，去问实际用键盘+读屏测试的人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
