Bootstrap 3 push/pull and accessibility

Question

I'm trying to make our webpages more accessible and am confused about the tab order for push/pull sections.

Here is an example:

<section class="section">
  <div class="container-fluid">
     <div class="row">
        <div class="col-md-6">
           <a href="#" aria-label="Lorem ipsum" target="_blank"><img src="https://via.placeholder.com/770x560" alt="Image" /></a>                    
        </div>
        <div class="col-md-6">
            <h3>Lorem ipsum</h3>
            <p>Sed ut perspiciatis unde omnis iste natus</p>
            <div class="btn">
               <a href="#" role="button" tabindex="0" target="_blank">Lorem ipsum</a>
            </div>
        </div>
     </div>
     <div class="row">
        <div class="col-md-6 col-md-push-6">
           <a href="#" aria-label="Lorem ipsum" target="_blank"><img src="https://via.placeholder.com/770x560" alt="Image" /></a>         
        </div>
        <div class="col-md-6 col-md-pull-6">
            <h3>Lorem ipsum</h3>
            <p>Sed ut perspiciatis unde omnis iste natus</p>
            <div class="btn">
               <a href="#" role="button" tabindex="0" target="_blank">Lorem ipsum</a>
            </div>
         </div>
    </div>
  </div>
</section> 

When I tab through the row with push/pull, the image is focused first, and the button focused second even though it's displayed on desktop as button first and image second. I understand why it does this, but is this best practice for accessibility? Seems like it'd be confusing for the user. And if this is not best practice, how would I reverse the tab order? Would I need to go through the entire webpage and set tabindex="0", "1", "2", etc. for every focusable element?

Answer 1

Your Q is a little general.

Accessibility concerns:

Avoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#Accessibility_concerns

Interactive_content (interactive focusable by keyboard)

Some HTML elements are focusable by default (buttons/links/Form inputs, and so on).

The tab order of this

 <a href="#" tabindex="0">First in tab order</a>
 <a href="#" tabindex="0">Second in tab order</a>

Is the same as this (Without tabindex="0"):

 <a href="#">First in tab order</a></div> | 
 <a href="#">Second in tab order</a></div>

"The answer to this Q:

"Would I need to go through the entire webpage and set tabindex="0", "1", "2""

NO.

If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source MDN.

document source = Change the order by CSS flexbox, grid, and so on will not affect the tab order. So assistive technology navigate throw your content in the correct order.

Flexbox order Example:

.flex-container {
  display: flex;
}

.flex-item:nth-of-type(1) { order: 3; }
.flex-item:nth-of-type(2) { order: 4; }
.flex-item:nth-of-type(3) { order: 1; }

<div class="flex-container">
  <div class="flex-item"><button>Tab order 1</button></div>
  <div class="flex-item"><button>Tab order 2</button></div>
  <div class="flex-item"><button>Tab order 3</button></div>
</div>

In the example below the div is Tabbable due to tabindex.

<label>First in tab order:<input type="text"></label>
<br>
<a href="#">Second in tab order</a> 
<div tabindex="0"><b>Tabbable</b> due to tabindex.</div>
<label>Third in tab order:<input type="text"></label>