Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 9, 2020 at 5:15 am #1182689
    corefocusgroup

    Looking to make this Screen Reader Accessible. How do I do that?

    Mobile Hamburger Menu (screen reader) how to add <label> or “aria-label”. I tried “content:” via CSS but did not work with Google.

    February 9, 2020 at 6:45 pm #1182804
    Mike

    Hey corefocusgroup,
    To add the aria-label to the burger menu please try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_aria_label(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  $('.av-burger-menu-main a').attr("aria-label","Menu");
  });
  })(jQuery);
  </script>
<?php
}
add_action('wp_footer', 'custom_aria_label');

    2020-02-09-114318

    Best regards,
    Mike

    February 10, 2020 at 3:21 am #1182893
    corefocusgroup

    Hi,

    Do I add it in the ‘functions.php’ file with the function enclosed in php tags like this? <?php FUNCTION HERE ?>

    <?php

function custom_aria_label(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  $('.av-burger-menu-main a').attr("aria-label","Menu");
  });
  })(jQuery);
  </script>
<?php
}
add_action('wp_footer', 'custom_aria_label');

?>
    February 10, 2020 at 5:05 am #1182902
    Jordan Shannon

    Hi,

    No, just paste it to the bottom. No brackets.

    Best regards,
    Jordan Shannon

    February 10, 2020 at 5:11 am #1182916
    corefocusgroup

    Ok!

    One last question the same topic.

    I tried using this CSS code to add the “content:” value to the burger menu but it did not seem to work. Is my class wrong or did I miss something?

    #top .av-burger-menu-main a:before { content: "Menu"; display: none; }

#top .av-burger-menu-main a:after { content: "Menu"; display: none; }
    February 10, 2020 at 1:04 pm #1183025
    Mike

    Hi,
    Your :before and :after places the text on either side of the menu icon but the display: none; then removes it, not just hidden. If you want to hide it then use visibility: hidden; instead.
    While your text is within the link, it’s not inside the tag as an attribute.

    Best regards,
    Mike

    February 11, 2020 at 3:30 am #1183321
    corefocusgroup

    Thanks for the tip! I’ve made the changes.

    The Hamburger Menu has a lot of classes and elements. Is this code applied to the correct class and element?

    #top .av-burger-menu-main a:before { content: "Menu"; visability: hidden; front-size: 0px }

#top .av-burger-menu-main a:after { content: "Menu"; visability: hidden; front-size: 0px }
    February 11, 2020 at 3:19 pm #1183535
    Mike

    Hi,
    Yes

    Best regards,
    Mike

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