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

[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!