I have my own website where i write blogs and share photos. It also has some other content. The template i once made for it when i could see enough, has a top menu. Basically a menu at the top of the page with the menu items going from left to right. Some of the items have a sub menu. The sighted world can hover their mouse over the menu item and it opens a sub menu with a normal list of items in it. Now that i need to use voiceover i have realised i need to make my site more accessible. I cant seem to click on these menu items to open the sub menu. At least not on a computer. On my ipad and iphone, double tapping them indeed opens the sub menu. I can think of alternative solutions for this. But there are many more sites out there with the same system as mine. Is there a way to open these sub menus with voiceover? Or should i just pick an alternative solution?
Greetings from the Netherlands
Comments
Common problem with dropdowns
Many dropdowns display submenus when the parent link has a mouse hover. This will never work with a keyboard. I don't know when this coding pattern arrived, but it was very popular a few years ago and still persists.
To solve this, the javascript needs to put a class on the parent, such as class="open", when the user focuses on the parent and hits the enter key or down arrow to open the submenu. This class is removed when they go to other sections of the menu.
It's a pain to retrofit those hover menus. If you are still building that site, you may consider the Mega Menu from Adobe: https://adobe-accessibility.github.io/Accessible-Mega-Menu/
Well JAWS has provided now a
Well JAWS has provided now a command ctrl + ins + enter that will send a mouseover to the element that has the focus.
This is fairly easy to do on screen readers and Apple aparently has not done soo in voiceover. I do not know if moving the mouse to item vo cmd f5 or so will exibite the new menus and I do not know iif voiceover will be aware of that change and report the updated document with the new menus
Splyt had the answer
So i wasnt planning on editing any javascript anytime soon but thats ok cuz Splyt helped find the solution to my problem. i have quick nav on, i then pushed VO + u to open the list of links. Scrolled to a menu item with a sub menu and hit enter. Then pushed VO + CMD + f5. This moves the mouse to the element that has focus (that menu item with the sub menu) it announces the parent menu item again but also opens the sub menu. Then i can use the down arrow to scroll through the sub menu items. I can open them with enter or quick nav enter. Its a pain in the butt having to push so many keys, but it works. I am considering just adding a page with a list of all available links to make screen reader life slightly easier. But for now i can at least access my own website. Thanks Splyt.
You're welcome. I point the
You're welcome. I point the problems but also possible solutions when I can eeei