Enforcing entire website is clickable using Enter for accessibility (like NVDA/JAWS do)
The ensure all elements are clickable using the Enter key, I'm using the following method:
document.addEventListener('keydown', function(e){
if( e.keyCode === 13 ) {
e.target.click();
}
});
And for most clicks, it works really well. The problem is with elements that don't have a click event bound directly, but are clickable through bubbling up. For example:
jQuery(document).on('click', function(e){
jQuery(e.target).addClass('active');
});
Clickable elements that are bound this way, will not be triggered using the first example. I've found out that NVDA, somehow, literally makes all elements clickable using the keyboard, whatever the method used to bind them. If NVDA is turned on, elements that are bound just like in example number 2 will be triggered.
I'd like to understand how NVDA does this (or if you have another idea to approach this) so I can copy that behavior to my application, that is being used by people with motor impairments and have to use the keyboard solely, without screen readers.
The solution has to be pure JS or jQuery.
javascript jquery accessibility nvda web-accessibility
asked Nov 23 '18 at 21:27
user3586610user3586610
7918
add a comment |
The ensure all elements are clickable using the Enter key, I'm using the following method:
document.addEventListener('keydown', function(e){
if( e.keyCode === 13 ) {
e.target.click();
}
});
And for most clicks, it works really well. The problem is with elements that don't have a click event bound directly, but are clickable through bubbling up. For example:
jQuery(document).on('click', function(e){
jQuery(e.target).addClass('active');
});
Clickable elements that are bound this way, will not be triggered using the first example. I've found out that NVDA, somehow, literally makes all elements clickable using the keyboard, whatever the method used to bind them. If NVDA is turned on, elements that are bound just like in example number 2 will be triggered.
I'd like to understand how NVDA does this (or if you have another idea to approach this) so I can copy that behavior to my application, that is being used by people with motor impairments and have to use the keyboard solely, without screen readers.
The solution has to be pure JS or jQuery.
javascript jquery accessibility nvda web-accessibility
asked Nov 23 '18 at 21:27
user3586610user3586610
7918
Try using$(e.target).trigger('click'). Callingclick()on the raw Element, is not going to invoke jQuery event listeners.
– Taplar
Nov 23 '18 at 21:50
add a comment |
The ensure all elements are clickable using the Enter key, I'm using the following method:
document.addEventListener('keydown', function(e){
if( e.keyCode === 13 ) {
e.target.click();
}
});
And for most clicks, it works really well. The problem is with elements that don't have a click event bound directly, but are clickable through bubbling up. For example:
jQuery(document).on('click', function(e){
jQuery(e.target).addClass('active');
});
Clickable elements that are bound this way, will not be triggered using the first example. I've found out that NVDA, somehow, literally makes all elements clickable using the keyboard, whatever the method used to bind them. If NVDA is turned on, elements that are bound just like in example number 2 will be triggered.
I'd like to understand how NVDA does this (or if you have another idea to approach this) so I can copy that behavior to my application, that is being used by people with motor impairments and have to use the keyboard solely, without screen readers.
The solution has to be pure JS or jQuery.
javascript jquery accessibility nvda web-accessibility
asked Nov 23 '18 at 21:27
user3586610user3586610
7918
The ensure all elements are clickable using the Enter key, I'm using the following method:
document.addEventListener('keydown', function(e){
if( e.keyCode === 13 ) {
e.target.click();
}
});
And for most clicks, it works really well. The problem is with elements that don't have a click event bound directly, but are clickable through bubbling up. For example:
jQuery(document).on('click', function(e){
jQuery(e.target).addClass('active');
});
Clickable elements that are bound this way, will not be triggered using the first example. I've found out that NVDA, somehow, literally makes all elements clickable using the keyboard, whatever the method used to bind them. If NVDA is turned on, elements that are bound just like in example number 2 will be triggered.
I'd like to understand how NVDA does this (or if you have another idea to approach this) so I can copy that behavior to my application, that is being used by people with motor impairments and have to use the keyboard solely, without screen readers.
The solution has to be pure JS or jQuery.
javascript jquery accessibility nvda web-accessibility
javascript jquery accessibility nvda web-accessibility
asked Nov 23 '18 at 21:27
user3586610user3586610
7918
asked Nov 23 '18 at 21:27
user3586610user3586610
7918
asked Nov 23 '18 at 21:27
user3586610user3586610
7918
asked Nov 23 '18 at 21:27
user3586610user3586610
7918
asked Nov 23 '18 at 21:27
user3586610user3586610
7918
7918
Try using$(e.target).trigger('click'). Callingclick()on the raw Element, is not going to invoke jQuery event listeners.
– Taplar
Nov 23 '18 at 21:50
add a comment |
Try using$(e.target).trigger('click'). Callingclick()on the raw Element, is not going to invoke jQuery event listeners.
– Taplar
Nov 23 '18 at 21:50
Try using
$(e.target).trigger('click'). Calling click() on the raw Element, is not going to invoke jQuery event listeners.– Taplar
Nov 23 '18 at 21:50
Try using
$(e.target).trigger('click'). Calling click() on the raw Element, is not going to invoke jQuery event listeners.– Taplar
Nov 23 '18 at 21:50
add a comment |
1 Answer
1
active
oldest
votes
It is really great that you're interested in making your site accessible, it is very much appreciated.
But please, don't do such things, they yield unpredictable screen reader behavior and often upset the accessibility tree itself.
Rather than making all elements clickable, just think about what result you need to achieve. If you want your links and buttons to be usable with a screen reader, you have to do nothing, it's already implemented in HTML - boom, no Javascript, no jQuery, pure HTML.
If for some reason you want your divs act like buttons and spans act like links, just use ARIA roles:
<div id="myDiv" role="button">Click me!</div>
I'm a link to <span id="linkToGoogle" role="link">Google</span>, isn't that nice?
Again - boom, no Javascript, no jQuery, pure HTML.
However, if you can and where you can, just use semantical HTML elements, not ARIA roles: <button> for buttons, <a href...> for links and so on. I could elaborate more if I knew what specifically you want to make clickable.
answered Nov 23 '18 at 22:08
Andre PolykanineAndre Polykanine
2,4091122
That's a great advice for creating websites from scratch. When using templates, or handling websites that were built by amateurs, it's either JS or wipe everything out and start from scratch, which is non-realistic. Therefore, I'm looking for a solution that works despite using non-semantic HTML, and for people that aren't using screen reader (Motor impairments for example).
– user3586610
Nov 23 '18 at 22:18
OK then, for more understanding I'd like to ask you for a bit of code. No styles, no sensitive info, just something that is not clickable and you with it to be clickable. Everything just doesn't work, I told you why.
– Andre Polykanine
Nov 24 '18 at 22:45
1
This answer is incorrect about ARIA roles. Merely adding a link or button role to a span will NOT make it behave like a link or button. You will need to use a tabindex, keypress handiler, and click handler too. ARIA roles don't make an element behave differently, they only change the semantics which are reported to assistive technology.
– andrewmacpherson
Nov 26 '18 at 2:29
It seems, the OP has implemented onClick handlers, so the website lacks ARIA support. Anyway, it's too complicated to say anything for sure without any code.
– Andre Polykanine
Nov 27 '18 at 20:35
add a comment |
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%2f53453107%2fenforcing-entire-website-is-clickable-using-enter-for-accessibility-like-nvda-j%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It is really great that you're interested in making your site accessible, it is very much appreciated.
But please, don't do such things, they yield unpredictable screen reader behavior and often upset the accessibility tree itself.
Rather than making all elements clickable, just think about what result you need to achieve. If you want your links and buttons to be usable with a screen reader, you have to do nothing, it's already implemented in HTML - boom, no Javascript, no jQuery, pure HTML.
If for some reason you want your divs act like buttons and spans act like links, just use ARIA roles:
<div id="myDiv" role="button">Click me!</div>
I'm a link to <span id="linkToGoogle" role="link">Google</span>, isn't that nice?
Again - boom, no Javascript, no jQuery, pure HTML.
However, if you can and where you can, just use semantical HTML elements, not ARIA roles: <button> for buttons, <a href...> for links and so on. I could elaborate more if I knew what specifically you want to make clickable.
answered Nov 23 '18 at 22:08
Andre PolykanineAndre Polykanine
2,4091122
That's a great advice for creating websites from scratch. When using templates, or handling websites that were built by amateurs, it's either JS or wipe everything out and start from scratch, which is non-realistic. Therefore, I'm looking for a solution that works despite using non-semantic HTML, and for people that aren't using screen reader (Motor impairments for example).
– user3586610
Nov 23 '18 at 22:18
OK then, for more understanding I'd like to ask you for a bit of code. No styles, no sensitive info, just something that is not clickable and you with it to be clickable. Everything just doesn't work, I told you why.
– Andre Polykanine
Nov 24 '18 at 22:45
1
This answer is incorrect about ARIA roles. Merely adding a link or button role to a span will NOT make it behave like a link or button. You will need to use a tabindex, keypress handiler, and click handler too. ARIA roles don't make an element behave differently, they only change the semantics which are reported to assistive technology.
– andrewmacpherson
Nov 26 '18 at 2:29
It seems, the OP has implemented onClick handlers, so the website lacks ARIA support. Anyway, it's too complicated to say anything for sure without any code.
– Andre Polykanine
Nov 27 '18 at 20:35
add a comment |
It is really great that you're interested in making your site accessible, it is very much appreciated.
But please, don't do such things, they yield unpredictable screen reader behavior and often upset the accessibility tree itself.
Rather than making all elements clickable, just think about what result you need to achieve. If you want your links and buttons to be usable with a screen reader, you have to do nothing, it's already implemented in HTML - boom, no Javascript, no jQuery, pure HTML.
If for some reason you want your divs act like buttons and spans act like links, just use ARIA roles:
<div id="myDiv" role="button">Click me!</div>
I'm a link to <span id="linkToGoogle" role="link">Google</span>, isn't that nice?
Again - boom, no Javascript, no jQuery, pure HTML.
However, if you can and where you can, just use semantical HTML elements, not ARIA roles: <button> for buttons, <a href...> for links and so on. I could elaborate more if I knew what specifically you want to make clickable.
answered Nov 23 '18 at 22:08
Andre PolykanineAndre Polykanine
2,4091122
That's a great advice for creating websites from scratch. When using templates, or handling websites that were built by amateurs, it's either JS or wipe everything out and start from scratch, which is non-realistic. Therefore, I'm looking for a solution that works despite using non-semantic HTML, and for people that aren't using screen reader (Motor impairments for example).
– user3586610
Nov 23 '18 at 22:18
OK then, for more understanding I'd like to ask you for a bit of code. No styles, no sensitive info, just something that is not clickable and you with it to be clickable. Everything just doesn't work, I told you why.
– Andre Polykanine
Nov 24 '18 at 22:45
1
This answer is incorrect about ARIA roles. Merely adding a link or button role to a span will NOT make it behave like a link or button. You will need to use a tabindex, keypress handiler, and click handler too. ARIA roles don't make an element behave differently, they only change the semantics which are reported to assistive technology.
– andrewmacpherson
Nov 26 '18 at 2:29
It seems, the OP has implemented onClick handlers, so the website lacks ARIA support. Anyway, it's too complicated to say anything for sure without any code.
– Andre Polykanine
Nov 27 '18 at 20:35
add a comment |
It is really great that you're interested in making your site accessible, it is very much appreciated.
But please, don't do such things, they yield unpredictable screen reader behavior and often upset the accessibility tree itself.
Rather than making all elements clickable, just think about what result you need to achieve. If you want your links and buttons to be usable with a screen reader, you have to do nothing, it's already implemented in HTML - boom, no Javascript, no jQuery, pure HTML.
If for some reason you want your divs act like buttons and spans act like links, just use ARIA roles:
<div id="myDiv" role="button">Click me!</div>
I'm a link to <span id="linkToGoogle" role="link">Google</span>, isn't that nice?
Again - boom, no Javascript, no jQuery, pure HTML.
However, if you can and where you can, just use semantical HTML elements, not ARIA roles: <button> for buttons, <a href...> for links and so on. I could elaborate more if I knew what specifically you want to make clickable.
answered Nov 23 '18 at 22:08
Andre PolykanineAndre Polykanine
2,4091122
It is really great that you're interested in making your site accessible, it is very much appreciated.
But please, don't do such things, they yield unpredictable screen reader behavior and often upset the accessibility tree itself.
Rather than making all elements clickable, just think about what result you need to achieve. If you want your links and buttons to be usable with a screen reader, you have to do nothing, it's already implemented in HTML - boom, no Javascript, no jQuery, pure HTML.
If for some reason you want your divs act like buttons and spans act like links, just use ARIA roles:
<div id="myDiv" role="button">Click me!</div>
I'm a link to <span id="linkToGoogle" role="link">Google</span>, isn't that nice?
Again - boom, no Javascript, no jQuery, pure HTML.
However, if you can and where you can, just use semantical HTML elements, not ARIA roles: <button> for buttons, <a href...> for links and so on. I could elaborate more if I knew what specifically you want to make clickable.
answered Nov 23 '18 at 22:08
Andre PolykanineAndre Polykanine
2,4091122
answered Nov 23 '18 at 22:08
Andre PolykanineAndre Polykanine
2,4091122
answered Nov 23 '18 at 22:08
Andre PolykanineAndre Polykanine
2,4091122
answered Nov 23 '18 at 22:08
Andre PolykanineAndre Polykanine
2,4091122
2,4091122
That's a great advice for creating websites from scratch. When using templates, or handling websites that were built by amateurs, it's either JS or wipe everything out and start from scratch, which is non-realistic. Therefore, I'm looking for a solution that works despite using non-semantic HTML, and for people that aren't using screen reader (Motor impairments for example).
– user3586610
Nov 23 '18 at 22:18
OK then, for more understanding I'd like to ask you for a bit of code. No styles, no sensitive info, just something that is not clickable and you with it to be clickable. Everything just doesn't work, I told you why.
– Andre Polykanine
Nov 24 '18 at 22:45
1
This answer is incorrect about ARIA roles. Merely adding a link or button role to a span will NOT make it behave like a link or button. You will need to use a tabindex, keypress handiler, and click handler too. ARIA roles don't make an element behave differently, they only change the semantics which are reported to assistive technology.
– andrewmacpherson
Nov 26 '18 at 2:29
It seems, the OP has implemented onClick handlers, so the website lacks ARIA support. Anyway, it's too complicated to say anything for sure without any code.
– Andre Polykanine
Nov 27 '18 at 20:35
add a comment |
That's a great advice for creating websites from scratch. When using templates, or handling websites that were built by amateurs, it's either JS or wipe everything out and start from scratch, which is non-realistic. Therefore, I'm looking for a solution that works despite using non-semantic HTML, and for people that aren't using screen reader (Motor impairments for example).
– user3586610
Nov 23 '18 at 22:18
OK then, for more understanding I'd like to ask you for a bit of code. No styles, no sensitive info, just something that is not clickable and you with it to be clickable. Everything just doesn't work, I told you why.
– Andre Polykanine
Nov 24 '18 at 22:45
1
This answer is incorrect about ARIA roles. Merely adding a link or button role to a span will NOT make it behave like a link or button. You will need to use a tabindex, keypress handiler, and click handler too. ARIA roles don't make an element behave differently, they only change the semantics which are reported to assistive technology.
– andrewmacpherson
Nov 26 '18 at 2:29
It seems, the OP has implemented onClick handlers, so the website lacks ARIA support. Anyway, it's too complicated to say anything for sure without any code.
– Andre Polykanine
Nov 27 '18 at 20:35
That's a great advice for creating websites from scratch. When using templates, or handling websites that were built by amateurs, it's either JS or wipe everything out and start from scratch, which is non-realistic. Therefore, I'm looking for a solution that works despite using non-semantic HTML, and for people that aren't using screen reader (Motor impairments for example).
– user3586610
Nov 23 '18 at 22:18
That's a great advice for creating websites from scratch. When using templates, or handling websites that were built by amateurs, it's either JS or wipe everything out and start from scratch, which is non-realistic. Therefore, I'm looking for a solution that works despite using non-semantic HTML, and for people that aren't using screen reader (Motor impairments for example).
– user3586610
Nov 23 '18 at 22:18
OK then, for more understanding I'd like to ask you for a bit of code. No styles, no sensitive info, just something that is not clickable and you with it to be clickable. Everything just doesn't work, I told you why.
– Andre Polykanine
Nov 24 '18 at 22:45
OK then, for more understanding I'd like to ask you for a bit of code. No styles, no sensitive info, just something that is not clickable and you with it to be clickable. Everything just doesn't work, I told you why.
– Andre Polykanine
Nov 24 '18 at 22:45
1
1
This answer is incorrect about ARIA roles. Merely adding a link or button role to a span will NOT make it behave like a link or button. You will need to use a tabindex, keypress handiler, and click handler too. ARIA roles don't make an element behave differently, they only change the semantics which are reported to assistive technology.
– andrewmacpherson
Nov 26 '18 at 2:29
This answer is incorrect about ARIA roles. Merely adding a link or button role to a span will NOT make it behave like a link or button. You will need to use a tabindex, keypress handiler, and click handler too. ARIA roles don't make an element behave differently, they only change the semantics which are reported to assistive technology.
– andrewmacpherson
Nov 26 '18 at 2:29
It seems, the OP has implemented onClick handlers, so the website lacks ARIA support. Anyway, it's too complicated to say anything for sure without any code.
– Andre Polykanine
Nov 27 '18 at 20:35
It seems, the OP has implemented onClick handlers, so the website lacks ARIA support. Anyway, it's too complicated to say anything for sure without any code.
– Andre Polykanine
Nov 27 '18 at 20:35
add a comment |
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%2f53453107%2fenforcing-entire-website-is-clickable-using-enter-for-accessibility-like-nvda-j%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
Try using
$(e.target).trigger('click'). Callingclick()on the raw Element, is not going to invoke jQuery event listeners.– Taplar
Nov 23 '18 at 21:50