Google sign in button and accessibility
2
Any ideas how to make the blue Google sign in button to be focused on the page with using Tab button only, to set focus on it? (tabindex = 0)
As example, on the page
https://developers.google.com/identity/sign-in/web/build-button
I'm unable to set a focus for this button with the Tab key.
Any suggestions how to implement it on my website so it may be clicked with the keyboard (Tab, Enter buttons only), but with no mouse?
Thank you.
html accessibility google-signin
asked Nov 19 at 11:31
Haradzieniec
3,9141985169
add a comment |
2
Any ideas how to make the blue Google sign in button to be focused on the page with using Tab button only, to set focus on it? (tabindex = 0)
As example, on the page
https://developers.google.com/identity/sign-in/web/build-button
I'm unable to set a focus for this button with the Tab key.
Any suggestions how to implement it on my website so it may be clicked with the keyboard (Tab, Enter buttons only), but with no mouse?
Thank you.
html accessibility google-signin
asked Nov 19 at 11:31
Haradzieniec
3,9141985169
Weird that isn't built-in, a simpletabindexinside the iframe would do the trick... Best method would probably just follow the guide on building a completely custom button.
– Sheng Slogar
Nov 19 at 14:44
1
While adding atabindexinside the iframe would allow the keyboard focus to move to the "sign in" button, it would not allow the button to be activated when pressing space or enter. The nested iframe is only listening for mouse click events and not keyboard events.
– slugolicious
Nov 19 at 15:41
Note that the iframe on that demo page is for demo purposes. When you add the signin button to your actual page, you don't get an iframe. It's just a nested<div>. After the signin button is added, you could hack around it by adding atabindexon the<div class="abcRioButton">and add an event handler for keyboard presses and force the click() handler to run when you see a space or enter key. However, your first step should be to send feedback to google to have them make the signin button accessible.
– slugolicious
Nov 19 at 15:51
@slugolicious Don't they allow putting abuttoninstead of adiv? And if no, wouldn't it be enough to add thebuttonrole andtabindex? I know it would be enough for a screen reader user, but don't know if that works without a screen reader and with no mouse.
– Andre Polykanine
Nov 19 at 22:26
1
@andre, I'm not sure how the google signin button actually works but it appears you give it a container that the google api fills with its signin stuff. Even if the container were a real<button>, it would not make the contents of the button a keyboard selectable thing because they only have a click event handler.
– slugolicious
Nov 20 at 2:16
add a comment |
2
2
2
1
Any ideas how to make the blue Google sign in button to be focused on the page with using Tab button only, to set focus on it? (tabindex = 0)
As example, on the page
https://developers.google.com/identity/sign-in/web/build-button
I'm unable to set a focus for this button with the Tab key.
Any suggestions how to implement it on my website so it may be clicked with the keyboard (Tab, Enter buttons only), but with no mouse?
Thank you.
html accessibility google-signin
asked Nov 19 at 11:31
Haradzieniec
3,9141985169
Any ideas how to make the blue Google sign in button to be focused on the page with using Tab button only, to set focus on it? (tabindex = 0)
As example, on the page
https://developers.google.com/identity/sign-in/web/build-button
I'm unable to set a focus for this button with the Tab key.
Any suggestions how to implement it on my website so it may be clicked with the keyboard (Tab, Enter buttons only), but with no mouse?
Thank you.
html accessibility google-signin
html accessibility google-signin
asked Nov 19 at 11:31
Haradzieniec
3,9141985169
asked Nov 19 at 11:31
Haradzieniec
3,9141985169
asked Nov 19 at 11:31
Haradzieniec
3,9141985169
asked Nov 19 at 11:31
Haradzieniec
3,9141985169
asked Nov 19 at 11:31
Haradzieniec
3,9141985169
3,9141985169
Weird that isn't built-in, a simpletabindexinside the iframe would do the trick... Best method would probably just follow the guide on building a completely custom button.
– Sheng Slogar
Nov 19 at 14:44
1
While adding atabindexinside the iframe would allow the keyboard focus to move to the "sign in" button, it would not allow the button to be activated when pressing space or enter. The nested iframe is only listening for mouse click events and not keyboard events.
– slugolicious
Nov 19 at 15:41
Note that the iframe on that demo page is for demo purposes. When you add the signin button to your actual page, you don't get an iframe. It's just a nested<div>. After the signin button is added, you could hack around it by adding atabindexon the<div class="abcRioButton">and add an event handler for keyboard presses and force the click() handler to run when you see a space or enter key. However, your first step should be to send feedback to google to have them make the signin button accessible.
– slugolicious
Nov 19 at 15:51
@slugolicious Don't they allow putting abuttoninstead of adiv? And if no, wouldn't it be enough to add thebuttonrole andtabindex? I know it would be enough for a screen reader user, but don't know if that works without a screen reader and with no mouse.
– Andre Polykanine
Nov 19 at 22:26
1
@andre, I'm not sure how the google signin button actually works but it appears you give it a container that the google api fills with its signin stuff. Even if the container were a real<button>, it would not make the contents of the button a keyboard selectable thing because they only have a click event handler.
– slugolicious
Nov 20 at 2:16
add a comment |
Weird that isn't built-in, a simpletabindexinside the iframe would do the trick... Best method would probably just follow the guide on building a completely custom button.
– Sheng Slogar
Nov 19 at 14:44
1
While adding atabindexinside the iframe would allow the keyboard focus to move to the "sign in" button, it would not allow the button to be activated when pressing space or enter. The nested iframe is only listening for mouse click events and not keyboard events.
– slugolicious
Nov 19 at 15:41
Note that the iframe on that demo page is for demo purposes. When you add the signin button to your actual page, you don't get an iframe. It's just a nested<div>. After the signin button is added, you could hack around it by adding atabindexon the<div class="abcRioButton">and add an event handler for keyboard presses and force the click() handler to run when you see a space or enter key. However, your first step should be to send feedback to google to have them make the signin button accessible.
– slugolicious
Nov 19 at 15:51
@slugolicious Don't they allow putting abuttoninstead of adiv? And if no, wouldn't it be enough to add thebuttonrole andtabindex? I know it would be enough for a screen reader user, but don't know if that works without a screen reader and with no mouse.
– Andre Polykanine
Nov 19 at 22:26
1
@andre, I'm not sure how the google signin button actually works but it appears you give it a container that the google api fills with its signin stuff. Even if the container were a real<button>, it would not make the contents of the button a keyboard selectable thing because they only have a click event handler.
– slugolicious
Nov 20 at 2:16
Weird that isn't built-in, a simple
tabindex inside the iframe would do the trick... Best method would probably just follow the guide on building a completely custom button.– Sheng Slogar
Nov 19 at 14:44
Weird that isn't built-in, a simple
tabindex inside the iframe would do the trick... Best method would probably just follow the guide on building a completely custom button.– Sheng Slogar
Nov 19 at 14:44
1
1
While adding a
tabindex inside the iframe would allow the keyboard focus to move to the "sign in" button, it would not allow the button to be activated when pressing space or enter. The nested iframe is only listening for mouse click events and not keyboard events.– slugolicious
Nov 19 at 15:41
While adding a
tabindex inside the iframe would allow the keyboard focus to move to the "sign in" button, it would not allow the button to be activated when pressing space or enter. The nested iframe is only listening for mouse click events and not keyboard events.– slugolicious
Nov 19 at 15:41
Note that the iframe on that demo page is for demo purposes. When you add the signin button to your actual page, you don't get an iframe. It's just a nested
<div>. After the signin button is added, you could hack around it by adding a tabindex on the <div class="abcRioButton"> and add an event handler for keyboard presses and force the click() handler to run when you see a space or enter key. However, your first step should be to send feedback to google to have them make the signin button accessible.– slugolicious
Nov 19 at 15:51
Note that the iframe on that demo page is for demo purposes. When you add the signin button to your actual page, you don't get an iframe. It's just a nested
<div>. After the signin button is added, you could hack around it by adding a tabindex on the <div class="abcRioButton"> and add an event handler for keyboard presses and force the click() handler to run when you see a space or enter key. However, your first step should be to send feedback to google to have them make the signin button accessible.– slugolicious
Nov 19 at 15:51
@slugolicious Don't they allow putting a
button instead of a div? And if no, wouldn't it be enough to add the button role and tabindex? I know it would be enough for a screen reader user, but don't know if that works without a screen reader and with no mouse.– Andre Polykanine
Nov 19 at 22:26
@slugolicious Don't they allow putting a
button instead of a div? And if no, wouldn't it be enough to add the button role and tabindex? I know it would be enough for a screen reader user, but don't know if that works without a screen reader and with no mouse.– Andre Polykanine
Nov 19 at 22:26
1
1
@andre, I'm not sure how the google signin button actually works but it appears you give it a container that the google api fills with its signin stuff. Even if the container were a real
<button>, it would not make the contents of the button a keyboard selectable thing because they only have a click event handler.– slugolicious
Nov 20 at 2:16
@andre, I'm not sure how the google signin button actually works but it appears you give it a container that the google api fills with its signin stuff. Even if the container were a real
<button>, it would not make the contents of the button a keyboard selectable thing because they only have a click event handler.– slugolicious
Nov 20 at 2:16
add a comment |
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
});
}
});
draft saved
draft discarded
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%2f53373730%2fgoogle-sign-in-button-and-accessibility%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53373730%2fgoogle-sign-in-button-and-accessibility%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
Weird that isn't built-in, a simple
tabindexinside the iframe would do the trick... Best method would probably just follow the guide on building a completely custom button.– Sheng Slogar
Nov 19 at 14:44
1
While adding a
tabindexinside the iframe would allow the keyboard focus to move to the "sign in" button, it would not allow the button to be activated when pressing space or enter. The nested iframe is only listening for mouse click events and not keyboard events.– slugolicious
Nov 19 at 15:41
Note that the iframe on that demo page is for demo purposes. When you add the signin button to your actual page, you don't get an iframe. It's just a nested
<div>. After the signin button is added, you could hack around it by adding atabindexon the<div class="abcRioButton">and add an event handler for keyboard presses and force the click() handler to run when you see a space or enter key. However, your first step should be to send feedback to google to have them make the signin button accessible.– slugolicious
Nov 19 at 15:51
@slugolicious Don't they allow putting a
buttoninstead of adiv? And if no, wouldn't it be enough to add thebuttonrole andtabindex? I know it would be enough for a screen reader user, but don't know if that works without a screen reader and with no mouse.– Andre Polykanine
Nov 19 at 22:26
1
@andre, I'm not sure how the google signin button actually works but it appears you give it a container that the google api fills with its signin stuff. Even if the container were a real
<button>, it would not make the contents of the button a keyboard selectable thing because they only have a click event handler.– slugolicious
Nov 20 at 2:16