WordPress.org
Get WordPress

Making WordPress.org

Changeset 3657


Ignore:
Timestamp:
07/09/2016 03:57:32 PM (9 years ago)
Author:
drewapicture
Message:

developer.wordpress.org: Add a skip link for screen reader users to skip to the content area.

The skip link is only initially displayed to screen readers but can be exposed when directly focused, making it available to all keyboard users.

See #1819.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/header.php

    r3318 r3657  
    1414
    1515<div id="page" <?php body_class( 'hfeed site devhub-wrap' ); ?>>
     16    <a href="#main" class="screen-reader-text"><?php _e( 'Skip to content', 'wporg' ); ?></a>
     17
    1618    <?php do_action( 'before' ); ?>
    1719    <header id="masthead" class="site-header" role="banner">

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/global.scss

    r798 r3657  
    154154    margin: 0 auto;
    155155}
     156
     157/* Screen Reader Text */
     158.screen-reader-text {
     159    position: absolute !important;
     160    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
     161    clip: rect(1px, 1px, 1px, 1px);
     162    overflow: hidden;
     163    height: 1px;
     164    width: 1px;
     165}
     166.screen-reader-text:hover,
     167.screen-reader-text:active,
     168.screen-reader-text:focus {
     169    background: #eee;
     170    border-bottom: 1px solid #ddd;
     171    color: #1982d1;
     172    clip: auto !important;
     173    font-size: 12px;
     174    height: auto;
     175    position: absolute;
     176    text-decoration: underline;
     177    top: 0;
     178    left: 7.6%;
     179    width: auto;
     180}

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/global.css

    r798 r3657  
    185185  margin: 0 auto;
    186186}
     187
     188/* Screen Reader Text */
     189.screen-reader-text {
     190  position: absolute !important;
     191  clip: rect(1px 1px 1px 1px);
     192  /* IE6, IE7 */
     193  clip: rect(1px, 1px, 1px, 1px);
     194  overflow: hidden;
     195  height: 1px;
     196  width: 1px;
     197}
     198
     199.screen-reader-text:hover,
     200.screen-reader-text:active,
     201.screen-reader-text:focus {
     202  background: #eee;
     203  border-bottom: 1px solid #ddd;
     204  color: #1982d1;
     205  clip: auto !important;
     206  font-size: 12px;
     207  height: auto;
     208  position: absolute;
     209  text-decoration: underline;
     210  top: 0;
     211  left: 7.6%;
     212  width: auto;
     213}

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

    r3649 r3657  
    265265  display: block;
    266266  margin: 0 auto;
     267}
     268
     269/* Screen Reader Text */
     270.screen-reader-text {
     271  position: absolute !important;
     272  clip: rect(1px 1px 1px 1px);
     273  /* IE6, IE7 */
     274  clip: rect(1px, 1px, 1px, 1px);
     275  overflow: hidden;
     276  height: 1px;
     277  width: 1px;
     278}
     279
     280.screen-reader-text:hover,
     281.screen-reader-text:active,
     282.screen-reader-text:focus {
     283  background: #eee;
     284  border-bottom: 1px solid #ddd;
     285  color: #1982d1;
     286  clip: auto !important;
     287  font-size: 12px;
     288  height: auto;
     289  position: absolute;
     290  text-decoration: underline;
     291  top: 0;
     292  left: 7.6%;
     293  width: auto;
    267294}
    268295
Note: See TracChangeset for help on using the changeset viewer.