地图网站应避免误用<main>和<aside>，信息面板用<section>包裹并设aria-labelledby；POI条目用<article>；工具栏放<nav>；弹窗用<dialog>并手动管理焦点与pointer-events；禁用<map>热区；DOM顺序须匹配视觉流。
地图网站里别乱用 <main> 和 <aside>
地图网站的信息面板（比如右侧 POI 列表、搜索框、图层开关）不是语义上独立的“主要内容”或“附属内容”，硬套 <main> 或 <aside> 会误导屏幕阅读器，也破坏 ARIA 隐式角色逻辑。真实场景中，地图容器本身（<div id="map">）通常才是 main 的承载主体，而信息面板是它的交互延伸，应保持中性语义。
实操建议：
- 用
<section>包裹整个信息面板区域，加aria-labelledby指向其标题（如<h2 id="panel-title">地点列表</h2>） - 每个 POI 条目用
<article>，内部用<header>放名称和评分，<footer>放操作按钮（如“导航”“收藏”） - 搜索框、图层控件等工具栏，统一放在
<nav aria-label="地图工具">内，避免误判为页面主导航
<dialog> 适合弹出详情页，但得手动控制 open 和焦点
点击标记点弹出的详情气泡（含图片、营业时间、电话），用 <dialog> 是语义最准确的选择——它自带模态行为、焦点捕获和 Esc 关闭支持。但浏览器原生 <dialog> 默认不自动聚焦，也不处理地图容器的 pointer-events 遮挡，容易出现“点开了看不见”或“键盘无法操作”问题。
关键处理点：
立即学习“前端免费学习笔记（深入）”；
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 必须用 JS 调用
dialog.showModal()，不能只靠open属性（部分浏览器不响应） - 打开后立即
dialog.querySelector('button, input').focus()，否则键盘用户卡在地图上 - 在
dialog打开时，给地图容器加pointer-events: none（CSS 控制），防止点击穿透 - 关闭时调用
dialog.close()并把焦点切回触发按钮，形成可访问闭环
用 <map> + <area> 做热区？别在 Web 地图里用
<map> 标签只适用于静态图像映射（<img usemap>），和 Leaflet / Mapbox / 百度地图等基于 Canvas 或 WebGL 渲染的动态地图完全不兼容。强行写 <map name="mymap"><area shape="poly" coords="..."></map> 不会产生任何热区效果，还会让 Lighthouse 报“无效 map 元素”警告。
替代方案更直接：
- 所有标记点、多边形、路径都通过地图 SDK 的 API 添加（如
map.addLayer(...)或new L.Marker(...).addTo(map)） - 需要语义化描述地理范围时，用
<div role="region" aria-label="朝阳区商圈">包裹对应图层容器，并配合aria-live同步状态变化 - 若真有静态地图截图需标注，单独抽离为
<figure>，再配<map>—— 但这是辅助图，不是主地图
信息面板的 DOM 顺序要和视觉流一致，尤其影响键盘导航
地图网站常把信息面板固定在右侧（position: sticky），但 HTML 结构若把它写在 <body> 最前面，键盘 Tab 顺序就会先遍历面板再跳到地图，违背用户预期（用户默认先操作地图，再看结果）。这会导致无障碍测试失败，也干扰快捷键设计（比如 Ctrl+0 重置地图，却被面板输入框劫持）。
正确做法：
- HTML 中，信息面板的
<section>必须紧跟地图容器之后，保证 DOM 顺序 = 视觉阅读顺序 = 键盘流 - 用 CSS Grid 或 Flex 实现布局，而非绝对定位脱离文档流；例如：
main { display: grid; grid-template-columns: 1fr 360px; gap: 16px; } - 对隐藏/展开面板，用
hidden属性或display: none，别用visibility: hidden或opacity: 0—— 后两者仍参与 Tab 流
<dialog> 的焦点管理细节和 DOM 顺序对键盘用户的实质性影响。视觉上看着没问题的布局，Tab 几下就可能卡死在空白处。 
