地图网站应避免误用和，信息面板用包裹并设aria-labelledby；POI条目用；工具栏放；弹窗用并手动管理焦点与pointer-events；禁用热区；DOM顺序须匹配视觉流。
地图网站里别乱用
地图网站的信息面板（比如右侧 POI 列表、搜索框、图层开关）不是语义上独立的“主要内容”或“附属内容”，硬套 实操建议： 点击标记点弹出的详情气泡（含图片、营业时间、电话），用 关键处理点： 立即学习“前端免费学习笔记（深入）”； 替代方案更直接： 地图网站常把信息面板固定在右侧（ 正确做法： 或 会误导屏幕阅读器，也破坏 ARIA 隐式角色逻辑。真实场景中，地图容器本身（main 的承载主体，而信息面板是它的交互延伸，应保持中性语义。
包裹整个信息面板区域，加 aria-labelledby 指向其标题（如 地点列表
，内部用 放操作按钮（如“导航”“收藏”） 内，避免误判为页面主导航
适合弹出详情页，但得手动控制 open 和焦点 是语义最准确的选择——它自带模态行为、焦点捕获和 Esc 关闭支持。但浏览器原生 默认不自动聚焦，也不处理地图容器的 pointer-events 遮挡，容易出现“点开了看不见”或“键盘无法操作”问题。
dialog.showModal()，不能只靠 open 属性（部分浏览器不响应）dialog.querySelector('button, input').focus()，否则键盘用户卡在地图上dialog 打开时，给地图容器加 pointer-events: none（CSS 控制），防止点击穿透dialog.close() 并把焦点切回触发按钮，形成可访问闭环用
+ 做热区？别在 Web 地图里用 标签只适用于静态图像映射（ 不会产生任何热区效果，还会让 Lighthouse 报“无效 map 元素”警告。
map.addLayer(...) 或 new L.Marker(...).addTo(map)）aria-live 同步状态变化
—— 但这是辅助图，不是主地图信息面板的 DOM 顺序要和视觉流一致，尤其影响键盘导航
position: sticky），但 HTML 结构若把它写在 最前面，键盘 Tab 顺序就会先遍历面板再跳到地图，违背用户预期（用户默认先操作地图，再看结果）。这会导致无障碍测试失败，也干扰快捷键设计（比如 Ctrl+0 重置地图，却被面板输入框劫持）。
实际项目中最容易被忽略的，是 必须紧跟地图容器之后，保证 DOM 顺序 = 视觉阅读顺序 = 键盘流main { display: grid; grid-template-columns: 1fr 360px; gap: 16px; }hidden 属性或 display: none，别用 visibility: hidden 或 opacity: 0 —— 后两者仍参与 Tab 流 的焦点管理细节和 DOM 顺序对键盘用户的实质性影响。视觉上看着没问题的布局，Tab 几下就可能卡死在空白处。
