How to design an accessible google maps info window made with a custom overlay and thus manage focus...
I am currently trying to make a more accessible version of an info window by extending google map's overlay view class (by building on this example). In my web app, when the user clicks on a marker or on an item in a list of locations displayed in a sidebar, an info window will open up at the position of the corresponding marker and display supplementary information about the selected location, which may include a description, images, ratings, tips, etc. retrieved from another API. There will only ever be a maximum of one info window open at any given time.
What I'm confused about is which semantic element or role attribute or whatnot to use to describe the info window and thus how to manage focus accordingly? My current thoughts are:
- use the
role = 'dialog'
attribute and develop the info window as a non-modal type dialog so that external content outside the info window is still accessible. In this case, the marker and list items can have the attributearia-haspopup = 'dialog'
which would nicely alert of the opening of the info window. The problem with this approach is that it is disruptive by nature and it's not exactly critical information being displayed in the info window nor is it information in which the user needs to respond to it. - use an
<aside>
element since it contains information complementary to the marker or side bar list item clicked upon. The info window will have a title of the location clicked on, so the info window could be viewed as stand alone information. However, I can't use thearia-haspopup
attribute in this case. I suppose I could label the marker and list item buttons in such a way as to alert the user that an info window will open up as a result by usingaria-label
. - use
role = 'tooltip'
and describe the info window as a tooltip widget. But this implies that focus has to be trapped within the info window until it is closed. In google map's actual implementation of the info window, a user can interact with anything else on the page without focusing the info window to close and I don't think it makes sense to change that default behavior. There's also arguments about whether a tooltip can be triggered outside of a mouseover/hover event and I want the info window to appear on a click event or enter/space key events. - implement the info window as 'collapsible content' and the associated marker and list item buttons as 'disclosure' buttons. This way the user is alerted of extra content appearing in a non-disruptive manner and focus isn't trapped within the info window. Although the styling wouldn't follow the typical styling practices/DOM order of collapsible content since the info window's html wouldn't appear immediately after the html of the button that triggered the info window opening.
Which option(s) is appropriate, or is there a better approach that makes more sense?
Depending on which approach is chosen, should focus be trapped within the info window?
If the info window is closed and the focused wasn't trapped within the info window, where should focus go after closing it using a click event or keyboard shortcut:
- The button that opened the info window?
- The last focused element before closing the info window (provided the last focused element was outside the info window)? But what if the last focused element was an element within the info window?
- The
body
element ormap
element?
Also, should focus move immediately into the info window when it is opened or should it remain on the button that triggered it's opening?
javascript html5 google-maps-api-3 wai-aria web-accessibility
add a comment |
I am currently trying to make a more accessible version of an info window by extending google map's overlay view class (by building on this example). In my web app, when the user clicks on a marker or on an item in a list of locations displayed in a sidebar, an info window will open up at the position of the corresponding marker and display supplementary information about the selected location, which may include a description, images, ratings, tips, etc. retrieved from another API. There will only ever be a maximum of one info window open at any given time.
What I'm confused about is which semantic element or role attribute or whatnot to use to describe the info window and thus how to manage focus accordingly? My current thoughts are:
- use the
role = 'dialog'
attribute and develop the info window as a non-modal type dialog so that external content outside the info window is still accessible. In this case, the marker and list items can have the attributearia-haspopup = 'dialog'
which would nicely alert of the opening of the info window. The problem with this approach is that it is disruptive by nature and it's not exactly critical information being displayed in the info window nor is it information in which the user needs to respond to it. - use an
<aside>
element since it contains information complementary to the marker or side bar list item clicked upon. The info window will have a title of the location clicked on, so the info window could be viewed as stand alone information. However, I can't use thearia-haspopup
attribute in this case. I suppose I could label the marker and list item buttons in such a way as to alert the user that an info window will open up as a result by usingaria-label
. - use
role = 'tooltip'
and describe the info window as a tooltip widget. But this implies that focus has to be trapped within the info window until it is closed. In google map's actual implementation of the info window, a user can interact with anything else on the page without focusing the info window to close and I don't think it makes sense to change that default behavior. There's also arguments about whether a tooltip can be triggered outside of a mouseover/hover event and I want the info window to appear on a click event or enter/space key events. - implement the info window as 'collapsible content' and the associated marker and list item buttons as 'disclosure' buttons. This way the user is alerted of extra content appearing in a non-disruptive manner and focus isn't trapped within the info window. Although the styling wouldn't follow the typical styling practices/DOM order of collapsible content since the info window's html wouldn't appear immediately after the html of the button that triggered the info window opening.
Which option(s) is appropriate, or is there a better approach that makes more sense?
Depending on which approach is chosen, should focus be trapped within the info window?
If the info window is closed and the focused wasn't trapped within the info window, where should focus go after closing it using a click event or keyboard shortcut:
- The button that opened the info window?
- The last focused element before closing the info window (provided the last focused element was outside the info window)? But what if the last focused element was an element within the info window?
- The
body
element ormap
element?
Also, should focus move immediately into the info window when it is opened or should it remain on the button that triggered it's opening?
javascript html5 google-maps-api-3 wai-aria web-accessibility
add a comment |
I am currently trying to make a more accessible version of an info window by extending google map's overlay view class (by building on this example). In my web app, when the user clicks on a marker or on an item in a list of locations displayed in a sidebar, an info window will open up at the position of the corresponding marker and display supplementary information about the selected location, which may include a description, images, ratings, tips, etc. retrieved from another API. There will only ever be a maximum of one info window open at any given time.
What I'm confused about is which semantic element or role attribute or whatnot to use to describe the info window and thus how to manage focus accordingly? My current thoughts are:
- use the
role = 'dialog'
attribute and develop the info window as a non-modal type dialog so that external content outside the info window is still accessible. In this case, the marker and list items can have the attributearia-haspopup = 'dialog'
which would nicely alert of the opening of the info window. The problem with this approach is that it is disruptive by nature and it's not exactly critical information being displayed in the info window nor is it information in which the user needs to respond to it. - use an
<aside>
element since it contains information complementary to the marker or side bar list item clicked upon. The info window will have a title of the location clicked on, so the info window could be viewed as stand alone information. However, I can't use thearia-haspopup
attribute in this case. I suppose I could label the marker and list item buttons in such a way as to alert the user that an info window will open up as a result by usingaria-label
. - use
role = 'tooltip'
and describe the info window as a tooltip widget. But this implies that focus has to be trapped within the info window until it is closed. In google map's actual implementation of the info window, a user can interact with anything else on the page without focusing the info window to close and I don't think it makes sense to change that default behavior. There's also arguments about whether a tooltip can be triggered outside of a mouseover/hover event and I want the info window to appear on a click event or enter/space key events. - implement the info window as 'collapsible content' and the associated marker and list item buttons as 'disclosure' buttons. This way the user is alerted of extra content appearing in a non-disruptive manner and focus isn't trapped within the info window. Although the styling wouldn't follow the typical styling practices/DOM order of collapsible content since the info window's html wouldn't appear immediately after the html of the button that triggered the info window opening.
Which option(s) is appropriate, or is there a better approach that makes more sense?
Depending on which approach is chosen, should focus be trapped within the info window?
If the info window is closed and the focused wasn't trapped within the info window, where should focus go after closing it using a click event or keyboard shortcut:
- The button that opened the info window?
- The last focused element before closing the info window (provided the last focused element was outside the info window)? But what if the last focused element was an element within the info window?
- The
body
element ormap
element?
Also, should focus move immediately into the info window when it is opened or should it remain on the button that triggered it's opening?
javascript html5 google-maps-api-3 wai-aria web-accessibility
I am currently trying to make a more accessible version of an info window by extending google map's overlay view class (by building on this example). In my web app, when the user clicks on a marker or on an item in a list of locations displayed in a sidebar, an info window will open up at the position of the corresponding marker and display supplementary information about the selected location, which may include a description, images, ratings, tips, etc. retrieved from another API. There will only ever be a maximum of one info window open at any given time.
What I'm confused about is which semantic element or role attribute or whatnot to use to describe the info window and thus how to manage focus accordingly? My current thoughts are:
- use the
role = 'dialog'
attribute and develop the info window as a non-modal type dialog so that external content outside the info window is still accessible. In this case, the marker and list items can have the attributearia-haspopup = 'dialog'
which would nicely alert of the opening of the info window. The problem with this approach is that it is disruptive by nature and it's not exactly critical information being displayed in the info window nor is it information in which the user needs to respond to it. - use an
<aside>
element since it contains information complementary to the marker or side bar list item clicked upon. The info window will have a title of the location clicked on, so the info window could be viewed as stand alone information. However, I can't use thearia-haspopup
attribute in this case. I suppose I could label the marker and list item buttons in such a way as to alert the user that an info window will open up as a result by usingaria-label
. - use
role = 'tooltip'
and describe the info window as a tooltip widget. But this implies that focus has to be trapped within the info window until it is closed. In google map's actual implementation of the info window, a user can interact with anything else on the page without focusing the info window to close and I don't think it makes sense to change that default behavior. There's also arguments about whether a tooltip can be triggered outside of a mouseover/hover event and I want the info window to appear on a click event or enter/space key events. - implement the info window as 'collapsible content' and the associated marker and list item buttons as 'disclosure' buttons. This way the user is alerted of extra content appearing in a non-disruptive manner and focus isn't trapped within the info window. Although the styling wouldn't follow the typical styling practices/DOM order of collapsible content since the info window's html wouldn't appear immediately after the html of the button that triggered the info window opening.
Which option(s) is appropriate, or is there a better approach that makes more sense?
Depending on which approach is chosen, should focus be trapped within the info window?
If the info window is closed and the focused wasn't trapped within the info window, where should focus go after closing it using a click event or keyboard shortcut:
- The button that opened the info window?
- The last focused element before closing the info window (provided the last focused element was outside the info window)? But what if the last focused element was an element within the info window?
- The
body
element ormap
element?
Also, should focus move immediately into the info window when it is opened or should it remain on the button that triggered it's opening?
javascript html5 google-maps-api-3 wai-aria web-accessibility
javascript html5 google-maps-api-3 wai-aria web-accessibility
edited Nov 27 '18 at 11:53
user3051595
asked Nov 27 '18 at 9:00
user3051595user3051595
63
63
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53495961%2fhow-to-design-an-accessible-google-maps-info-window-made-with-a-custom-overlay-a%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53495961%2fhow-to-design-an-accessible-google-maps-info-window-made-with-a-custom-overlay-a%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown