What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 134 Stack Exchange communities.

The original multicollider™ wouldn't even open with a keyboard, but the new one can be selected and opened with enter. However you can't actually select any of the options within it with the keyboard; it just opens and you can look at it.

The main problem here is that the link to the site Main / Meta is now in there and are no longer links in the header itself (the same with chat too, although that is present further down the page - but you'd never be able to get to it with keyboard-alone, unless you are a masochist and want to tab through everything down to the site footer).

This means people using MSO (And any other Stack Exchange site that this header will display on) with keyboard-only can't access the Main / Meta site without typing in the URL itself. This is a step backwards for these users.

share|improve this question
    
With Opera 12 you can access everything per spatial navigation. Newer version are based on Chrome, so they fail. :/ –  toscho Nov 15 '13 at 10:30
1  
thanks for reporting it, you can use this user script from @balpha in the meatime –  サモライ Nov 15 '13 at 12:23
    
Perhaps I'm misunderstanding the situation, but how did you access the main/meta link with the old top bar? Just tab through the elements on the page until it was selected? –  Stijn Nov 15 '13 at 12:59
1  
@Stijn yes exactly. The link to Meta/Main and Chat were part of the top bar navigation, so you could tab to them pretty quickly, easily and obviously. now they are none of those things. –  JonW Nov 15 '13 at 13:19
    
Isn't it faster to just type the address? All I need to do (and I do this many times a day while I a mouse) is this: F6 meta.stack Enter or F6 stack Enter –  Stijn Nov 15 '13 at 13:22
1  
@Stijn for some people it may be, for others perhaps not. Plus there is no longer an obvious link to Meta/Main in the header so that is a lack of discoverability. Basically, the redesign has made it harder for certain people to access areas of the site. I can access it fine, so can you, but not everyone uses the web in the same was as you or I. –  JonW Nov 15 '13 at 13:38

3 Answers 3

This isn't entirely correct, you can access it via keyboard, just that you have to use Shift-Tab since the elements are at the end of the page, HTML-wise.

However, it would be useful if the tabindexes of the menu were rearranged. Currently, Shift-Tabing takes you to the end of the multicollider instead of the beginning.

enter image description here

share|improve this answer
    
If you use firefox, you can use Ctrl+' to search for links. –  Johannes Kuhn Nov 15 '13 at 9:35
    
OK, so at least it's in the markup, but not entirely intuitive there. Plus starting from the bottom means a couple of dozen shift + tab just to get up to the top, which is quite a PITA. Perhaps move it around in the markup or possibly add some skiplinks in there, something like that. –  JonW Nov 15 '13 at 10:15
    
Actually, they're not at the end of the page; in fact, DOM-wise they're located just before the menu icons that open them. The effect is pretty much the same, though. –  Ilmari Karonen Jan 14 at 18:09

While we're waiting for the SE devs to come up with a proper fix, I managed to find a user script workaround.

Basically, the problem is that the "corral" <div> that the menus are loaded into is separate from and, in particular, located before the menu icons themselves in the DOM. That's why you have to use Shift+Tab to reach them — as far as the browser is concerned, they are logically above the menu icons in the tabbing order.

The fix is to relocate each menu <div> immediately after the icon that opens it, allowing you to tab into it as you'd expect, like this:

$('.js-site-switcher-button').after($('.siteSwitcher-dialog'));
$('.js-inbox-button').after($('.inbox-dialog'));
$('.js-achievements-button').after($('.achievements-dialog'));

Perhaps surprisingly, this doesn't break the UI in any way, since the menus are absolutely positioned, and thus outside the normal document flow.

One minor complication, for doing this in a user script, is that the inbox and achievement menus are dynamically loaded via AJAX, and so don't exist when the page is initially loaded. The solution I'm using is the hook into the jQuery AJAX loading system via $(document).ajaxSuccess and re-run the code above after each menu is loaded.

Another complication is that the relocation breaks an assumption in the click handler that's meant to close the menus whenever the user clicks anything outside the corral. I managed to solve that by adding my own click handler that stops any click events on the menus from propagating that far digging into jQuery's guts to rip out the SE click handler and replace it with my own, because jQuery doesn't bubble middle/right mouse button clicks properly. :-(

Anyway, I've included the fix described above in a collection of small user script fixes that I'm calling the Stack Overflow Unofficial Patch. Please feel welcome to give it a try!


Edit: Note that this is only a partial fix — it only fixes the left-hand menus (site switcher, inbox and announcements), but not the right-hand ones (help and moderator inbox). I may try to fix those later, but it's somewhat complicated by the fact that those menu icons are themselves inside an absolutely positioned element.

share|improve this answer

Thanks for reporting this. You're welcome to give more feedback here:

FYI

Report that again when the toolbar is 100% complete, and it's still not working. In the meantime you can use this user script

share|improve this answer
2  
top bar is 100% complete now, 8 weeks passed... still planned? :) –  Shadow Wizard Jan 7 at 22:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .