What is a suitable WAI-ARIA role attribute for a m

Question

In my webpage, I have half of it being a map display using Google maps. What aria-role should I add to that canvas element which is displaying the map? I have looked at WAI-ARIA docs for possible role definitions and the closest I found is widget.

What would be a suitable aria-role for a map on the page?

Answer 1

If you are using google maps, you should use role="application" because it is possible to use a screen reader to interact with the map and according to the ARIA spec site the application role is for:

A structure containing one or more focusable elements requiring user input, such as keyboard or gesture events, that do not follow a standard interaction pattern supported by a widget role.

This is especially true for users who are not blind but have low vision and can actually benefit from the map.

https://www.w3.org/TR/wai-aria/#application

Answer 2

Is a Google Map something accessible for blind people? No.

The answer to that question give you some clue : give it the presentation role and aria-hidden=true attribute. You should give a correct replacement for the missing information like a full textual itinerary if your map describe an itinerary.

Eg:

<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>

Note: Widget is an abstract role you can't give to an element.

EDIT: This will remove the ability for a screenreader to interact with the canvas, both from keyboard and mouse, which may not be suitable for illiterate people using a screenreader for instance (when the canvas has better accessibility features than Google Maps'). If you really want to give access to an accessible canvas, do not change the native semantic, otherwise, in this case, place a link before to jump the canvas, specifying that it has very uninuitive keyboard support and may not work with the mouse.