area标签无视觉渲染能力，夜间模式高亮需用JS在图片上叠加主题化div层，监听prefers-color-scheme动态更新样式，并按naturalWidth/Height比例换算coords；alt文本须语义明确、简短无歧义，且与aria-label一致。
area 标签本身不支持夜间模式高亮
area 是纯语义化热区标签，没有视觉渲染能力——它不画边框、不填背景、不响应 :hover 或 :focus（除非配合 JS 手动模拟）。所谓“高亮”，实际是靠 CSS 作用于其父 map 关联的 img，或用 JS 动态插入覆盖层。夜间模式下直接改 body 或 html class，对 area 零影响。
用伪元素 + absolute 定位模拟可主题化的热区高亮
真正可行的夜间适配，是绕过 area 的视觉限制，用 JS 读取 coords 和 shape，在图片上方叠一层 div 并绑定主题色：
- 监听
window.matchMedia("(prefers-color-scheme: dark)")变化，动态更新高亮层的background和border-color -
coords值必须基于图片原始尺寸（img.naturalWidth/naturalHeight）做比例换算，否则缩放后偏移 - 不要用
outline或box-shadow模拟高亮——它们无法精确贴合poly多边形，且暗色模式下默认颜色常为浅灰，反而更难看清 - 示例关键逻辑：
const rect = img.getBoundingClientRect();<br>const scaleX = img.naturalWidth / rect.width;<br>const scaleY = img.naturalHeight / rect.height;<br>// coords="100,50,200,150" → 转为相对定位 left/top/width/height
alt 文本与屏幕阅读器在暗色模式下更关键
夜间模式常伴随低亮度、高对比度设置，用户更依赖语音辅助。而 area 的 alt 属性是唯一可被读屏软件解析的语义信息：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
alt不可为空，也不能写“点击此处”这种无意义描述；应明确用途，如alt="预约会议室A入口（无障碍通道）" - 如果高亮层用了
aria-label，必须和alt保持语义一致，避免读屏重复或冲突 - 暗色模式下部分读屏工具会降低音量或改变语速，所以
alt文本需简短、无歧义、不含颜色词（如“红色按钮”在单色屏上失效）
响应式图片 + area 的 coords 同步更新极易出错
这是最常被忽略的坑：CSS 缩放图片后，area 的 coords 仍是原始像素值，但浏览器不会自动换算——导致点击区域漂移，夜间模式下因对比度降低，问题更隐蔽。
立即学习“前端免费学习笔记（深入）”；
- 必须在
img.onload和window.resize时重新计算所有area坐标，并重绘高亮层 - 别信
usemap自动适配；也别试图用transform: scale()统一缩放area——它只缩放 DOM 元素，不改变坐标系 - 若图片用
srcset切换分辨率，需在load后立即读img.naturalWidth，而非依赖offsetWidth
