keyboard accessible menus

[deborah]

Dreamwidth makes its dropdown menus accessible without a mouse by making the top-level items links to lists of the menu items on a new page. There's been a lot of work lately to make complex dropdowns accessible without page reloading. I'm curious what kinds of dropdown menus are accessible to you, our users, whether your disabilities are mobility, visual, cognitive, or something else.

This poll lists the current system as it stands, as well as links to 15 alternative, keyboard-accessible menus (all but the first two are non-real-world examples from Terrill Thompson's awesome resource). I would love if all y'all could test and see which options have reasonable usability for you, no matter what functionality you use to manipulate and view it.

And if you don't know if you should take this poll? If you think you have accessibility needs in any way, please do! I know it's time consuming but I'll love you forever.

Poll #13618 Accessible dropdowns

Open to: Registered Users, detailed results viewable to: All, participants: 6

View Respondents

Which menus are functional for you?

View Answers

The current system
4 (66.7%)

University if Washington
2 (33.3%)

Adobe (described here)
3 (50.0%)

Interesting Example 1
3 (50.0%)

XHTML Strict
4 (66.7%)

HTML5
4 (66.7%)

Suckerfish
3 (50.0%)

Son of Suckerfish
3 (50.0%)

Superfish
2 (33.3%)

Dropper Dropdown Menu
3 (50.0%)

UDM4
5 (83.3%)

Simply Accessible
4 (66.7%)

YUI
4 (66.7%)

Customized OAA Dropdown
4 (66.7%)

JQuery-ui Menubar Widget
3 (50.0%)

Canadian Government Web Accessibility Toolkit
0 (0.0%)

Comments

[lightgetsin]

To be clear, many of these function, but I don't like them. E.g. Superfish, Simply Accessible, anywhere else I have to click through to get suboptions. If I had to pick a favorite in terms of experience and concept, it would be Customized OAA -- I can quickly and immediately understand the organization without hitting down arrow through "list start" and "list end" a thousand times, I can read top level or menu items by choice. Nice.

I honestly can't tell how the Jquery bits are supposed to function. Tired brain is tired.

Also Adobe, ahahaha, you are hilarious and you make me headdesk. Also, your nifty website does not work.

[deborah]

I like the Customized OAA best as well! I wonder what others will say. And yeah, Adobe, the way they try and fail so hard almost makes me think like fandom should be shipping them with something, they are so earnest and terrible.

[jesse_the_k]

Haven't tried it yet, but I have no fucks left for the evangelists of PDF *hate hate hate*

[exor674]

In case you need a mostly-normal user perspective, not filling out the poll because "functional" is hard to define for this use case.

From a visual/mouse-user perspective, while trying to be slightly sloppy with the mouse. Except otherwise mentioned, most of the menus ( including Dreamwidth's ) are easy to "fall out of" if you are too "sloppy" with mouse movements.

Adobe seems to be one of the nicest with respect to "falling out" of the menu.

"Superfish" has a "long" delay makes me feel the menu is broken, "Dropper Dropdown Menu" seems to have ... idk what I was gonna say here but it was probably important heh.

"Ultimate Dropdown Menu" seems to be the hardest to fall out of (either menu to menu, or menu to outside) -- the delay is there but doesn't scream "broken" or annoying. "YUI Library MenuNavNode Plugin" is also hard to fall out of, but has a slight delay -- you can at least click to open the menu v.s. "Superfish".

"Canadian Government Web Accessibility Toolkit" 403's and I am not sure if that's where you meant to link.

[deborah]

Doh! I meant to kill that last link but now it's in a poll so it's stuck there.

Also, I am now going to think of you as "Mostly-Normal Dre." :D

Also, THANK YOU.

[jeshyr]

Just for reference testing these on large print with two separate cases:

1. Setting normal-size text, entering web page and waiting for menu to load, pressing command-+ to get largest size after menu has loaded, using menu.

2. Pressing command-+ to get largest size, going to page, using menu.

I thought it might make a difference because some JS stuff seems to set things on page load, but actually it made no difference to any that I can see.

The pure-CSS option Dropper Dropdown actually hid menu items at large magnification, but all the others dealt with it in a usable way. I excluded Superfish because it was so goddam unusably slow, but it was actually fine with the magnification.

YUI wrapped the menu so the top level menu had two lines on screen which I despise and which looks ugly as sin but it does actually work.

[deborah]

Awesome, thanks. I keep trying to test with large print and I suck at it.

[jesse_the_k]

I systematically tested with enlarged print. These results are summarized by poll answers. OAA didn't make it because of fixed-menu-width, which seems like it would be readily fixable from this side of the screen.

UW Washington
inconsistent between pages
can't figure out how to open out the menu for item comparison

Adobe
more consistent
if your menus are gonna be that huge, appreciate arrow-key navigation. bet it's confusing as hell with screen reader
when did illegible type become a design choice?
extra points for typeahead find

Interesting Example 1
When display switches from top to menu items, I have no idea which menu I'm looking at

raw, unstylized strict XHTML
"ugly"? strikes me as functional. for me w memory issues, I adore this menu. Given styling options, make it pretty for them as who care, and offer me the ugly version so I can use the site

same as XHTML as far as I can tell

Suckerfish is there to make Son of Suckerfish look good?
Another prob with S/S is anything in a closed box will fail at sufficiently large sizes.

Superfish
At least minimal function. Wish I could traverse menus with arrow keys as well as tab (using tab to go down makes sense to spreadsheet users and few others)

Dropper drop down
Drawbacks: no "at a glance" over view of what's on the menus (although creating one more higher level would fix that. aesthetically pleasing; unusual but that doesn't mean bad.

UDM
Semi-wonderful. Moving around w arrow keys is great, but some moves require tabs, not arrows. Enlarges nicely.

Featherstone option 6, YUI,

Highly wonderful, except for the low-contrast colors. I love being able to navigate it all with the arrow keys.

OAA
almost that wonderful, but menu width is fixed; enlarging the font pushes the last menu column off the page.

Accessible jQuery-ui Components
is a confusing page! But when I finally got the menubar, it works well. The "drop downs" actually drop UP, which is odd, but otherwise handles enlarging gracefully.

Happy to test things for you -- just PM me!

[ninetydegrees]

Not sure I should fill the poll : as someone with a higher minimum font size --so not using the zooming tool-- and a mouse user, the only menus I found usable (because I could see the text clearly and fully, understand quickly how they worked and easily select stuff) were strict XHTML, HTML5, Dropper Dropdown Menu, and Simply Accessible. Customized OAA Menubar and Suckerfish and Son of Suckerfish could have probably worked for me with some different styling.

[ex_rising236]

Most of these function okay for me, but the ones that I've clicked that actually work are ones where I can get the menu to drop down, and then accidentally mouse away or something, and not lose it. Otherwise, cognitively, dropdown menus are a lot of strain and I tend to go through and just navigate by going to the category pages like we have currently.

[erika]

What they said.