Re: menu button example for the APG review

Here are my comments on the menu button example.
I suspect sending them to the whole list might not be the right thing
for such detailed comments, please correct me in future.
-----------------
https://rawgit.com/jongund/aria/master/practices/examples/menu-button/menu-button-1.html

Comments:
Coding comments (based on the source code visible on the page):
1. Missing matching ID attribute for the aria-labelledby on the menu role.
aria-labelledby="mb1"
Solution: Put id="mb1" on the button.

2. aria-controls points to a non-existent id (menu1).
Solution: Put id="menu1" on ul with role="menu".

3. Unable to make the menu work with keyboard only (IE and Firefox).
When I try space bar or enter with focus on any of the menu items,
nothing happens.

I notice the li items have onclick events but now onkeydown.
I can make the menu items work with onclick (using screen reader
onclick simulator).
Solution: Make sure onkeydown events are connected with all menuitems.

4. (minor):
This has nothing to do with the menu button functionality per se, but
there is no programatic indication which is the currently active font
size.
Fix: Use the title attribute of the triggering button to indicate the
currently active font size.

5. We should mark the text controlled by the font size menu button.

Fix: put role="region" and aria-label="example text" on div with
id=text-sample-1
Thought, should the aria-controls attribute on the button point to
this div rather than the menu? The menu button widget as a whole
controls the text size in this container.

Fixing typos and comments on text:
1. "•The aria-haspopup="true" attribute on the button element
identifies that activating the button will result in either a menu or
dialog box opening."
Comment: I thought aria-haspopup was reserved for menus only,not for dialogs.

2. "•The aria-controls attribute on the button element idenfities the
content (e.g. "font size" menu in this example) that will be opened
when the button"
Comment: Word needs to be "identifies".
I also wonder if that is helpful at all. The button as a whole
controls the size of the text, so maybe the id of the text is the
right target for aria-controls.
Users never see the menu values unless the menu is open, so what is
the information communicated by the aria-controls attribute on the
button element pointing to the menu container?

3. "•The role="menu" attribute on the ul element identifies the
element as a contatiner for a list of menu items."
Comment: Word needs to be "container".

4. "•The aria-labelledby attribute of the ul[role=menu] elements
defines an accessible name for the menu."
Comment: Should say something about the target of aria-labelledby
(i.e. the button).

5. "•The role="menuitem" on the li elements identifies the element as
a item in the menu ."
Comments: Change "a item" to "an item"

6. "•Each of the li[role=menuitem] elements has a keydown event to
handle navigation between menu items, closing the menu and activating
the function of the menu item (e.g. changing font size of the text
example)."
Comment:
a. Change the order, talk about activation of the menu items before
closing the menu.
b. I get confused by the wording "Activating the function of", just
say "activating the menuitem function".

7. the keyboard function table:
a. change the text "menu button" to "with focus on the menu button".
b. Remove the "s" in "moves", in items to and 3.
"open menu and moves..." becomes "open menu and move".

In general: Be consistent with move vs. moves, close vs. closes etc.
It is confusing when the s is applied inconsistently.

8. From roles table
"Identfies the content on the page (e.g. using IDREFs) that this menu
button controls"
comment: Change to "Identifies".


In the h2 heading, what is meant by:
"Menu Button Example: Menu Button is an button element"
Fix: In a paragraph under the heading put something like
"the menu button trigger is implemented using the button element".


On 2/1/16, Michiel Bijl <michiel@agosto.nl> wrote:
> Shouldn’t focus be returned to the button after a selection is made?
>
> —Michiel
>
>> On 29 Jan 2016, at 22:06, Gunderson, Jon R <jongund@illinois.edu> wrote:
>>
>> Matt and James,
>>
>> Here is a link to the updated proposed menu button example for the APG for
>> review on Monday’s call:
>> https://rawgit.com/jongund/aria/master/practices/examples/menu-button/menu-button-1.html
>> <https://rawgit.com/jongund/aria/master/practices/examples/menu-button/menu-button-1.html>
>>
>> Jon
>>
>>
>
>


-- 
Birkir R. Gunnarsson
Senior Accessibility Subject Matter Expert | Deque Systems
2121 Cooperative Way, Suite 210
Herndon, VA, 20171

Ph: (919) 607-27 53
Twitter: @birkir_gun

Received on Monday, 1 February 2016 17:53:09 UTC