CODEWITHSUNDEEP
htmlwebfrontend
Josh Berry
Josh Berry

Reputation: 23

Web Accessibility - Tab Order?

I have been tasked with going through the a11y project checklist. (http://a11yproject.com/checklist.html) for those who aren't sure what that is.

I noticed that on our website, (www.adn.com) when you tab through the website, it goes through our entire left-rail menu, before making it to the article content.

Is there some way to manipulate the order in which our site is "Tabbed through" for keyboard only users?

New to the industry, currently am a Junior Dev. Apologies if this is a simple question.

Upvotes: 2

Views: 1558

Answers (2)

scottohara
scottohara

Reputation: 775

The problem you're having isn't a tabindex issue, as the tabindex is correct for the menu's position in the DOM. (also changing tabindexes to values beyond 0 or -1 can really screw up the expected tab order for an interface).

What is going on here is that the menu has been visually hidden, by positioning it off screen, but it has not been adequately hidden from keyboard users/screen readers.

You'll need to update the CSS of your menu, so that when it is positioned off screen, the id="slider-menu-nav-list" is set to display: none. Then when the menu button is activated, the #slider-menu-nav-list should be set to display: block;

Looking through the source code some more, you'll also have to change your Menu button into an actual <button> element, as it's currently keyboard inaccessible as a <div><span> combo, so there is currently no way for a keyboard users to actually open the menu. (not all keyboard users are blind, and it can be frustrating to not be able to see where your current keyboard focus is located).

Hope this helps!

Upvotes: 0

David Lee
David Lee

Reputation: 2100

what you are looking for is tabindex

w3schools example

<a href="https://www.w3schools.com/" tabindex="2">W3Schools</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

Reference: w3schools.com/tags/att_global_tabindex.asp

Upvotes: 2

Related Questions