Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 21, 2020 at 8:32 pm #1215077
    cdav77

    Hello,

    I wanted to alert you that something in the Enfold theme is interfering with the Skiplink button added with the WP Accessibility plugin. This Skiplink button has always worked before but has recently stopped working. The Skiplink button is visible when you press the Tab key, but clicking the button or pressing Enter does not link to the main content (id = main).

    I asked the plugin author first about the problem, and he provided this response: https://wordpress.org/support/topic/skiplink-button-is-visible-but-not-working/#post-12859673

    Do you have plans to add a native skiplink button to the theme?

    Connie

    May 23, 2020 at 4:01 pm #1215508
    Victoria

    Hey cdav77,

    Where can we see that button?

    Best regards,
    Victoria

    May 25, 2020 at 6:11 pm #1216209
    cdav77

    Hi Victoria,

    The button appears in the top left corner of the site when you press the Tab key. When clicked, it should skip over the main menu so that people using the keyboard for navigation or using a screen reader don’t have to go through the menu on every page to get to the main content.

    Connie

    May 28, 2020 at 5:23 pm #1217442
    sue007

    Hi,
    I am also very interested in the solution of this problem and hope it will be set to top priority, dear ENFOLD-team.
    Accessibility matters.
    Thank you,
    Susanne

    May 31, 2020 at 9:11 pm #1218278
    Mike

    Hi,
    Sorry for the late reply, try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_skiplinks_script(){
  ?>
  <script>
(function($){
  $(window).load(function() {
  $("#skiplinks a").click(function(){
  	setTimeout(function(){
    $('#main').trigger("focus");
  	}, 200);
});
  });
  })(jQuery);
  </script>
<?php
}
add_action('wp_footer', 'custom_skiplinks_script');

    I tested by injecting this script into your site and pressing Tab to see the skiplink, then clicking the button or pressing Enter sets the #main as focus, pressing Tab again highlights the first slideshow button.

    Since there is not an animation to alert the user that the page focus has changed, I put this together if you want to try it, it will create a white pulse from any links that are visible in the #main section, such as the two buttons on your home page.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

     #main:focus > .container_wrap a {
    box-shadow: 0 0 0 rgba(255,255,255, 0.4);
      animation: pulse 2s 1;
    z-index: 9999 !important;
    position: relative;
    }
    
    @-webkit-keyframes pulse {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
      }
      70% {
          -webkit-box-shadow: 0 0 0 100px rgba(255,255,255, 0);
      }
      100% {
          -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
      }
    }
    @keyframes pulse {
      0% {
        -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
      }
      70% {
          -moz-box-shadow: 0 0 0 100px rgba(255,255,255, 0);
          box-shadow: 0 0 0 100px rgba(255,255,255, 0);
      }
      100% {
          -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
          box-shadow: 0 0 0 0 rgba(255,255,255, 0);
      }
    }

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    June 1, 2020 at 8:21 pm #1218510
    cdav77

    Hi Mike,

    Thanks so much for the solution. I added the code to the functions.php file and it worked. Will this fix be added to the next update of Enfold?

    Thanks also for the suggested CSS. The pulse is cool – I will check with my client to see if she likes it. In the meantime, I am using white boxes to highlight the focused links.

    Connie

    June 2, 2020 at 11:58 am #1218747
    Mike

    Hi,
    Glad to hear this helped, I don’t believe this will be added to Enfold as it is a customization for a single plugin, but we will add a feature request about this for the dev team to review.
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    June 3, 2020 at 5:13 pm #1219151
    cdav77

    Thanks again. Yes, please request that a skiplink button be added to the theme. This is an important accessibility feature. And making it native to the theme is especially important because of this issue with using a 3rd-party plugin to add it.

    Connie

    June 5, 2020 at 12:01 pm #1219762
    Mike

    Hi,
    Very good, we have submitted this to the feature requests for the dev team to review, thanks for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Skiplink button is visible but not working’ is closed to new replies.