Picture of Rob Mausser
Navigation Button Order
by Rob Mausser - Thursday, 10 January 2019, 6:51 PM
 

I have a client thats super strict about accessibility. One of the most important things to them, is that the order of things must follow left to right while tabbing, in order, like one will read it. Basically the experience of a disabled person must match exactly as that of an abled person. 

 

A big issue, is that the extensions of buttons added in the navigation bar at the top, do not follow the correct order when tabbed.

They go all over the place.

The extensions I am using (and that show up as buttons left to right) are as follows:

1.Adapt-Intro

2.Adapt Language

3. Progress Level Menu

4.Resources section (Drawer)

5. Adapt Close

The order when tabbed goes as follows:

Close > Back button (far left) > Drawer > Page Level Progress > Language Picker > Intro.

This is obviously because this is the order they show up in the HTML layout.

 

Is there a way I can either force accessibility to tab in another order, OR how do I get it so that the extensions render in a different order in the navigation menu?

Thanks!

Picture of Rob Mausser
Re: Navigation Button Order
by Rob Mausser - Thursday, 10 January 2019, 8:02 PM
 

I think I figured it out using "tabindex" 

Picture of Erik Wotring
Re: Navigation Button Order
by Erik Wotring - Thursday, 10 January 2019, 10:13 PM
 

Hi Rob,

For some reason, I believe tabindex is not the preferred method. I solved this issue by changing the way the navigation bar is built. I think I changed the order of elements in the template and forced some element to wait for the others before being added to the DOM by the Javascript. I don't remember the details; I would have to look up the project to find them.

In any case, stay on the lookout for unintended consequences of altering the tabindex.

Note the warnings in MDN:

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

Here is a more detailed article, from several years ago, that discusses this issue:

http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html

Picture of Rob Mausser
Re: Navigation Button Order
by Rob Mausser - Friday, 11 January 2019, 9:55 PM
 

Could you please look up the project and let me know what scripting to use to delay or re-order the loading of elements in the navbar?

I too am having issues with Tabindex, its not a great solution. 

Picture of Matt Leathes
Re: Navigation Button Order
by Matt Leathes - Saturday, 12 January 2019, 2:01 PM
 

You can use JQuery to change the order of elements in the DOM (example) so the easiest route might be to write some code in your theme to re-order them.

This is a bit of a known issue with the navigation bar in adapt and we will address it soon. It's been on the back burner for a while because it's fairly easy to hack your way around (if using the framework) on a project-by-project yet solving it properly for all projects (and the authoring tool) is fairly complex.

Picture of Rob Mausser
Re: Navigation Button Order
by Rob Mausser - Monday, 18 March 2019, 10:40 PM
 

Is there a specific place I should be running this jQuery?

 

In navigationViews.js? Or in each one of the extensions?

Picture of Rob Mausser
Re: Navigation Button Order
by Rob Mausser - Monday, 18 March 2019, 10:58 PM
 

Ok so I got this to work, but it still isnt correct.

The client I am working with says that the focus order MUST, MUST in all instances follow the visual order.

Because these icons are positioned with float:right, they are backwards.

As in, in the code, when going down each button, the focus goes right to left.

According to the client this fails WCAG.