地图网站应避免误用和，信息面板用包裹并设aria-labelledby；poi条目用；工具栏放；弹窗用并手动管理焦点与pointer-events；禁用热区；dom顺序须匹配视觉流。
地图网站里别乱用 <main></main> 和 <aside></aside>
地图网站的信息面板（比如右侧 POI 列表、搜索框、图层开关）不是语义上独立的“主要内容”或“附属内容”，硬套 <main></main> 或 <aside></aside> 会误导屏幕阅读器，也破坏 ARIA 隐式角色逻辑。真实场景中，地图容器本身（<div id="map">）通常才是 <code>main 的承载主体，而信息面板是它的交互延伸，应保持中性语义。
实操建议：
- 用
<section></section>包裹整个信息面板区域，加aria-labelledby指向其标题（如<h2 id="panel-title">地点列表</h2>） - 每个 POI 条目用
<article></article>，内部用<header></header>放名称和评分，<footer></footer>放操作按钮（如“导航”“收藏”） - 搜索框、图层控件等工具栏，统一放在
<nav aria-label="地图工具"></nav>内，避免误判为页面主导航
<dialog></dialog> 适合弹出详情页，但得手动控制 open 和焦点
点击标记点弹出的详情气泡（含图片、营业时间、电话），用 <dialog></dialog> 是语义最准确的选择——它自带模态行为、焦点捕获和 Esc 关闭支持。但浏览器原生 <dialog></dialog> 默认不自动聚焦，也不处理地图容器的 pointer-events 遮挡，容易出现“点开了看不见”或“键盘无法操作”问题。
关键处理点：
立即学习“前端免费学习笔记（深入）”；
- 必须用 JS 调用
dialog.showModal()，不能只靠open属性（部分浏览器不响应） - 打开后立即
dialog.querySelector('button, input').focus()，否则键盘用户卡在地图上 - 在
dialog打开时，给地图容器加pointer-events: none（CSS 控制），防止点击穿透 - 关闭时调用
dialog.close()并把焦点切回触发按钮，形成可访问闭环
用 <map></map> + <area> 做热区？别在 Web 地图里用
<map></map> 标签只适用于静态图像映射（<img usemap alt="HTML5结构标签在地图网站怎么用_信息面板布局方法【详解】" >），和 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="朝阳区商圈"> 包裹对应图层容器，并配合 <code>aria-live同步状态变化 - 若真有静态地图截图需标注，单独抽离为
<figure></figure>，再配<map></map>—— 但这是辅助图，不是主地图 - HTML 中，信息面板的
<section></section>必须紧跟地图容器之后，保证 DOM 顺序 = 视觉阅读顺序 = 键盘流 - 用 CSS Grid 或 Flex 实现布局，而非绝对定位脱离文档流；例如：
main { display: grid; grid-template-columns: 1fr 360px; gap: 16px; } - 对隐藏/展开面板，用
hidden属性或display: none，别用visibility: hidden或opacity: 0—— 后两者仍参与 Tab 流
信息面板的 DOM 顺序要和视觉流一致，尤其影响键盘导航
地图网站常把信息面板固定在右侧（position: sticky），但 HTML 结构若把它写在 最前面，键盘 Tab 顺序就会先遍历面板再跳到地图，违背用户预期（用户默认先操作地图，再看结果）。这会导致无障碍测试失败，也干扰快捷键设计（比如 Ctrl+0 重置地图，却被面板输入框劫持）。
正确做法：
<dialog></dialog> 的焦点管理细节和 DOM 顺序对键盘用户的实质性影响。视觉上看着没问题的布局，Tab 几下就可能卡死在空白处。
