Can I add an Aria-Label to an A Tag based on Class?

  • We need to add an Arial Label to a mobile menu toggle. It has nothing, so Accessibility is being “told off”. I can’t locate in the theme where the code is, and support has expired.

    Is there a way to add an aria-label, based on class? Or anything else…?

    thanks.

    • This topic was modified 1 year, 6 months ago by James Huff. Reason: moved to Accessibility since this is an accessibility issue
Viewing 1 replies (of 1 total)

  • Yes, you can add an aria-label to the mobile menu toggle using JavaScript or jQuery based on its class.

    Javascript:

    // Get the mobile menu toggle button using its class
var mobileMenuToggle = document.querySelector('.mobile-menu-toggle');

// Add an aria-label to the mobile menu toggle button
mobileMenuToggle.setAttribute('aria-label', 'Toggle mobile menu');

    Alternatively, you can also use jQuery to achieve the same result:

    jQuery

    // Get the mobile menu toggle button using its class
var mobileMenuToggle = $('.mobile-menu-toggle');

// Add an aria-label to the mobile menu toggle button
mobileMenuToggle.attr('aria-label', 'Toggle mobile menu');

    Make sure to replace .mobile-menu-toggle with the actual class name of your mobile menu toggle button. You can add this code to your website’s JavaScript file or to a script tag in your HTML code.

Viewing 1 replies (of 1 total)
  • The topic ‘Can I add an Aria-Label to an A Tag based on Class?’ is closed to new replies.