"Skip to content" button

Hey lle-it,
Sorry for the very late reply, to add a “Skip to content” button please try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_screen_reader_script(){
    ?>
    <script>
  jQuery(window).load(function(){
    jQuery( '<div id="skipnav"><p class="skipnav"><a href="#main_content">Skip to Content (Press Enter)</a></p></div>' ).insertBefore( '#top' );
    });
  </script>
    <?php
    }
add_action('wp_footer', 'custom_screen_reader_script');

In the above code please note the custom ID: main_content , this ID should be added to your page “main content” area that you want the Skip Nav to target.
To add a ID to an element such as a color section, please look in the element backend under the “developer” tab, for that element.
This approach will give you better control of the Skip Nav for each page. For example, your homepage may have a slider that the Skip Nav should jump over and go to the first color section, which contains the first content for that page. While other pages may have a different “first content” as defined by the UX and not the ALB elements.
I hope this makes sense.
With the above script you will also want to use this css to style, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.skipnav {position: absolute; display: none; text-align: left; margin: 0; padding: 0} /*For all, including Opera. Display:none used to switch off the skip links for Opera users (it's redundant, Opera has excellent keyboard navigation)*/
* html .skipnav {display: block} /*Switch on for IE6 and below*/
*+html .skipnav {display: block} /*Switch on for IE7*/
:root .skipnav {display: block} /*Switch on for Moz, FF and Safari*/
.skipnav p {margin: 5px 0 0 0; padding: 0; position: absolute; font-size: 2em}
.skipnav a {width: 26em; display:block; color: #fff; background: #333; text-decoration: none; padding: 5px; position: absolute; left: -1000em; top: 0; font-weight: bold}
.skipnav a:visited {color: #fff}
.skipnav a:focus, .skipnav a:active {z-index: 999; min-width: 250px; top: -.1em; left: 0; border: solid #777 2px; color: #fff; background: #333 !important} /*Note IE bug that requires use of :active to mimic effect of :focus*/
.skipnav a:hover {cursor: default} 

Please feel free to adjust to suit.
After applying the css, please clear your browser cache and check.
The expected results:

Best regards,
Mike

Hi,
Glad this helped, the main issue you will find is with ALB (Advanced Layout Builder) pages, so If you build your pages with the same layout then you should be able to craft them to use the same ID.
*Please Note > The “Main Content” ID for ALB pages is main this occur once on each ALB page, but this also includes any sliders or non-content elements. In my test #main centers the slider and the next tab goes to the next section, but this would appear as a failed “skip jump” to the user.
I recognize this behavior from other threads that used a “Skip to content”, for your “hundreds of pages” a majority of them should be the same layout correct?
I could rewrite the script to check for a “Page” type or category or something so that these “hundreds of pages” with the same layout use the same ID that you already have in place, or fake one. Can you link to one of these?

But please note that with the ALB there are so many ways a page can be laid out, the beauty of the original script is that once you add the custom ID to the pages in the place that you choose, it “Just” works.
It may look like a task to edit pages to add the custom ID to current content sections, perhaps one minute per page, but the overall control is much better, especially for new pages that you add and for non-conforming pages/posts.

Best regards,
Mike

Hi,
This script will look for #main_content on the homepage, and #main on all others.

function savvy_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('#top');
  } else {
  	$('<div id="skipnav"><p class="skipnav"><a href="#main">Skip to Content (Press Enter)</a></p></div>').insertBefore('#top');
  }
    });
})(jQuery);
</script>
    <?php
    }
add_action('wp_footer', 'savvy_screen_reader');

Best regards,
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