Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 17, 2023 at 7:23 pm #1413520
    Advantage09

    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
    Nina

    July 18, 2023 at 11:29 am #1413575
    Rikard

    Hey 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,
    Rikard

    July 18, 2023 at 12:46 pm #1413595
    Advantage09

    Top left corner of the site.

    July 18, 2023 at 8:07 pm #1413630
    Rikard

    Hi,

    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,
    Rikard

    July 18, 2023 at 10:39 pm #1413653
    Advantage09

    Sorry, 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
    Nina

    July 19, 2023 at 9:06 am #1413673
    Ismael

    Hi,

    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,
    Ismael

    July 19, 2023 at 12:45 pm #1413704
    Advantage09

    Almost. 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
    Nina

    July 20, 2023 at 8:32 am #1413792
    Ismael

    Hi,

    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,
    Ismael

    July 20, 2023 at 10:58 am #1413818
    Advantage09

    I 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
    Nina

    July 21, 2023 at 9:46 am #1413922
    Ismael

    Hi,

    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,
    Ismael

    July 21, 2023 at 7:38 pm #1413990
    Advantage09

    This worked, Thank you!

    Regards
    Nina

    July 21, 2023 at 11:02 pm #1414007
    Rikard

    Hi,

    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,
    Rikard

    July 23, 2023 at 11:51 pm #1414180
    Advantage09

    You can close this ticket.

    July 24, 2023 at 11:27 am #1414202
    Rikard

    Hi,

    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

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Skip link’ is closed to new replies.