@esmi the tabindex attributes are still needed on the toolbar as the HTML for it is outputted at the bottom but it’s shown at the top of the screen. All other tabindex have been removed making “tabbing” flow much better.
Andrew Ozz, esmi, Bim Egan, and 1 other are discussing. Toggle Comments
The problem with tabindexes is that they remove choice. I appreciate that the markup is at odds with the visuals but those who can see & use a mouse still have a choice as to where to go next. Tabindex takes that choice away from the keyboard navigators.
What about using “jump-to” links instead? Preferably hidden offscreen at the top of the markup but revealed on active/focus? That would be way cooler and offers choice.
Sure, can do that. There is already a “Skip to content” link that moves the focus to the main content area on all admin pages, bypassing both the toolbar and the menu.
Thinking we can add a similar link that would focus the toolbar’s container. It will have to be part of the toolbar code so it’s outputted on the front-end too and will have to have tabindex set as it will be near the bottom of the HTML source, but there will be no need for other tabindex attributes in the toolbar.
I’ve been playing with the admin bar, I removed all tabindexes (including the one in the admin bar search) and inserted a link immediately after the #wpadminbar div that pointed to #wibble.This was the only link with a tab index (1 , in this case).
I then added the wibble id to the quicklinks div. The resulting markup allows keyboard navigators to either proceed to the admin bar (by pressing Enter or similar) or, by just moving on, go go straight to body of the page. That works really nicely and keeps the whole thing self-contained for use on the front or back end. Thoughts?
Yes, that’s exactly what I meant. Lets put that in.
With this we will have two skip links at the top of each screen in the admin: Skip to content and Skip to toolbar. Perhaps both links can have the same tabindex value, maybe 5 or 10, so that they are accessed first on the screens. All other tabindexes are/will be removed.
Added this in . The trac ticket is at: https://core.trac.wordpress.org/ticket/21471
As a screen reader user, I could almost cry with joy to see this fairly simple addition of a skip link made. 🙂
Cyndy, as a fellow screen reader user I was sad to think that you may not get what you hope for out of the proposed skip links. This is because the skip links themselves will need a tabindex value to move them to the top in tab order, because they are actually at the end of the page. Tabindex rarely works for screen reader users because the screen reader is working with a buffered copy of a page, not the page itself. So the skip links may not help you. Do you also use headings for navigation? Most screen reader users find these a lot more useful and reliable. Just press the letter “H” and see if your screen reader supports heading navigation.
If you re-read Ozz’s response, you’ll see that there will be a skip link at the top of the page in the Admin area that will allow people to jump straight to the Admin bar.
← There are several new accessibility tickets on trac…
Negative Tab Indexing →
Welcome to the official blog for the WordPress accessibility group - dedicated to improving accessibility in core WordPress and related projects.
Follow us on Twitter: @WPAccessibility
Our regular meetings are on Mondays at 18:00 UTC in the Slack #accessibility channel.
Trac ticket discussions are on Mondays at 17:00 UTC in the Slack #accessibility channel.
WordPress is using Slack to host meetings.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
Join 1,298 other subscribers