Accessibility fix: Fix skip link display and target.

JohnAlbin · Oct 3, 2015 · dc78e83 · dc78e83
1 parent e1ae7e7
commit dc78e83
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/home.html b/home.html
@@ -449,13 +449,12 @@
               <div class="sf_colsOut page_OLD">
                 <div id="placeholder_3_widget_0_TB0512BA7002_Col00"
                   class="sf_colsIn sf_1col_1in_100">
-                  <ul class="jumpers">
-                    <li><a href="#content">Go to content</a></li>
-                    <li><a href="#navigation">Go to navigation</a></li>
-                  </ul>
                   <div class="sf_cols">
                     <div class="sf_colsOut header main-header"
                       data-placeholder-label="Header" role="banner">
+                      <a href="#main-content" class="visually-hidden focusable skip-link" tabindex="1">
+                        Skip to main content
+                      </a>
                       <div id="placeholder_3_widget_0_TB0512BA7004_Col00"
                         class="sf_colsIn sf_1col_1in_100">
                         <div class="sf_cols">
@@ -503,7 +502,7 @@
                               </div>
                               <div class="logoWrap">
                                 <h1 class="logo">
-                                  <a href="/" tabindex="1"><strong class="visually-hidden">Sopra
+                                  <a href="/" tabindex="2"><strong class="visually-hidden">Sopra
                                     Steria</strong></a>
                                 </h1>
                                 <div class="baseline">Delivering Transformation.
@@ -1190,7 +1189,7 @@ <h2 class="visually-hidden">Navigation</h2>
                     </div>
                   </div>
                   <div class="sf_cols">
-                    <div class="sf_colsOut main-content" style="width: 100%;"
+                    <div id="main-content" class="sf_colsOut main-content" style="width: 100%;"
                       data-placeholder-label="Content" role="main">
                       <div id="placeholder_3_widget_0_TB0512BA7017_Col00"
                         class="sf_colsIn sf_1col_1in_100">

diff --git a/newsroom/events/index.html b/newsroom/events/index.html
@@ -395,13 +395,12 @@
               <div class="sf_colsOut page_OLD">
                 <div id="placeholder_3_widget_0_TB0512BA7002_Col00"
                   class="sf_colsIn sf_1col_1in_100">
-                  <ul class="jumpers">
-                    <li><a href="#content">Go to content</a></li>
-                    <li><a href="#navigation">Go to navigation</a></li>
-                  </ul>
                   <div class="sf_cols">
                     <div class="sf_colsOut header main-header"
                       data-placeholder-label="Header" role="banner">
+                      <a href="#main-content" class="visually-hidden focusable skip-link" tabindex="1">
+                        Skip to main content
+                      </a>
                       <div id="placeholder_3_widget_0_TB0512BA7004_Col00"
                         class="sf_colsIn sf_1col_1in_100">
                         <div class="sf_cols">
@@ -1139,7 +1138,7 @@ <h2 class="visually-hidden">Navigation</h2>
                     </div>
                   </div>
                   <div class="sf_cols">
-                    <div class="sf_colsOut main-content" style="width: 100%;"
+                    <div id="main-content" class="sf_colsOut main-content" style="width: 100%;"
                       data-placeholder-label="Content" role="main">
                       <div id="placeholder_3_widget_0_TB0512BA7017_Col00"
                         class="sf_colsIn sf_1col_1in_100">

diff --git a/public/css/bare.css b/public/css/bare.css
@@ -561,6 +561,18 @@ td.cellmiddle {
   width: auto;
 }
 
+.skip-link {
+  display: block;
+  padding: 2px 0 3px;
+  text-align: center;
+}
+
+.skip-link:link,
+.skip-link:visited {
+  background-color: #000;
+  color: #fff;
+}
+
 @media print {
 
   * {