在嵌入谷歌地图iframe时,我有点卡在使我的页面可访问方面。
添加role="application" aria-label="Location of the listing on a map" tabindex="0"
时,我收到与Google地图图像上缺少alt标签相关的错误。
添加aria-hidden="true"
波和斧工具抱怨 iframe 内的可交互元素。
哪个是最好的解决方案?
谷歌地图仍然是一个相当难以访问的产品。谷歌试图在可访问性方面取得一些进展,但总而言之,它仍然不是很好。
谷歌地图的iframe
将更加难以接近。您可以添加title
或aria-label
或aria-labelledby
属性,但这些内容只能描述框架的目的和意图。访客仍然很难与嵌入式地图进行交互。我不建议在 iframe 中添加任何 ARIA 角色。
通过超链接直接链接到谷歌地图页面提供了更好的体验(但仍然不是很好(。用户将能够比在iframe中更好地浏览地图和方向。与显示位置的地图相比,Google 地图上的逐向导航提供了更易于访问的体验。
如果您不想,则不必从页面中删除iframe
,因为它对视力正常的访问者仍然有价值。但是,您可能需要考虑:
- 添加链接以直接在 Google 地图网站上打开地图
- 提供指向来自每条主要高速公路的基于文本的方向的单独页面的链接(如果方向是地图的目标( - 您还可以使用隐藏文本,使视力正常的访问者看不到它
您还可以选择如何处理iframe
本身。您可以:
- 将
aria-hidden
添加到iframe
,从而将其从辅助技术用户的流程中删除,但对视力正常的用户可见,而是提供上面介绍的替代解决方案 - 将
iframe
保留在页面流中(即不对任何人隐藏( 在iframe
中添加一个可访问的名称(使用title
、aria-label
或aria-labelledby
(,以便使用辅助技术的访问者可以理解目的,但可能不会与之交互 - 完全删除
iframe
,并允许所有访问者使用谷歌地图网站上的链接
像AXE和WAVE这样的东西是一个很好的起点,但不要太担心从他们那里得到"满分"。目标是制作对真人尽可能有用的页面。