Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 20, 2021 at 4:08 am #1317544
    sky19er

    One of my clients hired an accessibility firm to review their site and they had a couple of recommendations re the mobile menu: They say we should add a role=”button” attribute to the burger icon / anchor link, like this https://prnt.sc/1qctlht. And, more importantly, they say we should add an aria-expanded attribute to indicate wether the menu is expanded or collapsed (although they did not provide a code example for this one). Is there any way for me to address these issues? Thanks and let me know if you have any questions.

    August 23, 2021 at 11:05 am #1317948
    Ismael

    Hey sky19er,

    Thank you for the inquiry.

    The burger menu markup can be found in the avia_append_burger_menu function within the enfold\functions-enfold.php file. You can directly add the attribute there. And regarding the menu indicator, you can find the burger toggle logic in the enfold\js\avia-snippet-hamburger-menu.js file, around line 430. 

    burger_wrap.on('click', function(e)

    The if condition around line 454 returns true when the burger menu is currently active.

    if(burger.is(".is-active"))

    Best regards,
    Ismael

    August 23, 2021 at 10:31 pm #1318042
    sky19er

    Thanks, Ismael. Adding the role attribute looks pretty straight-forward, but working in the aria-expanded true/false it pretty far over my head — any way you could provide any further guidance on that one? And is there any chance either of these things could be handled via the child theme? Thanks again, and as always ;)

    August 26, 2021 at 5:56 am #1318375
    Ismael

    Hi,

    Thank you for the update.

    Above line 57, after the if condition that we mentioned above, you have to remove the aria-expanded attribute, because that is when the burger menu is closing.

    burger.removeAttr("aria-expanded");

    And around line 481, inside the else statement or above this code,..

    burger.addClass("is-active");

    .., you have to add the attribute again because that is the time the burger opens.

    burger.attr("aria-expanded");

    Please toggle or temporarily disable the Enfold > Performance > File Compression settings after doing the modifications. Let us know if that helps.

    Best regards,
    Ismael

    August 26, 2021 at 7:52 am #1318396
    sky19er

    Thanks so much, Ismael. I couldn’t get it to work, but we can hold off on this for now — I’ll get back to you once I confirm we absolutely need to do this. Meanwhile, maybe you can just confirm for me — if we do figure this out, can it be handled via the child theme? I guess not, eh? Thanks again.

    August 27, 2021 at 8:37 am #1318592
    Ismael

    Hi,

    Alright. Regarding handling it via child theme, you can deregister the script file, copy it to your child theme and register it back using its new path. Examples in the following link.

    // https://kriesi.at/support/topic/is-it-possible-to-whitelist-a-custom-cookie/#post-1310899
    // https://kriesi.at/support/topic/google-map-marker-size-increase/#post-1308434
    // https://kriesi.at/support/topic/tabs-select-on-hover/#post-1307497

    You will need these functions.

    // https://developer.wordpress.org/reference/functions/wp_deregister_script/
    // https://developer.wordpress.org/reference/functions/wp_enqueue_script/

    If you do not want to override the script file, you might still be able to add the attribute with a custom script.

    // https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/#add-a-script-to-footer-section

    Best regards,
    Ismael

    August 27, 2021 at 7:39 pm #1318709
    sky19er

    Ooh, Ok, thanks again, Ismael!!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘mobile menu accessiblity’ is closed to new replies.