![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: accessibility, WCAG
-
AuthorPosts
-
July 17, 2023 at 7:23 pm #1413520
I have used the code in this thread to add skip link to a site. https://kriesi.at/support/topic/accessibility-skip-navigation/
But how do I get the link to be invisible until you use the tab key?Regards
NinaJuly 18, 2023 at 11:29 am #1413575Hey Advantage09,
Do you want the link only to be visible once it is in focus? Where can we see the link in question?
Best regards,
RikardJuly 18, 2023 at 12:46 pm #1413595Top left corner of the site.
July 18, 2023 at 8:07 pm #1413630Hi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
a.jsf-skip-link { display: none; } a.jsf-skip-link:focus { display: block; }
Best regards,
RikardJuly 18, 2023 at 10:39 pm #1413653Sorry, did not work. display: none did what it should do, but the link does not appear when you click tab. Remove the css and the link is back.
Regards
NinaJuly 19, 2023 at 9:06 am #1413673Hi,
Thank you for the update.
The following css code should work, but you have to take the link out of the div element.
.jsf-skip-link { opacity: 0; font-size: 0; } .jsf-skip-link:focus { opacity: 1; font-size: inherit; }
Best regards,
IsmaelJuly 19, 2023 at 12:45 pm #1413704Almost. The link is hidden when you open the page and appears when you click the tab. But there is a black gap at the top of each page, where the skp-link appears. Could this be removed?
And how can I style it to get it a litle bit bigger? I have tried a few things, but it also makes the black gap bigger and that is not looking good.
Regards
NinaJuly 20, 2023 at 8:32 am #1413792Hi,
But there is a black gap at the top of each page, where the skp-link appears. Could this be removed?
This is why you have to move the skip link out of the div container. The black gap should not appear once the div has been removed.
To adjust the style of the skip link, edit the css rule above and add your own properties to it.
.jsf-skip-link:focus { opacity: 1; font-size: inherit; }
Best regards,
IsmaelJuly 20, 2023 at 10:58 am #1413818I removed the div yesterday as you mentioned, but the gap is still there and it shouldn’t be. I have tried to change the script that goes with it but it removes it completely.
function custom_skip_link_script(){ ?> <script> (function ($) { $(document).ready(function () { $( '<a href="#main_content" class="jsf-button jsf-skip-link">Hopp til innhold</a>' ).insertBefore( '#top' ); $('<a id="main_content" name="maincontent" tabindex="-1"></a>').insertAfter( '.title_container' ); $(".jsf-skip-link").click(function(){ $("#main_content").focus(); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_skip_link_script');
Everything I try to reference instead of #top just removes it.
Any suggestions?
Regards
NinaJuly 21, 2023 at 9:46 am #1413922Hi,
Thank you for the info.
Try to set the initial height of the link to zero, then set it back to default on focus.
.jsf-skip-link { opacity: 0; font-size: 0; height: 0; } .jsf-skip-link:focus { opacity: 1; font-size: inherit; height: 20px; }
If that didn’t work, try to pull the body element 20px upwards initially then bring it back to default when the skip link has been focused.
.jsf-skip-link + body { margin-top: -20px; } .jsf-skip-link:focus + body { margin-top: 0; }
Best regards,
IsmaelJuly 21, 2023 at 7:38 pm #1413990This worked, Thank you!
Regards
NinaJuly 21, 2023 at 11:02 pm #1414007Hi,
Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
RikardJuly 23, 2023 at 11:51 pm #1414180You can close this ticket.
July 24, 2023 at 11:27 am #1414202Hi,
Thanks for letting us know, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard -
AuthorPosts
- The topic ‘Skip link’ is closed to new replies.