Skip-Link - WP accessibility - Support | Kriesi.at

Tagged: accessibility

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

Author

Posts
August 14, 2020 at 12:13 pm #1237771
sue007
Participant
Hello,
I use the WP accessibility plugin to create Sikp-Links.

With the help of this thread I managed to set up one Skip-Link to #main.
https://kriesi.at/support/topic/skiplink-button-is-visible-but-not-working/

This script in the child theme functions.php does the job.
```
//Sprunglink zum Hauptinhalt
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 would like to insert a second skip-link. I am not a PHP programmer. How would you insert a second skip-links to for example to #main-nav?

Best regards,
Susanne
- This topic was modified 4 years, 4 months ago by sue007.
August 16, 2020 at 12:21 pm #1238137

Victoria
Inactive Moderator

Hey sue007,

You need to write another click handler to add another function like that.

If you need further assistance please let us know.
Best regards,
Victoria

August 17, 2020 at 11:27 am #1238450
sue007
Participant
Hi Victoria,

thank you for your reply.
I understand that there must be a second click handler but I am not very familiar with PHP programming. This does not work:
```
//Sprunglink zum Hauptinhalt
function custom_skiplinks_script(){
  ?>
  <script>
(function($){
  $(window).load(function() {
  $("#skiplinks a").click(function(){
  	setTimeout(function(){
    $('#main').trigger("focus");
  	}, 200);
});
  });
  })(jQuery);

  (function($){
  $(window).load(function() {
  $("#skiplinks a").click(function(){
  	setTimeout(function(){
    $('#mega-menu-avia').trigger("focus");
  	}, 200);
});
  });
  })(jQuery);

  </script>
<?php
}
add_action('wp_footer', 'custom_skiplinks_script');
```
Thank you.
Susanne
August 17, 2020 at 4:57 pm #1238547
Victoria
Inactive Moderator
Hi Susanne,
```
$("#skiplinks a").click(function(){
```
This means that users click on the same link but is it really the same link or it has to be a different link?

Best regards,
Victoria
August 17, 2020 at 6:05 pm #1238583
sue007
Participant
Hi Victoria,

no there should be two skip-links like this
```
<div class="wpa-hide-ltr" id="skiplinks" role="navigation" aria-label="Direktlinks">
<a href="#main">Direkt zum Inhalt</a> 
<a href="#mega-menu-avia">Direkt zur Navigation</a>
 </div>
```
Kind regards,
Susanne
August 19, 2020 at 12:50 pm #1239160

Victoria
Inactive Moderator

Hi Susanne,

It is strange to me, because the id skiplinks is on the div and divs are not usually elements used for clicking. You have to links and so you register clicks on them and then what happens?

Best regards,
Victoria

August 19, 2020 at 2:57 pm #1239194

sue007
Participant

Hi Victoria,
the whole construction is a work around to enable the skip-links WordPress normally generates but ENFOLD somehow ‘swollows’. The skip-links are built in to make a website accessible for users who cannot navigate with the mouse (because they are blind i.e.) but can tab through the website. These 2 Skip-Links skip 1. direct to the main content or 2. direct to the main navigation.

See also this thread:

https://kriesi.at/support/topic/skiplink-button-is-visible-but-not-working/

Kind regards,
Susanne

August 27, 2020 at 9:07 am #1241132
Ismael
Moderator
Hi,

You may need to change the ID of the second skiplink container to “skiplinks-b” or anything different, and change the selector in the script accordingly.
```
  $("#skiplinks-b a").click(function(){
```
And you can also include the additional click event listener inside the first window load event so that you don’t have to create another.
```
$(window).load(function() {
  $("#skiplinks a").click(function(){
      setTimeout(function(){
              $('#main').trigger("focus");
      }, 200);
  });

  $("#skiplinks-b a").click(function(){
      setTimeout(function(){
              $('#mega-menu-avia').trigger("focus");
      }, 200);
  });

  // add more code here
 });
```
Best regards,
Ismael
August 27, 2020 at 12:55 pm #1241191
sue007
Participant
Thank you, Ismael. This helped me.
I only changed the selector for the second link like this, because I cannot setup a second container for the second skiplink within the Plugin
```
function($){
  $(window).load(function() {
  $("#skiplinks a").click(function(){
  	setTimeout(function(){
    $('#main').trigger("focus");
  	}, 200);	  
  });
	  
	  $("#skiplinks a:nth-child(2)").click(function(){
      setTimeout(function(){
              $('#mega-menu-avia').trigger("focus");
      }, 200);
  });
	  
});	  
  })(jQuery);
```
Cheers
Susanne
August 28, 2020 at 9:27 am #1241474

Victoria
Inactive Moderator

Hi sue007,

Glad you got it working for you! :)

If you need further assistance please let us know.

Best regards,
Victoria
Author

Posts

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

You must be logged in to reply to this topic.

Skip-Link – WP accessibility