图像映射（+）原生不可访问，因无焦点能力、无语义角色、alt不触发读屏；须同时加tabindex="0"、aria-label及Enter/Space事件监听，或改用绝对定位的语义化替代。
图像映射（<map></map> + <area>）本身不具备语义可访问性，不加处理时屏幕阅读器完全忽略所有热点区域，键盘用户也无法聚焦或操作——这不是“体验差”，而是“功能不可用”。
为什么原生 <area> 无法被读屏器识别
浏览器把 <area> 当作纯视觉坐标指令，不生成可访问性树节点。即使写了 alt，NVDA、VoiceOver 等主流读屏器仍会跳过，因为 WAI-ARIA 规范明确要求：可交互区域必须有焦点能力、角色声明和键盘响应逻辑。
-
<area>默认不可聚焦（无tabindex，不参与 Tab 流） - 没有隐式
role（不像<button></button>自带role="button"） -
alt属性仅在图像加载失败时作为 fallback 文本，不触发读屏播报
用 aria-label + tabindex + 键盘事件补全基础可访问性
不能改写 DOM 结构？那就给每个 <area> 打上“可访问补丁”，但必须三者齐备，缺一不可。
- 加
tabindex="0"：让该<area>进入键盘 Tab 流 - 加
aria-label（不是alt）：提供读屏器可读的唯一描述，例如aria-label="查看上海办公室位置" - 监听
Enter和Space：手动触发click事件，否则聚焦后按空格无反应 - 禁止只写
aria-labelledby：它依赖页面中已存在的可见文本，而地图热点通常无对应 visible label
示例修正写法：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
<img src="floor-plan.png" usemap="#office-map" alt="公司办公楼层平面图">
<map name="office-map">
<area shape="rect" coords="100,50,200,120"
tabindex="0"
aria-label="查看上海办公室位置"
onclick="showOffice('shanghai')"
onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); showOffice('shanghai'); }">
</map>
更推荐的方案：用语义化按钮替代 <area> 热点
真正健壮的无障碍方案，是放弃 <area>，改用绝对定位的 <button></button> 覆盖热点区域——它自带焦点、键盘行为、禁用状态和语义，无需任何 ARIA 补丁。
- 用
<div class="map-container"> 包裹图片，设为 <code>position: relative - 每个热点用
<button type="button" aria-label="..."></button>，设position: absolute并通过top/left对齐原坐标 - 保留
<img alt="HTML区域映射无障碍体验优化方法" >的alt描述整体用途，按钮的aria-label描述具体动作 - 响应式时同步更新按钮位置（用 JS 或 CSS
transform替代固定像素值） - 正确做法：用
hidden属性或display: none隐藏 DOM 节点，让其自然退出可访问性树 - 若需保留 DOM（如动画过渡），改用
inert属性（现代浏览器支持）或tabindex="-1"+ 移除aria-label - 缩放地图时，确保按钮位置重算后仍可聚焦，避免出现“能看见但 Tab 不到”的悬空焦点
这样既规避了 <area> 的语义缺陷，又让键盘/读屏/触摸/鼠标全部路径一致。
动态加载或缩放地图时，aria-hidden 绝对不能乱加
常见错误：为“隐藏非当前楼层”的热点加 aria-hidden="true"。这会导致整个区域对辅助技术彻底消失，且子元素无法覆盖——哪怕你给按钮加了 aria-hidden="false" 也无效。
最易被忽略的一点：图像映射的无障碍不是“加几个属性就完事”，而是从交互意图出发，重新思考这个区域是否真的需要坐标驱动——多数业务场景里，结构化按钮 + 语义化文案，比像素级 <area> 更可靠、更易维护、更少出错。
