Show "Skip to content" link when focused. In base.css add

a#skipnav:focus{
position:static;
}

Comments

Everett Zufelt’s picture

Everett Zufelt CreditAttribution: Everett Zufelt commented

I'm not sure how this is handled, if at all, now. But, you might wish to look at the Drupal 7 core themes for guidance, which all should be using a uniformed method.

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

The new drupal.org does this, just try tabbing. You will see the "Skip to content" link appear. The link is hidden other wise.

I got the technique from http://www.slideshare.net/heatherwoz/designing-accessible-drupal-themes.

I tested this in my tao sub theme and it works great.

Everett Zufelt’s picture

Everett Zufelt CreditAttribution: Everett Zufelt commented

I should have been more clear, not sure if / how this is handled in this theme. The Drupal 7 Core themes are all using a uniformed method that has been tested.

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

perhaps this article might help
http://openconcept.ca/blog/mgifford/accessibility_drupal_6_themes_invisi...

gmclelland’s picture

gmclelland CreditAttribution: gmclelland commented

Here is some more reading on the subject:

http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hidi...

seutje’s picture

seutje CreditAttribution: seutje commented

the focus style is defined in system.base.css (http://drupalcode.org/project/drupal.git/blob/refs/heads/7.x:/modules/sy... line 220 and on)
tao strips this css file out

seems to be some duplicate definitions going on here:
Tao's base.css line 10 and on:

#skip-link {
  position:absolute;
  display:block;
  }

#skip-link a,
#skip-link a:link,
#skip-link a:visited {
  position:absolute;
  display:block;
  left:-10000px;
  width:1px;
  height:1px;
  }

#skip-link a:hover,
#skip-link a:active,
#skip-link a:focus {
  position:static;
  width:auto;
  height:auto;
  }

Tao's drupal.css line 78 and on:

.element-invisible {
  position:absolute !important;
  clip:rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip:rect(1px, 1px, 1px, 1px);
  }

I'd suggest removing the definition from base.css and copying over the :focus and :active definitions from system.base.css