"Skip to content" button in - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
April 7, 2021 at 4:57 pm #1293108

lle-it
Participant

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
Moderator
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
Participant

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” >

<div id=’wrap_all’>

April 10, 2021 at 2:27 pm #1293631

Mike
Moderator

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.

Best regards,
Mike

April 16, 2021 at 1:30 pm #1294794

lle-it
Participant

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
Moderator

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.