在我的网页中，我有一半是使用谷歌地图的地图显示。我应该在显示地图的canvas 元素中添加什么aria-role？我查看了WAI-ARIA docs 以了解可能的角色定义，我发现最接近的是widget。
对于页面上的地图，什么是合适的aria-role？
【问题讨论】：
<canvas>，那么它已经具有适当的语义。当原生元素的语义不正确时（例如，当 <span> 实际上是一个按钮时）应该使用 role 属性。
标签： google-maps accessibility wai-aria
如果您使用的是谷歌地图，则应使用role="application"，因为可以使用屏幕阅读器与地图进行交互，并且根据 ARIA 规范站点，应用程序角色的用途是：
一种结构，包含一个或多个需要用户获得焦点的元素 输入，例如键盘或手势事件，不遵循 小部件角色支持的标准交互模式。
对于非盲人但视力低下且实际上可以从地图中受益的用户来说尤其如此。
【讨论】：
谷歌地图适合盲人使用吗？没有。
这个问题的答案会给你一些线索：给它presentation 角色和aria-hidden=true 属性。如果您的地图描述了行程，您应该正确替换缺失的信息，例如完整的文本行程。
例如：
<div role="presentation" aria-hidden="true">`<!-- my non accessible widget here -->`</div>
<div>Visit us at our store, Penny Lane, 22, Liverpool<br />
Liverpool City bus, Line 3</div>
注意：小部件是您不能赋予元素的抽象角色。
编辑：这将删除屏幕阅读器通过键盘和鼠标与画布交互的能力，这可能不适合使用屏幕阅读器的文盲 （当画布具有比 Google 地图更好的辅助功能）。如果您真的想访问可访问的画布，请不要更改本机语义，否则，在这种情况下，在跳转画布之前放置一个链接，指定它具有非常不直观的键盘支持并且可能无法与鼠标一起使用。
【讨论】：
role="presentation" 用于删除本机语义，问题所述的是画布，因此无需删除它。第四，将role="presentation" 放在非语义div 元素上是多余的，根本没有任何用处。
div 上放置角色时，此div 中的所有元素都将继承此角色，并且我假设 tuser 无法控制canvas 代码
role="presentation" 放在img 上，只是因为你给了它一个alt 属性。