Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 7, 2021 at 4:57 pm #1293108
    lle-it

    Hello,

    We are trying to add a “Skip to content” button on our website for WCAG Accessibility standards. Mike was able to assist me in this post: https://kriesi.at/support/topic/skip-to-content-button/ and the button now exists on our page: https://www.lle.rochester.edu/

    However, we are still being told that our site does not pass Accessibility guidelines for this feature because <div> element containing the skip link does not occur within the <body> of the page script, and that by moving the “skipnav” <div> to the top of the <body> should clear this issue for you.

    How do I take this element and move it into the body of the page script?

    Thank you.

    April 9, 2021 at 2:41 pm #1293517
    Mike

    Hey lle-it,
    Thank you for your patience, please give this a try instead of the other script and continue to use your current css:

    function screen_reader(){
    ?>
    <script>
(function($){
	$(document).ready(function() {
  if ($("body").hasClass("home") == true) {
  $('<div id="skipnav"><p class="skipnav"><a href="#main_content">Skip to Content (Press Enter)</a></p></div>').insertBefore('#wrap_all');
  } else {
  	$('<div id="skipnav"><p class="skipnav"><a href="#main">Skip to Content (Press Enter)</a></p></div>').insertBefore('#wrap_all');
  }
    });
})(jQuery);
</script>
    <?php
    }
add_action('wp_footer', 'screen_reader');

    Best regards,
    Mike

    April 9, 2021 at 9:37 pm #1293578
    lle-it

    Thank you– that didn’t seem to work. Here is our site: https://www.lle.rochester.edu/
    If you view the source, the “Skip to Content” section does not appear before wrap_all in the body section:

    <body id=”top” class=”home page-template-default page page-id-734 page-parent rtl_columns stretched open_sans” itemscope=”itemscope” itemtype=”https://schema.org/WebPage&#8221; >

    <div id=’wrap_all’>

    April 10, 2021 at 2:27 pm #1293631
    Mike

    Hi,
    Thank you for the feedback, I thought the intention was to have the “Skip to Content” within the <body> tag, where before it was outside, aka before the <body> tag, so I used insertBefore(‘#wrap_all’); to get it above <wrap_all> and under <body> aka within the <body>
    I tried to append to the <body> but that doesn’t work because the “Skip to Content” needs to be it’s own <div>
    So when I check now it seems to me that it is now working as intended.
    skip-nav_above_wrap-all_within_body.jpg

    Best regards,
    Mike

    April 16, 2021 at 1:30 pm #1294794
    lle-it

    Thank you for the explanation, Mike. This does appear to work as intended. I really appreciate your help and this ticket can be closed.

    April 17, 2021 at 5:15 pm #1294916
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘"Skip to content" button in’ is closed to new replies.