Tagged: accessibility
-
AuthorPosts
-
March 10, 2020 at 8:37 pm #1192001
Hello,
I’m using the WP Accessibility plugin to add skip links across a network of sites. When someone chooses “Skip to main content”, they are brought to the main section of the site as intended. But when they press on Tab again, they are brought back to the first link at the top of the page, making the skip link useless.
I noticed someone else had this problem: https://kriesi.at/support/topic/accessibility-skip-navigation/
1. I’m wondering if that is still the only solution to correct this problem?
2. The plugin works fine with other themes that I’m using, so is it the theme that is preventing it from working properly?Thank you for your help.
March 16, 2020 at 1:07 pm #1193468Hey darryllevine,
Sorry for the late reply, as you see from the linked post we didn’t receive feedback for the final solution.
As I recall adding the ID “main_content” to the first element of content, such as after your slider was important to it working, because the function that adds the “Skip to main content” button links to the ID “main_content” I searched your page but didn’t find the ID “main_content”, but “tabing” though does seem to highlight the links down through the page.Best regards,
MikeMarch 16, 2020 at 3:55 pm #1193517Hello,
Thanks for your reply, Mike. However, the theme already has a div id=”main” right below the menu. It’s in the perfect place. And my “Skip to content” link does scroll the page down to that spot when it is used.
Question 1: Why do we need to add a custom ID in every page when there is already one?
I did test it on the home page (removed it for now), and the workwaround of creating a custom ID does seem to work, but it brings more questions:
Question 2: How do I add this custom id in every single page? Should I insert it a the very bottom of the header.php file in the child theme?
Question 3: I have a multisite and I need the skip link to appear in English on one site and in French on the other. Is there a way to add an IF statement based on language in the script you recommend we use in the functions.php file: https://kriesi.at/support/topic/accessibility-skip-navigation/#post-1027058Yes, I implemented the highlighting of the links everywhere. The only place where tabbing doesn’t work properly (other than the current issue) is in the Enfold Tab section as mentionned here: https://kriesi.at/support/topic/tab-section-and-accessibility-keyboard-navigation/
March 17, 2020 at 2:03 am #1193703Hi,
As I recall we didn’t want to use the “main” id because some parts of the page wasn’t necessary to include, but you can use “main” if you wish.
To have the button created in English and French please try this function instead:function custom_screen_reader_script(){ ?> <script> (function($){ $(document).ready(function(){ if ( document.documentElement.lang.toLowerCase() === "fr-ca" ) { $( '<div>Passer au contenu principal</div>' ).insertBefore( '#top' ); }else{ $( '<div>Skip to main content</div>' ).insertBefore( '#top' ); } }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_screen_reader_script');
Best regards,
MikeMarch 17, 2020 at 3:54 pm #1193827Great, thanks so much, Mike!
March 18, 2020 at 12:24 am #1193949Hi,
Did you need additional help with this topic or shall we close?
Best regards,
Jordan ShannonMarch 18, 2020 at 4:27 pm #1194157You can close it, Jordan, thank you.
March 18, 2020 at 5:15 pm #1194183Hi darryllevine,
We’re glad to hear that :)
Thanks for using Enfold and have a great day!Best regards,
Nikko -
AuthorPosts
- The topic ‘Skip links issue’ is closed to new replies.