Description Anton McConville 2013-01-09 08:39:16 EST

From Carolyn:

Just wondering if your new gear menu is accessible. <grin>

Can you tab to the gear button using the keyboard? If not, then please give it tabindex="0".
What key "drops down the menu"? (or do you prefer to think of it as "popping up the dialog"?)
Assuming you want to think of it as a menu button, here's the recommended keystrokes: http://www.w3.org/WAI/PF/aria-practices/#menubutton
(i.e. Enter, Space, and Down arrow all drop down the menu <grin>, and there's some other keyboard interaction to think about, too...).
(If you prefer to think of it as a dialog, then things change a bit... http://www.w3.org/WAI/PF/aria-practices/#dialog_modal)

Did you already give the gear some alt text (i.e. if it's an <img> or some other element that has the "alt" property) or an aria-label (if it's a <div> or whatever else)?
(i.e. maybe it can have aria-label="Editor Settings" or something like that).

Is the gear a <button> or is it a <div> or an <img> or something?
If it isn't already a <button> then it will need role="button".
And you might want role="menu" on the popup div or maybe even role="dialog", depending on how you want to present it.

The gear should have aria-haspopup="true", and the popup div probably needs an aria-hidden="true" that you switch to aria-hidden="false" when you make it visible (and back to "true" when it is hidden again).

This section in the ARIA Authoring Practices gives a nice step-by-step walkthrough of the kinds of things to think about... <g>
http://www.w3.org/WAI/PF/aria-practices/#accessiblewidget
(for example, the bit in point 8 that says if you are using css to show/hide the popup div, then "do this"... it may be useful to you)

Also, the gear menu needs another pass to make it reusable in other contexts.