Google sign in button and accessibility
up vote
2
down vote
favorite
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,8841984168
add a comment |
up vote
2
down vote
favorite
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,8841984168
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
2 days ago
add a comment |
up vote
2
down vote
favorite
1
up vote
2
down vote
favorite
1
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,8841984168
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,8841984168
asked Nov 19 at 11:31
Haradzieniec
3,8841984168
asked Nov 19 at 11:31
Haradzieniec
3,8841984168
asked Nov 19 at 11:31
Haradzieniec
3,8841984168
asked Nov 19 at 11:31
Haradzieniec
3,8841984168
3,8841984168
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
2 days ago
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
2 days ago
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
2 days ago
@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
2 days ago
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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
2 days ago