TOPIC: Accessibility workgroup

Hi
this is an opened discussion about accessibility and what can be done to make Maximenu CK fully compatible
Every people that are interested can contribute here, testers are welcome

CEd

Greetings to the community. I appreciate the opportunity to ask for suggestions about website accessibility for sight-impaired and blind users.

My oldest and largest website is www.fearringtonfha.org . This site is for the exclusive use of my community's residents and former residents, who number upwards of 2,000.people. Last year, as a volunteer driver helping non-driving people to medical and other appointments, I met a resident who, like his wife, has been blind since birth. His statement was that our website is "useless" because his screen readers can not "see" menus and other on-screen elements.

Recently this person suggested installing software from UserWay.org . This software has been installed on www.fearrington.com , the website for the builder of our community. If you open this site and type Ctrl-U (or click a small icon in the lower-right corner) you will see an accessibility menu. If you play around, you can get it to read the screen and hear what a blind person hears - quite usable for him, he says.

I did install this on my development site dev.fearringtonfha.org and Ctrl-U opens the accessibility menu. Again, you can make it vocalize (say) what it "sees" on the top menu. You can also select "Highlight Links" and see the problem - in MaximenuCK "separator" menu items are not recognized as menu items, and drop-down and fly-out menus that aren't visible unless clicked (or hovered) are not read at all.

I have learned of two other blind people in the community and I wold like very much to provide them access to the content of my website through the UserWay screen reader.

My suggestion, then, is to provide a way to code the very beautiful and rich MaximenuCK is such a way as to make its functionality "visible" to the blind. How might this be done? I did try (using Chrome's debugger) enclosing a MaxiMenuCK separator's text in a do-nothing anchor link:This causes the UserWay software to recognize the separator as a link - but I don't know how to get it to show the drop-down, set to appear on hover.

Anyone have thoughts about this?

Thanks!

Hi
I will now start a thinking about this

in MaximenuCK "separator" menu items are not recognized as menu items

>> this is not related to Maximenu CK, this is a menu item type from joomla. Just use another type like link to an article or category

drop-down and fly-out menus that aren't visible unless clicked (or hovered) are not read at all.

I think that this is the main problem for a megamenu. I have to work on

to make its functionality "visible" to the blind

yes this is the goal

I will do few tests and let you know. Please test my suggestion for the separator and let me know
CEd

Hi,

Yes, changing the Separator type to, say, Category List or other type that actually links to something does cause the menu item to be recognized as a link, and when the screen reader pauses, the link is highlighted and responds to an "Enter key by opening the linked page. However, the drop-down menu is not displayed, so the secondary links are still not "seen" by the screen reader.

I wonder if the separator link could be linked to a Javascript routine that reveals the the drop-down menu under the separator when clicked. Maybe another attribute (title?) of the linked separator could say that a subordinate menu is being opened, and perhaps trigger the screen reader to go to the first item in the drop-down and read it.

Thank you for looking at this again. Je vous souhaites une bonne nouvelle année.

Jim

However, the drop-down menu is not displayed, so the secondary links are still not "seen" by the screen reader.

yes, this is the big problem with the dropdown/megamenus

I wonder if the separator link could be linked to a Javascript routine that reveals the the drop-down menu under the separator when clicked.

the separator is not a good item type in my mind. And for the javascript, this is how it works currently for all other people
the problem seems related to the fact that the javascript is not compatible with the Accessibility
I have to check that, and if you have any info please let me know

CEd

is this menu accessible ?
codepen.io/grayghostvisuals/pen/ltjDa
staff.washington.edu/tft/tests/menus/sim...ccessible/index.html


just an example found on the web, if you can check that with your tools and friends

left: a menu button labeled 'menu' with a down-pointing arrow icon and the aria-expanded = false state. Right: The same menu button but with the menu open. This button is in the aria-expanded = true state.
As pictured, whether that menu is open or closed should be communicated with aria-expanded. You should only change this state on click, not on focus...

from www.smashingmagazine.com/2017/11/buildin...ssible-menu-systems/

The Problem With Navigation Submenus

Navigation submenus (or "dropdowns" to some) work well with a mouse or by keyboard, but they’re not so hot when it comes to touch. When you press the top-level "Shop" link in our example for the first time, you are telling it to both open the submenu and follow the link.

this is the same problem as for mobile devices ...

from the W3C
www.w3.org/WAI/tutorials/menus/flyout/

I let you check that and let me know your thoughts

Hi
have you got the time to check and test if these megamenus are ok for the accessibility criteria ?
CEd

Hi
for info I have made a simple test website here
wcag.ced1870.fr/

for anyone that is interested in testing the accessibility behavior of Maximenu CK. I have added the focus outline and the management of the submenu

Hi Cédrick,

The only way I know to check a website is to install the "widget" from this site: userway.org/widget .To get this software on your site you need to go through a 10-step configuration process, then paste into the template for your test site a link to a customized Javascript residing on the Userway site . I can not test it on your site, as I have no stand-alone screen readers.

Thanks for your continuing interest in this topic.

Jim

great, I have enabled the userway plugin on my test website, it works great
the only thing that I don't know, is how to check the accessibility level, do you know that ? how to know if it is AA compliant for example