Support » Themes and Templates » Where is the 'skip-link' definition?

  • Resolved JonasBang

    (@jonasbang)


    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 -->
Viewing 10 replies - 1 through 10 (of 10 total)
  • esmi

    (@esmi)

    Forum Moderator

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

    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?

    esmi

    (@esmi)

    Forum Moderator

    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.

    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

    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

    esmi

    (@esmi)

    Forum Moderator

    Try using

    .skip-link a {
    position:absolute;
    top:-9999px;
    left:-9999px;
    }
    .skip-link a:active,
    .skip-link a:focus {
    top:9999px;
    left:9999px;
    }

    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?

    esmi

    (@esmi)

    Forum Moderator

    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.

    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

    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%;
    }

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Where is the 'skip-link' definition?’ is closed to new replies.