Adapt Learning Community: Navigation Button Order

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!

I think I figured it out using "tabindex"

Show parent | Reply

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

Show parent | Reply

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.

Show parent | Reply

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.

Show parent | Reply

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

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

Show parent | Reply

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.

Show parent | Reply