Accessibility – Skip Navigation

Hi,
I did some more research and found this plugin have you tried this?

Best regards,
Mike

Hi,
#cezarneaga I thought you might find the plugin helpful,
It says:

Enable skip links with WebKit support by adding JavaScript support to move keyboard focus.

How about something like this, add the ID “main_content” to the first element of content, such as after your slider.
Then 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><a href="#main_content" class="screen-reader-shortcut">Skip to main content</a></div>' ).insertBefore( '#top' );
  });
</script>
  <?php
  }
  add_action('wp_footer', 'custom_screen_reader_script');

and add this code in the General Styling > Quick CSS field:

 a:focus {
   color: white !important; 
   background-color: red !important; 
   text-decoration: none !important; 
 }

The css will highlight each link as you tab though, and the injected link will be the second link on the page before the navigation menu. I was hoping to hide the link if it was not in keyboard focus with this css:

:NOT(a.screen-reader-shortcut:focus) {
      visibility: hidden !important; 
 }

but it doesn’t work, perhaps it’s not needed?

Best regards,
Mike

Hi,
Sorry, your links in your post are not working for me, but I worked on this some more and finally got it working very good :)
Still add the ID “main_content” to the first element of content, such as after your slider on each page. To enable the custom ID and class for elements go to Enfold Theme Options > Layout Builder > Show element options for developers
Then use this function instead:

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');

and this css instead:

.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}  

expected results on the second press of the tab key, (WP admin menu has control of the first tab key press, if you are logged in)

adding some color to links that are in focus while tabbing might also be helpful

 a:focus {
   color: white !important; 
   background-color: red !important; 
   text-decoration: none !important; 
 }

adjust to suit.

I tested this solution, and I was able to continue to tab down the page without ending up in the main menu.

Best regards,
Mike

Hi,
I assume that the solution above worked because we didn’t get any feedback. I tested this again and it seems to work fine.
Please link to your page so we can see what you have so far.

Best regards,
Mike

Hi,
Thanks for the links, on your page you are targeting #maincontent but this is an anchor before your main body, not a “DIV”. Try targeting #main instead.

Best regards,
Mike

Hi,
Please include an admin login so I can try to test somethings.
So I assume you want this it work on each page, but will your pages have a title and breadcrumbs container like your example page?
I ask because the title container is the first div inside of #main and the second div is typically #av_section_1 unless you manually change it, so using #av_section_1 should get you past the title and breadcrumbs container.
I’m also thinking that we could add focus to your script like this: $("#main").focus(); or $("#main>div").focus(); or perhaps add a tabindex as you talked about earlier.

Best regards,
Mike

Hi,
Try placing your anchor after .title_container

Best regards,
Mike

Hi,
Sorry, I am talking about this anchor link you are adding, <a id="maincontent" name="maincontent" tabindex="-1"></a> I thought you were adding it with a script.
So I tested this script that adds the skip link, the skip anchor link, and sets the focus after the click:

function custom_skip_link_script(){
  ?>
  <script>
(function ($) {
    $(document).ready(function () {
    	$( '<div><a href="#skip2content" class="jsf-button jsf-skip-link">Skip 2 main content</a></div>' ).insertBefore( '#top' );
        $('<a id="skip2content" name="maincontent" tabindex="-1"></a>').insertAfter( '.title_container' );
        $(".jsf-skip-link").click(function(){           
            $("#skip2content").focus(); 
        });
    });
})(jQuery);
</script>
  <?php
  }
  add_action('wp_footer', 'custom_skip_link_script');

I changed the ID just so there would not be a clash, try removing your other scripts and test this one.
With this, the next tab is going to the inline link in the content.

Best regards,
Mike

Hi,
Glad we could help, unless there is anything else we can help with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Glad we were able to help, and a feature request has been submitted, 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