area标签的alt属性是无障碍访问的硬性前提，必须描述区域功能而非图像内容，如“法国，查看法国旅游信息”，空值、模糊值或用title替代均不符合WCAG 2.1要求。
area 标签的 alt 属性不是可选项，而是无障碍访问和功能可用性的硬性前提——没写或写得模糊，屏幕阅读器用户根本不知道这个区域能点什么。
为什么 alt 在 area 里比在 img 里更关键
因为 area 本身不渲染任何可见内容，它只靠坐标“附着”在图片上。用户看不到按钮、文字或图标，全靠 alt 告诉他们：“这是法国区域，点开看旅游指南”或“这里是登录按钮热区”。如果写成 alt="点击这里" 或留空，等于直接屏蔽了视障用户操作路径。
- WCAG 2.1 明确要求所有可交互图像映射区域必须提供有意义的
alt文本 - 浏览器不会报错，但 Chrome / Firefox 的无障碍检查工具（如 Lighthouse）会标为严重问题
- 搜索引擎无法理解区域意图，影响页面语义权重
alt 内容怎么写才合格
核心原则：描述「区域的功能」，而不是「图片里有什么」。比如世界地图上的法国区域，alt 不该是“法国轮廓”，而应是“法国，查看法国旅游信息”。
- 长度控制在 125 字符内，避免被截断（部分屏幕阅读器会自动省略超长文本）
- 包含动词 + 目标，例如：
alt="跳转至产品详情页"、alt="下载 macOS 版安装包" - 如果是纯装饰性区域（极少见），用
alt=""，但必须确保它确实不可交互、无导航意义 - 禁止堆砌关键词，例如
alt="法国 法国旅游 法国签证 法国酒店"—— 这会被视为作弊，且对用户毫无帮助
常见错误：coords 正确但 alt 导致区域“失效”
你可能遇到这种情况：热点能点、链接能跳，但 Lighthouse 报“area 缺少 alt”，或者语音导航时完全跳过该区域。这不是代码没生效，而是 alt 值不符合无障碍校验规则。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 写了
alt但值为空格或制表符（如alt=" "），等同于未提供 - 用了
title替代alt——title只是悬停提示，不参与无障碍树构建 - 多个
area共用同一段alt文本（如全写成alt="查看详情"），导致语音导航无法区分目标 - 在响应式页面中动态重算
coords时，忘了同步更新alt的上下文（例如缩放后区域实际变成“德国”，但alt还写着“法国”）
配合 href 和 shape 检查 alt 是否合理
alt 必须与 href 的目标和 shape 的语义一致。例如：
-
<area shape="rect" coords="10,20,100,80" href="#contact" alt="联系客服入口">✅ 动作+目标匹配 -
<area shape="circle" coords="200,150,30" href="/api/download" alt="圆形下载按钮">✅ 形状+动作明确 -
<area shape="poly" coords="..." href="javascript:void(0)" alt="点击播放视频">⚠️ 危险：href无实际跳转，alt却暗示有导航行为；应改用role="button"+aria-label，或补全真实交互逻辑
真正容易被忽略的是：当 area 用于非导航用途（比如触发 JS 行为），alt 就不能只写“点击这里”，而要说明后果——例如“展开产品参数列表”或“静音当前音频”。否则，用户点了却没反馈，就彻底失去控制感。
