Fontawsome icon ADA compliance issue

  • fatrickp

    (@fatrickp)


    3 weeks, 4 days ago

    We’ve been dealing with making all our site ADA compliant, one of the issues that has came up is the FA icons in the mega menus. It looks like it writes the code differently than the other icons. It seems to include aria-hidden=”true”, which the ADA checkers doesn’t seem to like. I can’t find any option to remove this. Most of the icons I can just simply replace with dashicons but X/twitter is the issue there isn’t one for that, so I have to use FA. For now I’ve just changed it to the letter X, but I wanted to check/bring to your attention this issue.

    Below is an example of how the code is being output.

    <li class="mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-align-bottom-left mega-menu-flyout mega-has-icon mega-icon-left mega-hide-text mega-menu-item-623" id="mega-menu-item-623"><a target="_blank" class="fab fa-x-twitter fa6 mega-menu-link" href="https://x.com/conserve_food" tabindex="0" aria-label="X Twitter" aria-hidden="true"></a></li>

    Thanks for any help you can provide.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Support megatom

    (@megatom)

    3 weeks, 4 days ago

    Hi fatrickp,

    I’m fairly sure it’s because you’re using a fontawesome kit, and it’ll be fontawesome injecting that attribute themselves. They advocate the use of aria-hidden for icons here:

    https://fontawesome.com/v4/accessibility/

    You can check the whatsapp icon on the demo menu here: https://www.megamenu.com/ and see we don’t add the aria-hidden attribute to it (we’re also not using a font awesome kit).

    As a workaround you could upload the fontawesome svg icon for twitter/x as a custom icon.

    As it relates to a Pro feature, for further help please get in touch through https://www.megamenu.com/support/ .

    Regards,
    Tom

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.