Using tabindex=“0” creates impact on other elements
I tried to add tabindex="0" to make unfocussed elements to focus. I added javascript code as well to fire Enter key on focus elements.I have two anchor link one with href value and another without href. I added tabindex="0" to non href anchor tag.
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a tabindex="0" onclick="ob_os(this)">Documents</a>
ob_os() is function that expand and collpase elemets.But after adding tabindex="0" to second link there is a impact on first link. When focus is there on first link and firing Enter key it is not expanding while second link is expanding.
function ob_os(e)
var os = e.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.firstChild.firstChild;
if (os != null)
if ((typeof os != "undefined") && (os.tagName == "IMG"))
var lensrc = (os.src.length - 8);
var s = os.src.substr(lensrc, 8);
if ((s == "inus.gif")
else
ob_os(e.parentNode);
javascript html accessibility
asked Nov 13 '18 at 7:01
DEO KUMAR DASDEO KUMAR DAS
436
add a comment |
I tried to add tabindex="0" to make unfocussed elements to focus. I added javascript code as well to fire Enter key on focus elements.I have two anchor link one with href value and another without href. I added tabindex="0" to non href anchor tag.
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a tabindex="0" onclick="ob_os(this)">Documents</a>
ob_os() is function that expand and collpase elemets.But after adding tabindex="0" to second link there is a impact on first link. When focus is there on first link and firing Enter key it is not expanding while second link is expanding.
function ob_os(e)
var os = e.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.firstChild.firstChild;
if (os != null)
if ((typeof os != "undefined") && (os.tagName == "IMG"))
var lensrc = (os.src.length - 8);
var s = os.src.substr(lensrc, 8);
if ((s == "inus.gif")
else
ob_os(e.parentNode);
javascript html accessibility
asked Nov 13 '18 at 7:01
DEO KUMAR DASDEO KUMAR DAS
436
add a comment |
I tried to add tabindex="0" to make unfocussed elements to focus. I added javascript code as well to fire Enter key on focus elements.I have two anchor link one with href value and another without href. I added tabindex="0" to non href anchor tag.
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a tabindex="0" onclick="ob_os(this)">Documents</a>
ob_os() is function that expand and collpase elemets.But after adding tabindex="0" to second link there is a impact on first link. When focus is there on first link and firing Enter key it is not expanding while second link is expanding.
function ob_os(e)
var os = e.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.firstChild.firstChild;
if (os != null)
if ((typeof os != "undefined") && (os.tagName == "IMG"))
var lensrc = (os.src.length - 8);
var s = os.src.substr(lensrc, 8);
if ((s == "inus.gif")
else
ob_os(e.parentNode);
javascript html accessibility
asked Nov 13 '18 at 7:01
DEO KUMAR DASDEO KUMAR DAS
436
I tried to add tabindex="0" to make unfocussed elements to focus. I added javascript code as well to fire Enter key on focus elements.I have two anchor link one with href value and another without href. I added tabindex="0" to non href anchor tag.
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a tabindex="0" onclick="ob_os(this)">Documents</a>
ob_os() is function that expand and collpase elemets.But after adding tabindex="0" to second link there is a impact on first link. When focus is there on first link and firing Enter key it is not expanding while second link is expanding.
function ob_os(e)
var os = e.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.firstChild.firstChild;
if (os != null)
if ((typeof os != "undefined") && (os.tagName == "IMG"))
var lensrc = (os.src.length - 8);
var s = os.src.substr(lensrc, 8);
if ((s == "inus.gif")
else
ob_os(e.parentNode);
javascript html accessibility
javascript html accessibility
asked Nov 13 '18 at 7:01
DEO KUMAR DASDEO KUMAR DAS
436
asked Nov 13 '18 at 7:01
DEO KUMAR DASDEO KUMAR DAS
436
asked Nov 13 '18 at 7:01
DEO KUMAR DASDEO KUMAR DAS
436
asked Nov 13 '18 at 7:01
DEO KUMAR DASDEO KUMAR DAS
436
asked Nov 13 '18 at 7:01
DEO KUMAR DASDEO KUMAR DAS
436
436
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
The second link is really a button and should be assigned a role as such. A link is for navigating to pages or views while a button is for interactive elements on the page. Using javascript:void(0); in the href will prevent the page from scrolling to the top while also being recognized correctly by screen readers.
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="button" href="javascript:void(0);" onclick="ob_os(this)">Documents</a>
answered Nov 14 '18 at 14:26
jwebbjwebb
627518
1
or make the second element a real button,<button onclick="ob_os(this)">Documents</button>
– slugolicious
Nov 15 '18 at 9:16
add a comment |
As an <a> without the href attribute is not perceived as a link by screen readers, Do the following:
- Remove your
tabindex, you won't need it. - Add the
linkARIA role to your anchor.
The result would look like this:
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="link" onclick="ob_os(this)">Documents</a>
answered Nov 13 '18 at 20:38
Andre PolykanineAndre Polykanine
2,3541122
1
And to get default cursor behavior include an emptyhrefattribute. Actually, that alone may resolve the issue.
– isherwood
Nov 13 '18 at 20:48
adding ARIA role to anchor tag not received as a link
– DEO KUMAR DAS
Nov 14 '18 at 10:35
therolewould make it a link but still not allow you to tab to it. you'd still needtabindex. and adding a role doesn't give the element any behavior of a link, that would have to be added too. you'd need keyboard handlers. a real link would fire the onclick when you click with the mouse or hit enter with the keyboard, but this isn't a real link so you'd need to trap the keyboard event.
– slugolicious
Nov 15 '18 at 9:15
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%2f53275492%2fusing-tabindex-0-creates-impact-on-other-elements%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The second link is really a button and should be assigned a role as such. A link is for navigating to pages or views while a button is for interactive elements on the page. Using javascript:void(0); in the href will prevent the page from scrolling to the top while also being recognized correctly by screen readers.
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="button" href="javascript:void(0);" onclick="ob_os(this)">Documents</a>
answered Nov 14 '18 at 14:26
jwebbjwebb
627518
1
or make the second element a real button,<button onclick="ob_os(this)">Documents</button>
– slugolicious
Nov 15 '18 at 9:16
add a comment |
The second link is really a button and should be assigned a role as such. A link is for navigating to pages or views while a button is for interactive elements on the page. Using javascript:void(0); in the href will prevent the page from scrolling to the top while also being recognized correctly by screen readers.
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="button" href="javascript:void(0);" onclick="ob_os(this)">Documents</a>
answered Nov 14 '18 at 14:26
jwebbjwebb
627518
1
or make the second element a real button,<button onclick="ob_os(this)">Documents</button>
– slugolicious
Nov 15 '18 at 9:16
add a comment |
The second link is really a button and should be assigned a role as such. A link is for navigating to pages or views while a button is for interactive elements on the page. Using javascript:void(0); in the href will prevent the page from scrolling to the top while also being recognized correctly by screen readers.
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="button" href="javascript:void(0);" onclick="ob_os(this)">Documents</a>
answered Nov 14 '18 at 14:26
jwebbjwebb
627518
The second link is really a button and should be assigned a role as such. A link is for navigating to pages or views while a button is for interactive elements on the page. Using javascript:void(0); in the href will prevent the page from scrolling to the top while also being recognized correctly by screen readers.
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="button" href="javascript:void(0);" onclick="ob_os(this)">Documents</a>
answered Nov 14 '18 at 14:26
jwebbjwebb
627518
answered Nov 14 '18 at 14:26
jwebbjwebb
627518
answered Nov 14 '18 at 14:26
jwebbjwebb
627518
answered Nov 14 '18 at 14:26
jwebbjwebb
627518
627518
1
or make the second element a real button,<button onclick="ob_os(this)">Documents</button>
– slugolicious
Nov 15 '18 at 9:16
add a comment |
1
or make the second element a real button,<button onclick="ob_os(this)">Documents</button>
– slugolicious
Nov 15 '18 at 9:16
1
1
or make the second element a real button,
<button onclick="ob_os(this)">Documents</button>– slugolicious
Nov 15 '18 at 9:16
or make the second element a real button,
<button onclick="ob_os(this)">Documents</button>– slugolicious
Nov 15 '18 at 9:16
add a comment |
As an <a> without the href attribute is not perceived as a link by screen readers, Do the following:
- Remove your
tabindex, you won't need it. - Add the
linkARIA role to your anchor.
The result would look like this:
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="link" onclick="ob_os(this)">Documents</a>
answered Nov 13 '18 at 20:38
Andre PolykanineAndre Polykanine
2,3541122
1
And to get default cursor behavior include an emptyhrefattribute. Actually, that alone may resolve the issue.
– isherwood
Nov 13 '18 at 20:48
adding ARIA role to anchor tag not received as a link
– DEO KUMAR DAS
Nov 14 '18 at 10:35
therolewould make it a link but still not allow you to tab to it. you'd still needtabindex. and adding a role doesn't give the element any behavior of a link, that would have to be added too. you'd need keyboard handlers. a real link would fire the onclick when you click with the mouse or hit enter with the keyboard, but this isn't a real link so you'd need to trap the keyboard event.
– slugolicious
Nov 15 '18 at 9:15
add a comment |
As an <a> without the href attribute is not perceived as a link by screen readers, Do the following:
- Remove your
tabindex, you won't need it. - Add the
linkARIA role to your anchor.
The result would look like this:
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="link" onclick="ob_os(this)">Documents</a>
answered Nov 13 '18 at 20:38
Andre PolykanineAndre Polykanine
2,3541122
1
And to get default cursor behavior include an emptyhrefattribute. Actually, that alone may resolve the issue.
– isherwood
Nov 13 '18 at 20:48
adding ARIA role to anchor tag not received as a link
– DEO KUMAR DAS
Nov 14 '18 at 10:35
therolewould make it a link but still not allow you to tab to it. you'd still needtabindex. and adding a role doesn't give the element any behavior of a link, that would have to be added too. you'd need keyboard handlers. a real link would fire the onclick when you click with the mouse or hit enter with the keyboard, but this isn't a real link so you'd need to trap the keyboard event.
– slugolicious
Nov 15 '18 at 9:15
add a comment |
As an <a> without the href attribute is not perceived as a link by screen readers, Do the following:
- Remove your
tabindex, you won't need it. - Add the
linkARIA role to your anchor.
The result would look like this:
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="link" onclick="ob_os(this)">Documents</a>
answered Nov 13 '18 at 20:38
Andre PolykanineAndre Polykanine
2,3541122
As an <a> without the href attribute is not perceived as a link by screen readers, Do the following:
- Remove your
tabindex, you won't need it. - Add the
linkARIA role to your anchor.
The result would look like this:
<a onclick="ob_os(this)" href="/ic/project/Headlines/headlines.asp" target="main">Home</a>
<a role="link" onclick="ob_os(this)">Documents</a>
answered Nov 13 '18 at 20:38
Andre PolykanineAndre Polykanine
2,3541122
answered Nov 13 '18 at 20:38
Andre PolykanineAndre Polykanine
2,3541122
answered Nov 13 '18 at 20:38
Andre PolykanineAndre Polykanine
2,3541122
answered Nov 13 '18 at 20:38
Andre PolykanineAndre Polykanine
2,3541122
2,3541122
1
And to get default cursor behavior include an emptyhrefattribute. Actually, that alone may resolve the issue.
– isherwood
Nov 13 '18 at 20:48
adding ARIA role to anchor tag not received as a link
– DEO KUMAR DAS
Nov 14 '18 at 10:35
therolewould make it a link but still not allow you to tab to it. you'd still needtabindex. and adding a role doesn't give the element any behavior of a link, that would have to be added too. you'd need keyboard handlers. a real link would fire the onclick when you click with the mouse or hit enter with the keyboard, but this isn't a real link so you'd need to trap the keyboard event.
– slugolicious
Nov 15 '18 at 9:15
add a comment |
1
And to get default cursor behavior include an emptyhrefattribute. Actually, that alone may resolve the issue.
– isherwood
Nov 13 '18 at 20:48
adding ARIA role to anchor tag not received as a link
– DEO KUMAR DAS
Nov 14 '18 at 10:35
therolewould make it a link but still not allow you to tab to it. you'd still needtabindex. and adding a role doesn't give the element any behavior of a link, that would have to be added too. you'd need keyboard handlers. a real link would fire the onclick when you click with the mouse or hit enter with the keyboard, but this isn't a real link so you'd need to trap the keyboard event.
– slugolicious
Nov 15 '18 at 9:15
1
1
And to get default cursor behavior include an empty
href attribute. Actually, that alone may resolve the issue.– isherwood
Nov 13 '18 at 20:48
And to get default cursor behavior include an empty
href attribute. Actually, that alone may resolve the issue.– isherwood
Nov 13 '18 at 20:48
adding ARIA role to anchor tag not received as a link
– DEO KUMAR DAS
Nov 14 '18 at 10:35
adding ARIA role to anchor tag not received as a link
– DEO KUMAR DAS
Nov 14 '18 at 10:35
the
role would make it a link but still not allow you to tab to it. you'd still need tabindex. and adding a role doesn't give the element any behavior of a link, that would have to be added too. you'd need keyboard handlers. a real link would fire the onclick when you click with the mouse or hit enter with the keyboard, but this isn't a real link so you'd need to trap the keyboard event.– slugolicious
Nov 15 '18 at 9:15
the
role would make it a link but still not allow you to tab to it. you'd still need tabindex. and adding a role doesn't give the element any behavior of a link, that would have to be added too. you'd need keyboard handlers. a real link would fire the onclick when you click with the mouse or hit enter with the keyboard, but this isn't a real link so you'd need to trap the keyboard event.– slugolicious
Nov 15 '18 at 9:15
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%2f53275492%2fusing-tabindex-0-creates-impact-on-other-elements%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
