area 标签默认不参与 tab 焦点流，即使设置 tabindex="0" 也无效；它仅定义图像热区坐标，无渲染、不可聚焦、无键盘激活行为，必须用可聚焦元素（如 button 或 a）叠加替代并配 aria-label 才能实现键盘可访问。
area 标签默认不参与 Tab 焦点流，加 tabindex="0" 也无效
<area> 是 <map></map> 内部的热区定义元素，本身没有渲染、不可见、无交互行为。浏览器明确将其排除在可聚焦元素列表之外——哪怕你显式写上 tabindex="0"，它也不会出现在 Tab 键导航路径中。
常见错误是试图用 <area tabindex="0"> 让图像地图支持键盘访问，结果按 Tab 完全跳过。这不是 bug，而是规范行为：<area> 不是用户直接操作的对象，它只是坐标映射规则。
真正需要键盘可访问的是触发它的载体，比如：
- 包裹
<img usemap>的<a></a>链接（该链接本身可聚焦） - 替代方案：用语义化按钮或链接模拟热区逻辑，并隐藏原图+
<map></map> - 若必须保留图像地图，应在同一位置叠加一个
<button></button>或<a></a>，设position: absolute覆盖热区区域，并配aria-label描述功能
想让图像热区可键盘操作？得用可聚焦容器替代 area
不能靠 <area> 自身获得焦点，但可以靠“语义等价容器”实现相同功能。例如：
<div role="application" aria-label="产品功能图">
@@##@@
<map name="features-map"><area shape="rect" coords="10,10,100,50" href="#"></map><!-- 替代热区：覆盖在相同坐标上的可聚焦按钮 --><button type="button" style="position: absolute; top: 10px; left: 10px; width: 90px; height: 40px; opacity: 0;" aria-label="点击了解核心功能" onclick="showFeature('core')">
</button>
</div>
关键点：
- 用
<button></button>或<a href></a>替代<area>，它们天然可聚焦、可键盘触发 - 视觉上用
opacity: 0或pointer-events: none避免遮挡原图，但保留焦点和屏幕阅读器可读性 - 必须提供
aria-label或aria-labelledby，否则辅助技术无法理解其作用 - 不要给
<area>加tabindex="-1"——它本就不能被.focus()调用，会静默失败
area 的 href 属性不等于可聚焦，也不触发键盘激活
<area href="page.html"> 看似像链接，但它不会响应 Enter/Space 键，也不能被 Tab 到。即使配合 onclick，也仅对鼠标有效；键盘用户按下 Enter 时，浏览器不会执行跳转。
这是因为 <area> 没有激活行为（activation behavior）的实现。W3C 明确指出：只有 <a href></a>、<button></button>、<input type="submit"> 等元素才具备内置的键盘激活能力。
所以：
- 别依赖
<area href>实现键盘导航目标 - 若需跳转，用真实
<a href></a>覆盖热区区域，并设display: block; position: absolute - 若需 JS 行为，用
<button></button>并监听keydown处理 Enter/Space - 所有替代元素都必须有
role+tabindex="0"（如非原生可聚焦）+ 键盘事件监听
移动端 Safari 对 area 的键盘支持几乎为零
iOS Safari 默认只将 Tab 键（或“下一个字段”按钮）聚焦到原生表单控件和 <a href></a>。即使你在桌面 Chrome 中用技巧绕过了限制，iOS 上 <area> 仍完全不可达——既不能 Tab 到，也无法通过 VoiceOver 手势选中。
这意味着：任何依赖 <area> 实现键盘可访问性的方案，在主流移动浏览器中都会失效。
更现实的做法是：
- 彻底放弃
<map></map>/<area>用于交互热区，改用 SVG 或 div 布局 + 语义化按钮 - 如果图像地图是设计必需，至少提供文字版功能导航作为降级（如底部“功能索引”链接列表）
- 测试时务必在真机 iOS Safari 上验证焦点路径，不能只信桌面模拟器
实际项目里最容易被忽略的一点：开发者常以为“写了 href 就等于可访问”，但 <area> 的 href 只在鼠标点击时生效，它不绑定键盘事件、不参与焦点管理、不被辅助技术暴露——它只是一个坐标+URL 的声明，不是 UI 控件。要让它“活”起来，必须用真实可聚焦元素去承载行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
