Best practice for tab order in mobile vs. desktop

356 views Asked by At

I'm currently developing a form that has two buttons at the bottom. One button for going back and another for sending the form. The problem i'm facing is when navigating with the tab key.

When tabbing on smaller screens the "Send request"-button is shown before the "Back"-button, thus I want that one to have focus first. When navigating on bigger, desktop screens the "Back"-button is shown before the "Send request"-button. In that case I want the "Back"-button to be focused on first.

Am I thinking correct for wanting to change the tab order depending on the screen-size? And does anyone knows the best way for doing it?

The code for the buttons looks like this:

<div class="d-flex flex-column justify-content-between flex-md-row-reverse">
    <button type="submit" class="mb-16 mb-md-0">Send request</button>
    <button>Back</button>
</div>
0

There are 0 answers