Google Maps应用应使用何种正确的ARIA角色？

首先，针对你的问题，正确的做法是为Google Maps的容器元素添加role="map"，也就是你提供的第一段代码的写法。下面给你拆解一下原因和细节：

• ARIA规范里的map角色是专门为地理地图类组件定义的，它会告诉屏幕阅读器等辅助技术：“这是一个交互式地图区域，需要特殊处理”。
• 虽然Google Maps嵌入组件本身内部已经做了不少可访问性优化，但给外层的地图容器加上role="map"能进一步明确组件的语义，让辅助技术用户快速识别这是一个地图，而不是普通的内容区块。

推荐的代码示例 #

<section id="map-container"> 
  <div id="map" role="map"></div> 
</section>

需要优化的写法（缺少语义标识） #

<main id="maincontent"> 
  <section id="map-container"> 
    <div id="map"></div>
  </section>
</main>

这段代码里的div#map没有语义化的ARIA角色，辅助技术可能会把它当成普通的容器元素，无法让用户快速感知到这是一个地图组件。

额外提个小建议：除了role="map"，你还可以搭配aria-label或aria-labelledby给地图添加描述性文本，比如：

<div id="map" role="map" aria-label="上海外滩区域导航地图"></div>

这样屏幕阅读器用户能更直观地知道这个地图的具体内容是什么。

内容的提问来源于stack exchange，提问作者user9403258