Is there a way to make the tab order honour the visual order?











up vote
0
down vote

favorite












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?.










share|improve this question






















  • 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
    yesterday








  • 1




    w3.org/TR/css-flexbox-1/#order-accessibility
    – jeanpaulxiao
    yesterday






  • 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
    yesterday






  • 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é
    yesterday










  • @René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
    – James Long
    yesterday















up vote
0
down vote

favorite












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?.










share|improve this question






















  • 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
    yesterday








  • 1




    w3.org/TR/css-flexbox-1/#order-accessibility
    – jeanpaulxiao
    yesterday






  • 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
    yesterday






  • 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é
    yesterday










  • @René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
    – James Long
    yesterday













up vote
0
down vote

favorite









up vote
0
down vote

favorite











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?.










share|improve this question













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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked yesterday









James Long

3,27211323




3,27211323












  • 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
    yesterday








  • 1




    w3.org/TR/css-flexbox-1/#order-accessibility
    – jeanpaulxiao
    yesterday






  • 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
    yesterday






  • 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é
    yesterday










  • @René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
    – James Long
    yesterday


















  • 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
    yesterday








  • 1




    w3.org/TR/css-flexbox-1/#order-accessibility
    – jeanpaulxiao
    yesterday






  • 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
    yesterday






  • 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é
    yesterday










  • @René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
    – James Long
    yesterday
















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
yesterday






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
yesterday






1




1




w3.org/TR/css-flexbox-1/#order-accessibility
– jeanpaulxiao
yesterday




w3.org/TR/css-flexbox-1/#order-accessibility
– jeanpaulxiao
yesterday




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
yesterday




@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
yesterday




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é
yesterday




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é
yesterday












@René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
– James Long
yesterday




@René I think you're right. The only solution seems to be to adjust the markup rather than simply the styles
– James Long
yesterday












1 Answer
1






active

oldest

votes

















up vote
0
down vote



accepted










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.







share|improve this answer








New contributor




jeanpaulxiao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.


















    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',
    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


















    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








    up vote
    0
    down vote



    accepted










    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.







    share|improve this answer








    New contributor




    jeanpaulxiao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.






















      up vote
      0
      down vote



      accepted










      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.







      share|improve this answer








      New contributor




      jeanpaulxiao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.




















        up vote
        0
        down vote



        accepted







        up vote
        0
        down vote



        accepted






        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.







        share|improve this answer








        New contributor




        jeanpaulxiao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.









        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.








        share|improve this answer








        New contributor




        jeanpaulxiao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.









        share|improve this answer



        share|improve this answer






        New contributor




        jeanpaulxiao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.









        answered yesterday









        jeanpaulxiao

        1635




        1635




        New contributor




        jeanpaulxiao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.





        New contributor





        jeanpaulxiao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.






        jeanpaulxiao is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.






























             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            What visual should I use to simply compare current year value vs last year in Power BI desktop

            How to ignore python UserWarning in pytest?

            Alexandru Averescu