area标签必须嵌套在map内且带alt属性才能被屏幕阅读器识别；单独使用或缺失alt时，jaws、nvda等会静默跳过，即使添加href、tabindex或role也无法补救。
area标签必须配合
单独写<area>标签，不包裹在<map></map>里、也不带alt属性，屏幕阅读器会直接跳过——它既不是可聚焦元素，也没有语义锚点。很多开发者以为加了href或shape就够了，其实这些对读屏软件完全无效。
正确链路只有这一条：<img>通过usemap指向<map></map>，<map></map>内每个<area>都必须有alt（哪怕内容为空，也要写alt=""）。否则JAWS、NVDA、VoiceOver都会静默处理该区域。
-
alt文本需描述该热区的实际功能，不是“左上角按钮”这类位置描述，而是“跳转至产品介绍页” - 避免用
title替代alt：title只在悬停时触发，对键盘和读屏用户不可达 - 如果
<area>对应的是纯装饰性区域（比如背景图上的无交互色块），仍要写alt=""，而非省略
area的href和tabindex无法绕过alt缺失带来的可访问性失效
即使给<area>加了href、tabindex="0"甚至role="link"，只要没alt，绝大多数屏幕阅读器仍不会把它当作可操作项播报。这不是兼容性问题，而是规范强制要求：WAI-ARIA明确指出，<area>属于“隐式语义元素”，其可访问性完全依赖alt提供唯一有效名称。
-
tabindex="0"能让键盘聚焦，但焦点进入后读屏不会朗读任何说明，用户不知道这是什么 -
aria-label在<area>上基本无效：Chrome+NVDA、Safari+VoiceOver均忽略 - 想用ARIA补救？不行。ARIA不能覆盖
<area>原生语义缺失，必须先满足alt底线
响应式热区坐标变化时，area的coords必须同步更新
当图片随视口缩放、或使用object-fit等CSS拉伸时，<area>的coords值若仍是原始像素坐标，会导致点击区域偏移——这对视力障碍用户尤其危险：他们依赖读屏播报后精准聚焦，结果按回车却触发了错误链接。
- 不要硬编码
coords="10,20,100,80"，改用JavaScript动态计算（监听resize和load） - 优先考虑用CSS Grid/Flex替代图像映射：现代布局能实现相同视觉效果，且天然支持语义化和键盘导航
- 真要用
<area>？至少保证<img>设width/height固定尺寸，禁用max-width: 100%类弹性缩放
替代方案比area更可靠：用语义化HTML+CSS重写热区
几乎所有用<area>的场景，都可以用<div> + <code>position: absolute + role="link" + aria-label重构。虽然多几行代码，但可访问性、可维护性、响应式稳定性全部提升一个量级。
- 每个热区变成独立可聚焦元素，支持
:focus-visible样式、Enter/Space触发 - 无需维护坐标，CSS定位自动适配缩放、高DPI屏、字体放大等场景
- 可直接用
aria-describedby关联详细说明，比alt容量更大、结构更清晰
真正难的不是写<area>，是写完之后没人测试它在VoiceOver下是否朗读正确、焦点是否落在预期位置、缩放200%后是否还能点中——这些细节一旦漏掉，对视力障碍用户就是彻底的不可用。
