Is there a way to make the tab order honour the visual order?
Let's say I have a web page which contains a list of links.
<ul class="links">
<li><a href="#">Alpha</a></li>
<li><a href="#">Bravo</a></li>
<li><a href="#">Charlie</a></li>
</ul>
For design reasons, I need to change the order of these links on larger screens so that "Alpha" is visually at the bottom of the list.
@media (min-width: 30em) {
.links {
display: flex;
flex-direction: column;
}
.links > li:first-child {
order: 1;
}
}
When tabbing through the various focusable elements on the page, the visual order of these links is not honoured, thus when tabbing through the list the focus order will be "Alpha" then "Bravo" then "Charlie".
If I set a positive tabindex on any of those links, they are moved to the end of the tab order (since all other focusable elements essentially have a tab index of 0).
My question is: is there a way to make the tab order honour the visual order?.
html css tab-ordering
asked Nov 21 '18 at 16:52
James LongJames Long
3,32511425
add a comment |
Let's say I have a web page which contains a list of links.
<ul class="links">
<li><a href="#">Alpha</a></li>
<li><a href="#">Bravo</a></li>
<li><a href="#">Charlie</a></li>
</ul>
For design reasons, I need to change the order of these links on larger screens so that "Alpha" is visually at the bottom of the list.
@media (min-width: 30em) {
.links {
display: flex;
flex-direction: column;
}
.links > li:first-child {
order: 1;
}
}
When tabbing through the various focusable elements on the page, the visual order of these links is not honoured, thus when tabbing through the list the focus order will be "Alpha" then "Bravo" then "Charlie".
If I set a positive tabindex on any of those links, they are moved to the end of the tab order (since all other focusable elements essentially have a tab index of 0).
My question is: is there a way to make the tab order honour the visual order?.
html css tab-ordering
asked Nov 21 '18 at 16:52
James LongJames Long
3,32511425
Probably not. Unless you specify a positive value fortabindexthe focus will follow the DOM and not really care about whatever CSS you apply to move things around. I'd create a separate element with the right order and hide it on desktop / mobile.
– I haz kode
Nov 21 '18 at 17:11
1
w3.org/TR/css-flexbox-1/#order-accessibility
– jeanpaulxiao
Nov 21 '18 at 17:13
1
@jeanpaulxiao nice find. If you provide an answer that basically says "according to the specs, no" and include that link, I'll accept it as the answer.
– James Long
Nov 21 '18 at 17:26
1
So what you need to do is move it using script... and if without script you can duplicate the item and toggle display values.
– René
Nov 21 '18 at 17:36
@René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
– James Long
Nov 21 '18 at 17:39
add a comment |
Let's say I have a web page which contains a list of links.
<ul class="links">
<li><a href="#">Alpha</a></li>
<li><a href="#">Bravo</a></li>
<li><a href="#">Charlie</a></li>
</ul>
For design reasons, I need to change the order of these links on larger screens so that "Alpha" is visually at the bottom of the list.
@media (min-width: 30em) {
.links {
display: flex;
flex-direction: column;
}
.links > li:first-child {
order: 1;
}
}
When tabbing through the various focusable elements on the page, the visual order of these links is not honoured, thus when tabbing through the list the focus order will be "Alpha" then "Bravo" then "Charlie".
If I set a positive tabindex on any of those links, they are moved to the end of the tab order (since all other focusable elements essentially have a tab index of 0).
My question is: is there a way to make the tab order honour the visual order?.
html css tab-ordering
asked Nov 21 '18 at 16:52
James LongJames Long
3,32511425
Let's say I have a web page which contains a list of links.
<ul class="links">
<li><a href="#">Alpha</a></li>
<li><a href="#">Bravo</a></li>
<li><a href="#">Charlie</a></li>
</ul>
For design reasons, I need to change the order of these links on larger screens so that "Alpha" is visually at the bottom of the list.
@media (min-width: 30em) {
.links {
display: flex;
flex-direction: column;
}
.links > li:first-child {
order: 1;
}
}
When tabbing through the various focusable elements on the page, the visual order of these links is not honoured, thus when tabbing through the list the focus order will be "Alpha" then "Bravo" then "Charlie".
If I set a positive tabindex on any of those links, they are moved to the end of the tab order (since all other focusable elements essentially have a tab index of 0).
My question is: is there a way to make the tab order honour the visual order?.
html css tab-ordering
html css tab-ordering
asked Nov 21 '18 at 16:52
James LongJames Long
3,32511425
asked Nov 21 '18 at 16:52
James LongJames Long
3,32511425
asked Nov 21 '18 at 16:52
James LongJames Long
3,32511425
asked Nov 21 '18 at 16:52
James LongJames Long
3,32511425
asked Nov 21 '18 at 16:52
James LongJames Long
3,32511425
3,32511425
Probably not. Unless you specify a positive value fortabindexthe focus will follow the DOM and not really care about whatever CSS you apply to move things around. I'd create a separate element with the right order and hide it on desktop / mobile.
– I haz kode
Nov 21 '18 at 17:11
1
w3.org/TR/css-flexbox-1/#order-accessibility
– jeanpaulxiao
Nov 21 '18 at 17:13
1
@jeanpaulxiao nice find. If you provide an answer that basically says "according to the specs, no" and include that link, I'll accept it as the answer.
– James Long
Nov 21 '18 at 17:26
1
So what you need to do is move it using script... and if without script you can duplicate the item and toggle display values.
– René
Nov 21 '18 at 17:36
@René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
– James Long
Nov 21 '18 at 17:39
add a comment |
Probably not. Unless you specify a positive value fortabindexthe focus will follow the DOM and not really care about whatever CSS you apply to move things around. I'd create a separate element with the right order and hide it on desktop / mobile.
– I haz kode
Nov 21 '18 at 17:11
1
w3.org/TR/css-flexbox-1/#order-accessibility
– jeanpaulxiao
Nov 21 '18 at 17:13
1
@jeanpaulxiao nice find. If you provide an answer that basically says "according to the specs, no" and include that link, I'll accept it as the answer.
– James Long
Nov 21 '18 at 17:26
1
So what you need to do is move it using script... and if without script you can duplicate the item and toggle display values.
– René
Nov 21 '18 at 17:36
@René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
– James Long
Nov 21 '18 at 17:39
Probably not. Unless you specify a positive value for
tabindex the focus will follow the DOM and not really care about whatever CSS you apply to move things around. I'd create a separate element with the right order and hide it on desktop / mobile.– I haz kode
Nov 21 '18 at 17:11
Probably not. Unless you specify a positive value for
tabindex the focus will follow the DOM and not really care about whatever CSS you apply to move things around. I'd create a separate element with the right order and hide it on desktop / mobile.– I haz kode
Nov 21 '18 at 17:11
1
1
w3.org/TR/css-flexbox-1/#order-accessibility
– jeanpaulxiao
Nov 21 '18 at 17:13
w3.org/TR/css-flexbox-1/#order-accessibility
– jeanpaulxiao
Nov 21 '18 at 17:13
1
1
@jeanpaulxiao nice find. If you provide an answer that basically says "according to the specs, no" and include that link, I'll accept it as the answer.
– James Long
Nov 21 '18 at 17:26
@jeanpaulxiao nice find. If you provide an answer that basically says "according to the specs, no" and include that link, I'll accept it as the answer.
– James Long
Nov 21 '18 at 17:26
1
1
So what you need to do is move it using script... and if without script you can duplicate the item and toggle display values.
– René
Nov 21 '18 at 17:36
So what you need to do is move it using script... and if without script you can duplicate the item and toggle display values.
– René
Nov 21 '18 at 17:36
@René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
– James Long
Nov 21 '18 at 17:39
@René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
– James Long
Nov 21 '18 at 17:39
add a comment |
1 Answer
1
active
oldest
votes
Currently there doesn't seem to be a way to united flex ordering and HTML ordering,
according to https://www.w3.org/TR/css-flexbox-1/#order-property and section 5.4.1. Reordering and Accessibility:
Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.
answered Nov 21 '18 at 17:30
jeanpaulxiaojeanpaulxiao
1635
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%2f53416967%2fis-there-a-way-to-make-the-tab-order-honour-the-visual-order%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
Currently there doesn't seem to be a way to united flex ordering and HTML ordering,
according to https://www.w3.org/TR/css-flexbox-1/#order-property and section 5.4.1. Reordering and Accessibility:
Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.
answered Nov 21 '18 at 17:30
jeanpaulxiaojeanpaulxiao
1635
add a comment |
Currently there doesn't seem to be a way to united flex ordering and HTML ordering,
according to https://www.w3.org/TR/css-flexbox-1/#order-property and section 5.4.1. Reordering and Accessibility:
Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.
answered Nov 21 '18 at 17:30
jeanpaulxiaojeanpaulxiao
1635
add a comment |
Currently there doesn't seem to be a way to united flex ordering and HTML ordering,
according to https://www.w3.org/TR/css-flexbox-1/#order-property and section 5.4.1. Reordering and Accessibility:
Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.
answered Nov 21 '18 at 17:30
jeanpaulxiaojeanpaulxiao
1635
Currently there doesn't seem to be a way to united flex ordering and HTML ordering,
according to https://www.w3.org/TR/css-flexbox-1/#order-property and section 5.4.1. Reordering and Accessibility:
Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.
answered Nov 21 '18 at 17:30
jeanpaulxiaojeanpaulxiao
1635
answered Nov 21 '18 at 17:30
jeanpaulxiaojeanpaulxiao
1635
answered Nov 21 '18 at 17:30
jeanpaulxiaojeanpaulxiao
1635
answered Nov 21 '18 at 17:30
jeanpaulxiaojeanpaulxiao
1635
1635
add a comment |
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%2f53416967%2fis-there-a-way-to-make-the-tab-order-honour-the-visual-order%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
Probably not. Unless you specify a positive value for
tabindexthe focus will follow the DOM and not really care about whatever CSS you apply to move things around. I'd create a separate element with the right order and hide it on desktop / mobile.– I haz kode
Nov 21 '18 at 17:11
1
w3.org/TR/css-flexbox-1/#order-accessibility
– jeanpaulxiao
Nov 21 '18 at 17:13
1
@jeanpaulxiao nice find. If you provide an answer that basically says "according to the specs, no" and include that link, I'll accept it as the answer.
– James Long
Nov 21 '18 at 17:26
1
So what you need to do is move it using script... and if without script you can duplicate the item and toggle display values.
– René
Nov 21 '18 at 17:36
@René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
– James Long
Nov 21 '18 at 17:39