[bug 745888] Make skip-nav link tab-selectable.

skiplink that has display:none is useless because it will never receive focus. I also added a visual :focus state.
macoseika · Apr 17, 2012 · 4f40a35 · 4f40a35
1 parent 347436e
commit 4f40a35
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/media/css/base.css b/media/css/base.css
@@ -30,6 +30,23 @@ body {
     font:16px/24px Georgia, serif;
 }
 
+.skip{
+	left:-999em;
+	position:absolute;
+}
+
+.skip:focus{
+	background:rgb(255,255,255);
+	color:rgb(44,44,44);
+	height:35px;
+	left:0;
+	padding-top:5px;
+	right:0;
+	text-align:center;
+	top:0;
+	z-index:1031; /* One more than .nav-bar-fixed-top */
+}
+
 .huge,.large,h1,h2,h3,h4 {
     font-family:OpenSans, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
     font-weight:400;

diff --git a/templates/base.html b/templates/base.html
@@ -30,9 +30,7 @@
   {{ 'auth' if user.is_authenticated() else 'anon' }}"
   data-locale="{{ LANG }}">
 
-<ul id="skip" class="hide">
-  <li><a href="#main">{{ _('Skip to Content') }}</a></li>
-</ul>
+<a class="skip" href="#main">{{ _('Skip to Content') }}</a>
 {% block nav %}
   <nav class="navbar navbar-fixed-top">
     <div class="navbar-inner">