Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1252237

    Dear support team,

    The website is now to be designed to be barrier-free for a customer “Kunstmuseum Ahlen” ( https://kunstmuseum-ahlen.de/) . Alt text for images, headings hierarchization, that’s not the problem.
    However, while navigating, I get the error message “Clickable elements must be focusable and interactive” and furthermore “Focusable elements are not highlighted as focused”.
    How is it possible that the navigation can also be operated using the keyboard? Do you have a solution for this?
    and does ENFOLD offer its own configuration especially for barrier-free sites?
    Thank you for your editing
    Many greetings Diana

    #1252799

    Hey Diana,

    Thank you for the inquiry.

    It is possible to make the menu accessible using the keyboard but we have to edit the menu script. We provided the required modifications in the following thread.

    // https://kriesi.at/support/topic/accessibility-issues-with-main-nav-leaves-us-sites-in-danger-of-lawsuits/#post-1226327

    Best regards,
    Ismael

    #1253331

    Hey Ismael,
    Thank you for the link, but unfortunately it still does not work with the operation of the main menu via the keyboard:
    According to your linked post in the document “avia-snippet-megamenu.js” I changed the code as described:
    I replaced the sequence
    currentLink.on(‘mouseenter’, function () {
    sublist.stop().css({ visibility: ‘visible’ }).animate({ opacity: 1 });
    });
    with the sequence :
    currentLink.on(‘mouseenter’, function () {
    sublist.stop().css({ visibility: ‘visible’ }).animate({ opacity: 1 });
    });

    currentLink.on(‘focus’, function () {
    sublist.stop().css({ visibility: ‘visible’ }).animate({ opacity: 1 });

    sublist.find(‘li:last-child’).on(‘focusout’, function () {
    sublist.stop().animate({ opacity: 0 }, function () {
    sublist.css({ visibility: ‘hidden’ });
    });
    });
    });

    More over I inserted the following CSS script to show the indicator. That doesn’t work either …
    #top .av-main-nav ul a: focus {
    text-decoration: underline;
    }

    Where is my mistake? What else do I have to change so that the navigation is still accessible?

    Thank you for your editing and best regards! Diana

    #1254256

    Hi,

    Thank you for the update.

    The script modification in the previous thread will only work on the default drop down, but not on mega menus. For the mega menu, please check the modification in the following thread.

    // https://kriesi.at/support/topic/make-mega-menu-accessible/#post-1253157

    Please do not forget to toggle or temporarily disable the Performance > File Compression settings after adding the code.

    Best regards,
    Ismael

    #1254303

    Hey Ismael,

    Thanks for the new link to change the JS file for the Megamenu. I’ve included the following code in the js> avia-snippet-megamenu.js file:
    // 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);
    });
    });

    I also activated “file merging and compression” for CSS and Javascript at Perfomance.

    But unfortunately it still doesn’t work!
    Where is my mistake?
    Please help again.

    Kind regards, Diana

    #1254814

    Hi,

    It seems to be working properly now. Please remove the browser cache and purge the cache, or check the site on incognito mode. Please note that once the menu item is focused, there is a slight delay before the mega menu container fades in.

    Thank you for your patience.

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.