0

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?

BTSM
  • 1,585
  • 8
  • 12
  • 26
KA0-0NG
  • 23
  • 3
  • Is there a reason you are using push and pull (i.e. desktop version vs mobile version)? If so [this answer i gave](https://stackoverflow.com/a/64238701/2702894) has a method for having alternative layouts without having to resort to `tabindex` etc. If that isn't the case a bit more info on why you are doing this will help us give you a thorough solution as DOM order is key for accessibility. – GrahamTheDev Oct 10 '20 at 10:52
  • Sorry for the confusion, I tried to keep the code as short as possible to make things easier, but I probably stripped out too much. I added another row that doesn't contain the push/pull. Basically we just wanted the aesthetic of having alternating image/text and CTA on desktop but have them stack image first and text and CTA second on mobile. – KA0-0NG Oct 12 '20 at 14:46

1 Answers1

0

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>
Ezra Siton
  • 6,887
  • 2
  • 25
  • 37
  • 1
    Thank you for your suggestion and for clarifying some things about accessibility I was fuzzy on. I made a small tweak to your solution and it worked for my purpose. I removed the push/pull classes and set it up in the order it's supposed to be for desktop. Inside a media query I had: .flex-container { display: flex; flex-direction: column-reverse; } This way I didn't need to set up the flex-items. – KA0-0NG Oct 12 '20 at 16:54