WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Where is the 'skip-link' definition? (11 posts)

  1. JonasBang
    Member
    Posted 3 years ago #

    I'm currently modifying theme 'Organic' to include a 'wp_nav_menu'. I have added this code to 'header.php' from another template (see below). It works, but it show both the text 'Skip to content' and the menu. With FireBug I can see that the class 'skip-link' is not defined. I have searched for it in the template I'm copying from, but I can't find it.

    Where is 'skip-link' defined?

    <div id="access" role="navigation">
      <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
      <div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
      <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
      <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    </div><!-- #access -->
  2. esmi
    Forum Moderator
    Posted 3 years ago #

    <div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>

  3. JonasBang
    Member
    Posted 3 years ago #

    Is it being defined in that div? Not in a css file, or other place?

    If that is the case, why isn't it working? Any clues?

    I have copied the 'screen-reader-text' definition to my css file.
    And changed 'twentyten' to the name of my theme, question is if that name need to be defined somewhere else also?

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    Is it being defined in that div? Not in a css file, or other place?

    Since we haven't seen your site, there's no way we can say for sure. The skip links are styled within style.css in the Twenty Ten theme but I have no idea what your theme has in its stylesheet.

  5. JonasBang
    Member
    Posted 3 years ago #

    Sorry, my bad, here is my site:
    http://www.uhuru.dk/

    As you can see in the menu, the 'Skip to content' is visible.

    When I search the TwentyTen style.css, there is no 'skip-link' definition. That is what puzzles me, how can it work in TwentyTen?

    Appreciate your time.

    Br,
    Jonas

  6. JonasBang
    Member
    Posted 3 years ago #

    If you have the css code for 'skip-link' which should go into 'style.css' I would much appreciate it.

    Though I still can't understand it, but that is 2nd prio ;o)

    Br,
    Jonas

  7. esmi
    Forum Moderator
    Posted 3 years ago #

    Try using

    .skip-link a {
    position:absolute;
    top:-9999px;
    left:-9999px;
    }
    .skip-link a:active,
    .skip-link a:focus {
    top:9999px;
    left:9999px;
    }
  8. JonasBang
    Member
    Posted 3 years ago #

    It works, thanks a bunch.

    But, when I look at other themes which are using 'skip-link' they don't have those definitions in their 'style.css'. That is what I do not understand.

    Have you checked your Twenty Ten style.css? Does it contain those definitions?

  9. esmi
    Forum Moderator
    Posted 3 years ago #

    From Twenty Ten's style.css file:

    /* Text meant only for screen readers */
    .screen-reader-text {
    	position: absolute;
    	left: -9000px;
    }

    Not as good as the CSS I gave above as it doesn't make the skip link available to sighted keyboard navigators. I'm hopeful that this improved CSS will be implemented in Twenty Eleven.

  10. JonasBang
    Member
    Posted 3 years ago #

    Mystery solved, thanks :o)

    I found the 'screen-reader-text' first in the 'rtl.css' of Twenty Ten, and copied it to my 'rtl.css' ... it did not work.

    Then I started looking for the definition of 'skip-link' because I assumed that that was the reason to why it did not work.

    As it now shows, 'screen-reader-text' is defined in Twenty Ten both in 'rtl.css' and 'style.css'. So, now I have copied it to both of my files too, and it works without the definition of 'skip-link'. I have kept your 'skip-link' definitions though.

    Thanks again, much appreciated.

    Br,
    Jonas

  11. sebgc
    Member
    Posted 2 years ago #

    In the Twentyeleven theme, the screen reader link styles are defined as:

    /* Assistive text */
    .assistive-text {
    	position: absolute !important;
    	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    	clip: rect(1px, 1px, 1px, 1px);
    }
    #access a.assistive-text:active,
    #access a.assistive-text:focus {
    	background: #eee;
    	border-bottom: 1px solid #ddd;
    	color: #1982d1;
    	clip: auto !important;
    	font-size: 12px;
    	position: absolute;
    	text-decoration: underline;
    	top: 0;
    	left: 7.6%;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags