Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1250763

    Hello,
    I try to make a site more accessible. I am afraid I see no possibility to get the navigation navigable with keyboard. The menu contains mega menu and columns. Can you please assist?
    I did try and implement https://kriesi.at/support/topic/accessibility-issues-with-main-nav-leaves-us-sites-in-danger-of-lawsuits/ but it doesn’t affect the submenues in my case, I think because of the mega menus.
    Thanks in advance.

    #1252180

    Hey devwp,

    Thank you for the inquiry.

    The modifications above should also work for the mega menu. Please try to add the modifications again, then toggle or temporarily disable the Performance > File Compression settings to refresh the scripts and stylesheets.

    Best regards,
    Ismael

    #1252472

    Hey Ismael,
    thank you for your support!
    The file compression is not active on the site, a caching plugin is. I already cleared the cache, unfortenately the modifications do not work. The menu is still being skipped completely.
    I added the URL in the private content field.

    #1253157

    Hi,

    Thank you for the update.

    We were able to reproduce the issue on our local installation and managed to find a possible solution. Please edit the js > avia-snippet-megamenu.js file, look for this code around line 152:

    //bind event for mega menu
    			megaItems.each(function (i) {
    
    				$(this).hover(
    					function () {
    						delayCheck[i] = true;
    						setTimeout(function () { megaDivShow(i); }, options.delay);
    					},
    
    					function () {
    						delayCheck[i] = false;
    						setTimeout(function () { megaDivHide(i); }, options.delay);
    					}
    				);
    			});
    

    .., and replace it with:

    //bind event for mega menu
    			megaItems.each(function (i) {
    
    				$(this).hover(
    					function () {
    						delayCheck[i] = true;
    						setTimeout(function () { megaDivShow(i); }, options.delay);
    					},
    
    					function () {
    						delayCheck[i] = false;
    						setTimeout(function () { megaDivHide(i); }, options.delay);
    					}
    				);
    
    				$(this).find('>a').focus(function () {
    					delayCheck[i] = true;
    					setTimeout(function () { megaDivShow(i); }, options.delay);
    				});
    
    				$(this).find('>.avia_mega_div > ul li:last-child > ul li:last-child a').focusout(function () {
    					delayCheck[i] = false;
    					setTimeout(function () { megaDivHide(i); }, options.delay);
    				});
    			});
    

    Please do not forget to toggle the Performance > File Compression settings after doing the modification.

    Best regards,
    Ismael

    #1254286

    Hi Ismael,
    thanks a lot! I tested it and it works perfectly :)
    Now that the navigation works, can you give me a hint how to display the :focus correctly on the menu?

    :focus {
        outline: 3px solid #333333!important;
    } 

    works, but in the menu the focus.borders are cut off.

    #1254811

    Hi,

    You are welcome! Glad it is working. To change the focus style, please try to use this css code.

    #top #header .av-main-nav > li a:focus {
    	color: red !important;
            outline: 3px solid #333333!important;
    }
    

    Best regards,
    Ismael

    #1254921

    Hi and thanks again,

    your code does the same as mine ;)
    Problem is, the border is not correctly shown on the menu, but just a border at the bottom or just a border on the left of a menu entry.

    #1255377

    Hi,

    What happens when you replace outline with the border property? This should create lines around the text when focused.

    Best regards,
    Ismael

    #1255662

    Hi,
    yes, this does the trick, thanks a lot for your help!

    #1256445

    Hi devwp,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Make Mega Menu accessible’ is closed to new replies.