Re: Universal Menus and a research script

Bryan,

Thanks for your efforts. I find menus somewhat problematic in that some
folks want to put a link + menu on the main menu bar or use css with
multi-level menus. I never found a practical solution for either situation.
In CSS 4 focus-within should help menus that depend on the bubbling
behavior of hover work for focus and James Craig has been nice enough to
put a bug in web-kit to get it done. But I haven't seen additional traction
on getting focus-within implemented. Yours is the first multilevel menu
that behaves well.

I looked at
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Vertical%20%28Internal%20Content%29/demo.htm
. Overall I liked the menu as it provides a reliable way to provide the
menu functionality for keyboard users (sighted and blind). I do have a few
picky issues. I found the way to close the menu using the keyboard is using
the tab key, which took me back to the button opening the menu. I found
this non-intuitive. I would have expected the left arrow to close the menu.
The button opening the menu does not have an menu indicator; the sub menus
have little arrows to show that they can open I would add an indicator on
the button.  I would also switch from using a long skinny arrow to using
the unicode black down pointing arrow (' \25BC' or ▼ or ▼  )
as it is widely used.

Finally, I would suggest you WordPress code or plug in for the menu.
WordPress allows developers to programmatically create menus, but they are
silent for blind users and when generating multi-level menus don't generate
submenus that a sighted keyboard user can use. WordPress is widely used and
some users won't fix their menus even if given the HTML, css and JavaScript
to do so. But if you give them an accessible version you may see lots of
non-commercial sites become more PwD friendly.


                                                              
                                                              
                    Regards,                     Fred         
                                                              
                   Fred Esch                                  
       Accessibility, Watson Innovations                      
    AARB Complex Visualization Working Group                  
                     Chair                                    
            W3C SVG A11y Task Force                           
                IBM Watson Group                              
                                                              
                                                              






From:	Bryan Garaventa <bryan.garaventa@ssbbartgroup.com>
To:	W3C WAI Protocols & Formats <public-pfwg@w3.org>
Date:	01/25/2015 02:46 PM
Subject:	Universal Menus and a research script



Hello,
Recently I wrote a LinkedIn article that describes how to make the
universal application of ARIA Menus accessible
https://lnkd.in/bJWmDH2
Which uses all of the implementation details that we've been discussing in
the APG calls as a proof of concept.

I've attached a page script that can be used to implement different types
of triggering elements to see how they work when popup ARIA Menus are
attached to them, which may be helpful for AT compatibility testing
purposes.

The LinkedIn article includes various implementation examples, but a couple
appear to expose some platform issues on iOS, tested using the latest
iPhone6, that I wished to get James' opinion on in case I'm missing
something in the markup.

The first is an ARIA Textbox, at
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Variation%20Simulated%20Edit%20With%20Right%20Click/demo.htm

Which uses the contenteditable attribute to make a Div editable, plus all
of the ARIA textbox attributes.

When I attempt to edit this using iOS by tapping it as with all edit
fields, it shows the virtual keyboard, but typing into it with VoiceOver
running just makes a bonking noise and nothing is typed into the field. Is
there something special in the markup that needs to be done in order to get
iOS to enter text into a contenteditable container?

The second is an ARIA Tree, at
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Variation%20ARIA%20Tree%20With%20Right%20Click/demo.htm

Which includes dynamically displayed hamburger icons appended to the LI
nodes within the tree to provide tappable menu triggering elements for
touch screen support on smaller devices. This is seen after navigating into
the leaf nodes of the tree. These icons are marked up as ARIA Buttons.

In order to ensure the proper reading order when swiping, these elements
need to be inline with their related role=treeitem nodes.
However, on iOS, it appears that they are entirely omitted from the
Accessibility Tree, making it appear from a VoiceOver perspective that they
don't exist at all. This only appears to happen when they are inserted
within the markup of the role=tree structure. Can you confirm this? Is this
assessment correct, or is something else causing this?

All the best,
Bryan
[attachment "menu_test.txt" deleted by Fred Esch/Arlington/IBM]