diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 852be14801..d724af368d 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -826,22 +826,14 @@ hr.divide {
   word-wrap: break-word;
 }
 
+// ui - semantic + visual divider
 hr.divider {
   @extend %cont-text-sr;
 }
 
-/* show skip links on focus */
-#skip-link a{
-  position:absolute;
-  &:focus {
-    width: auto;
-    height: auto;
-    overflow: visible;
-    background-color: #fff;
-    border: 2px solid black;
-    padding: 3px;
-    z-index: 1005;
-  }
+// ui - skipnav
+.nav-skip {
+  @extend %cont-text-sr;
 }
 
 // ====================
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 734e4b5715..ce6522a000 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -29,213 +29,215 @@
   </head>
 
   <body class="<%block name='bodyclass'></%block> hide-wip">
-  <div id="skip-link"><a href="#content">Skip to Content</a></div>
-<script type="text/javascript">
-window.baseUrl = "${settings.STATIC_URL}";
-var require = {
-    baseUrl: baseUrl,
-    waitSeconds: 60,
-    paths: {
-        "domReady": "js/vendor/domReady",
-        "gettext": "/i18n",
-        "mustache": "js/vendor/mustache",
-        "codemirror": "js/vendor/codemirror-compressed",
-        "codemirror/stex": "js/vendor/CodeMirror/stex",
-        "jquery": "js/vendor/jquery.min",
-        "jquery.ui": "js/vendor/jquery-ui.min",
-        "jquery.form": "js/vendor/jquery.form",
-        "jquery.markitup": "js/vendor/markitup/jquery.markitup",
-        "jquery.leanModal": "js/vendor/jquery.leanModal.min",
-        "jquery.ajaxQueue": "js/vendor/jquery.ajaxQueue",
-        "jquery.smoothScroll": "js/vendor/jquery.smooth-scroll.min",
-        "jquery.timepicker": "js/vendor/timepicker/jquery.timepicker",
-        "jquery.cookie": "js/vendor/jquery.cookie",
-        "jquery.qtip": "js/vendor/jquery.qtip.min",
-        "jquery.scrollTo": "js/vendor/jquery.scrollTo-1.4.2-min",
-        "jquery.flot": "js/vendor/flot/jquery.flot.min",
-        "jquery.maskedinput": "js/vendor/jquery.maskedinput.min",
-        "jquery.fileupload": "js/vendor/jQuery-File-Upload/js/jquery.fileupload",
-        "jquery.iframe-transport": "js/vendor/jQuery-File-Upload/js/jquery.iframe-transport",
-        "jquery.inputnumber": "js/vendor/html5-input-polyfills/number-polyfill",
-        "jquery.immediateDescendents": "coffee/src/jquery.immediateDescendents",
-        "datepair": "js/vendor/timepicker/datepair",
-        "date": "js/vendor/date",
-        "tzAbbr": "js/vendor/tzAbbr",
-        "underscore": "js/vendor/underscore-min",
-        "underscore.string": "js/vendor/underscore.string.min",
-        "backbone": "js/vendor/backbone-min",
-        "backbone.associations": "js/vendor/backbone-associations-min",
-        "tinymce": "js/vendor/tiny_mce/tiny_mce",
-        "jquery.tinymce": "js/vendor/tiny_mce/jquery.tinymce",
-        "xmodule": "/xmodule/xmodule",
-        "xblock": "coffee/src/xblock",
-        "utility": "js/src/utility",
-        "accessibility": "js/src/accessibility_tools",
-        "draggabilly": "js/vendor/draggabilly.pkgd",
+    <nav class="nav-skip">
+      <ul class="list-nav">
+        <li class="nav-item">
+          <a href="#content">${_("Skip to this view's content")}</a>
+        </li>
+      </ul>
+    </nav>
 
-        // externally hosted files
-        "tender": "//edxedge.tenderapp.com/tender_widget",
-        "mathjax": "//edx-static.s3.amazonaws.com/mathjax-MathJax-727332c/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured",
-        // youtube URL does not end in ".js". We add "?noext" to the path so
-        // that require.js adds the ".js" to the query component of the URL,
-        // and leaves the path component intact.
-        "youtube": "//www.youtube.com/player_api?noext"
-    },
-    shim: {
-        "gettext": {
-            exports: "gettext"
+    <script type="text/javascript">
+    window.baseUrl = "${settings.STATIC_URL}";
+    var require = {
+        baseUrl: baseUrl,
+        waitSeconds: 60,
+        paths: {
+            "domReady": "js/vendor/domReady",
+            "gettext": "/i18n",
+            "mustache": "js/vendor/mustache",
+            "codemirror": "js/vendor/codemirror-compressed",
+            "codemirror/stex": "js/vendor/CodeMirror/stex",
+            "jquery": "js/vendor/jquery.min",
+            "jquery.ui": "js/vendor/jquery-ui.min",
+            "jquery.form": "js/vendor/jquery.form",
+            "jquery.markitup": "js/vendor/markitup/jquery.markitup",
+            "jquery.leanModal": "js/vendor/jquery.leanModal.min",
+            "jquery.ajaxQueue": "js/vendor/jquery.ajaxQueue",
+            "jquery.smoothScroll": "js/vendor/jquery.smooth-scroll.min",
+            "jquery.timepicker": "js/vendor/timepicker/jquery.timepicker",
+            "jquery.cookie": "js/vendor/jquery.cookie",
+            "jquery.qtip": "js/vendor/jquery.qtip.min",
+            "jquery.scrollTo": "js/vendor/jquery.scrollTo-1.4.2-min",
+            "jquery.flot": "js/vendor/flot/jquery.flot.min",
+            "jquery.fileupload": "js/vendor/jQuery-File-Upload/js/jquery.fileupload",
+            "jquery.iframe-transport": "js/vendor/jQuery-File-Upload/js/jquery.iframe-transport",
+            "jquery.inputnumber": "js/vendor/html5-input-polyfills/number-polyfill",
+            "jquery.immediateDescendents": "coffee/src/jquery.immediateDescendents",
+            "datepair": "js/vendor/timepicker/datepair",
+            "date": "js/vendor/date",
+            "tzAbbr": "js/vendor/tzAbbr",
+            "underscore": "js/vendor/underscore-min",
+            "underscore.string": "js/vendor/underscore.string.min",
+            "backbone": "js/vendor/backbone-min",
+            "backbone.associations": "js/vendor/backbone-associations-min",
+            "tinymce": "js/vendor/tiny_mce/tiny_mce",
+            "jquery.tinymce": "js/vendor/tiny_mce/jquery.tinymce",
+            "xmodule": "/xmodule/xmodule",
+            "xblock": "coffee/src/xblock",
+            "utility": "js/src/utility",
+            "accessibility": "js/src/accessibility_tools",
+            "draggabilly": "js/vendor/draggabilly.pkgd",
+
+            // externally hosted files
+            "tender": "//edxedge.tenderapp.com/tender_widget",
+            "mathjax": "//edx-static.s3.amazonaws.com/mathjax-MathJax-727332c/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured",
+            // youtube URL does not end in ".js". We add "?noext" to the path so
+            // that require.js adds the ".js" to the query component of the URL,
+            // and leaves the path component intact.
+            "youtube": "//www.youtube.com/player_api?noext"
         },
-        "date": {
-            exports: "Date"
-        },
-        "jquery.ui": {
-            deps: ["jquery"],
-            exports: "jQuery.ui"
-        },
-        "jquery.form": {
-            deps: ["jquery"],
-            exports: "jQuery.fn.ajaxForm"
-        },
-        "jquery.markitup": {
-            deps: ["jquery"],
-            exports: "jQuery.fn.markitup"
-        },
-        "jquery.leanmodal": {
-            deps: ["jquery"],
-            exports: "jQuery.fn.leanModal"
-        },
-        "jquery.ajaxQueue": {
-            deps: ["jquery"],
-            exports: "jQuery.fn.ajaxQueue"
-        },
-        "jquery.smoothScroll": {
-            deps: ["jquery"],
-            exports: "jQuery.fn.smoothScroll"
-        },
-        "jquery.cookie": {
-            deps: ["jquery"],
-            exports: "jQuery.fn.cookie"
-        },
-        "jquery.qtip": {
-            deps: ["jquery"],
-            exports: "jQuery.fn.qtip"
-        },
-        "jquery.scrollTo": {
-            deps: ["jquery"],
-            exports: "jQuery.fn.scrollTo",
-        },
-        "jquery.flot": {
-            deps: ["jquery"],
-            exports: "jQuery.fn.plot"
-        },
-        "jquery.maskedinput": {
-            deps: ["jquery"],
-            exports: "jQuery.fn.mask"
-        },
-        "jquery.fileupload": {
-            deps: ["jquery.iframe-transport"],
-            exports: "jQuery.fn.fileupload"
-        },
-        "jquery.inputnumber": {
-            deps: ["jquery"],
-            exports: "jQuery.fn.inputNumber"
-        },
-        "jquery.tinymce": {
-            deps: ["jquery", "tinymce"],
-            exports: "jQuery.fn.tinymce"
-        },
-        "datepair": {
-            deps: ["jquery.ui", "jquery.timepicker"]
-        },
-        "underscore": {
-            exports: "_"
-        },
-        "backbone": {
-            deps: ["underscore", "jquery"],
-            exports: "Backbone"
-        },
-        "backbone.associations": {
-            deps: ["backbone"],
-            exports: "Backbone.Associations"
-        },
-        "youtube": {
-            exports: "YT"
-        },
-        "codemirror": {
-            exports: "CodeMirror"
-        },
-        "codemirror/stex": {
-            deps: ["codemirror"]
-        },
-        "tinymce": {
-            exports: "tinymce"
-        },
-        "mathjax": {
-            exports: "MathJax",
-            init: function() {
-              MathJax.Hub.Config({
-                tex2jax: {
-                  inlineMath: [
-                    ["\\(","\\)"],
-                    ['[mathjaxinline]','[/mathjaxinline]']
-                  ],
-                  displayMath: [
-                    ["\\[","\\]"],
-                    ['[mathjax]','[/mathjax]']
-                  ]
+        shim: {
+            "gettext": {
+                exports: "gettext"
+            },
+            "date": {
+                exports: "Date"
+            },
+            "jquery.ui": {
+                deps: ["jquery"],
+                exports: "jQuery.ui"
+            },
+            "jquery.form": {
+                deps: ["jquery"],
+                exports: "jQuery.fn.ajaxForm"
+            },
+            "jquery.markitup": {
+                deps: ["jquery"],
+                exports: "jQuery.fn.markitup"
+            },
+            "jquery.leanmodal": {
+                deps: ["jquery"],
+                exports: "jQuery.fn.leanModal"
+            },
+            "jquery.ajaxQueue": {
+                deps: ["jquery"],
+                exports: "jQuery.fn.ajaxQueue"
+            },
+            "jquery.smoothScroll": {
+                deps: ["jquery"],
+                exports: "jQuery.fn.smoothScroll"
+            },
+            "jquery.cookie": {
+                deps: ["jquery"],
+                exports: "jQuery.fn.cookie"
+            },
+            "jquery.qtip": {
+                deps: ["jquery"],
+                exports: "jQuery.fn.qtip"
+            },
+            "jquery.scrollTo": {
+                deps: ["jquery"],
+                exports: "jQuery.fn.scrollTo",
+            },
+            "jquery.flot": {
+                deps: ["jquery"],
+                exports: "jQuery.fn.plot"
+            },
+            "jquery.fileupload": {
+                deps: ["jquery.iframe-transport"],
+                exports: "jQuery.fn.fileupload"
+            },
+            "jquery.inputnumber": {
+                deps: ["jquery"],
+                exports: "jQuery.fn.inputNumber"
+            },
+            "jquery.tinymce": {
+                deps: ["jquery", "tinymce"],
+                exports: "jQuery.fn.tinymce"
+            },
+            "datepair": {
+                deps: ["jquery.ui", "jquery.timepicker"]
+            },
+            "underscore": {
+                exports: "_"
+            },
+            "backbone": {
+                deps: ["underscore", "jquery"],
+                exports: "Backbone"
+            },
+            "backbone.associations": {
+                deps: ["backbone"],
+                exports: "Backbone.Associations"
+            },
+            "youtube": {
+                exports: "YT"
+            },
+            "codemirror": {
+                exports: "CodeMirror"
+            },
+            "codemirror/stex": {
+                deps: ["codemirror"]
+            },
+            "tinymce": {
+                exports: "tinymce"
+            },
+            "mathjax": {
+                exports: "MathJax",
+                init: function() {
+                  MathJax.Hub.Config({
+                    tex2jax: {
+                      inlineMath: [
+                        ["\\(","\\)"],
+                        ['[mathjaxinline]','[/mathjaxinline]']
+                      ],
+                      displayMath: [
+                        ["\\[","\\]"],
+                        ['[mathjax]','[/mathjax]']
+                      ]
+                    }
+                  });
+                  MathJax.Hub.Configured();
                 }
-              });
-              MathJax.Hub.Configured();
+            },
+            "xblock/core": {
+                exports: "XBlock",
+                deps: ["jquery", "jquery.immediateDescendents"]
+            },
+            "xblock/runtime.v1": {
+                exports: "XBlock",
+                deps: ["xblock/core"]
+            },
+
+            "coffee/src/main": {
+                deps: ["coffee/src/ajax_prefix"]
+            },
+            "coffee/src/logger": {
+                exports: "Logger",
+                deps: ["coffee/src/ajax_prefix"]
             }
         },
-        "xblock/core": {
-            exports: "XBlock",
-            deps: ["jquery", "jquery.immediateDescendents"]
-        },
-        "xblock/runtime.v1": {
-            exports: "XBlock",
-            deps: ["xblock/core"]
-        },
-
-        "coffee/src/main": {
-            deps: ["coffee/src/ajax_prefix"]
-        },
-        "coffee/src/logger": {
-            exports: "Logger",
-            deps: ["coffee/src/ajax_prefix"]
+        // load jquery and gettext automatically
+        deps: ["jquery", "gettext"],
+        callback: function() {
+            // load other scripts on every page, after jquery loads
+            require(["js/base", "coffee/src/main", "coffee/src/logger", "datepair", "accessibility"]);
+            // we need "datepair" because it dynamically modifies the page
+            // when it is loaded -- yuck!
         }
-    },
-    // load jquery and gettext automatically
-    deps: ["jquery", "gettext"],
-    callback: function() {
-        // load other scripts on every page, after jquery loads
-        require(["js/base", "coffee/src/main", "coffee/src/logger", "datepair", "accessibility"]);
-        // we need "datepair" because it dynamically modifies the page
-        // when it is loaded -- yuck!
-    }
-};
-</script>
-<script type="text/javascript" src="${static.url("js/vendor/require.js")}"></script>
+    };
+    </script>
+    <script type="text/javascript" src="${static.url("js/vendor/require.js")}"></script>
 
-## js templates
-<script id="system-feedback-tpl" type="text/template">
-  <%static:include path="js/system-feedback.underscore" />
-</script>
+    ## js templates
+    <script id="system-feedback-tpl" type="text/template">
+      <%static:include path="js/system-feedback.underscore" />
+    </script>
 
 
     % if context_course:
-    <script type="text/javascript">
-require(['js/models/course'], function(Course) {
-  window.course = new Course({
-    id: "${context_course.id}",
-    name: "${context_course.display_name_with_default | h}",
-    url_name: "${context_course.location.name | h}",
-    org: "${context_course.location.org | h}",
-    num: "${context_course.location.course | h}",
-    revision: "${context_course.location.revision | h}"
+      <script type="text/javascript">
+  require(['js/models/course'], function(Course) {
+    window.course = new Course({
+      id: "${context_course.id}",
+      name: "${context_course.display_name_with_default | h}",
+      url_name: "${context_course.location.name | h}",
+      org: "${context_course.location.org | h}",
+      num: "${context_course.location.course | h}",
+      revision: "${context_course.location.revision | h}"
+    });
   });
-});
-    </script>
+      </script>
     % endif
 
     <!-- view -->
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 3c53f0f4cf..8e0971acef 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -240,6 +240,13 @@
   padding: 0;
   position: absolute;
   width: 1px;
+
+  &:focus {
+    @extend %ui-depth5;
+    width: auto;
+    height: auto;
+    overflow: visible;
+  }
 }
 
 // extends - content - wrapping
diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index 1e2383cb58..b23f1855dc 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -286,18 +286,7 @@ mark {
   height: 150px;
 }
 
-
-/* show skip links on focus */
-#skip-link a{
-  position:absolute;
-  &:focus {
-    width: auto;
-    height: auto;
-    overflow: visible;
-    background-color: #fff;
-    border: 2px solid black;
-    padding: 3px;
-    z-index: 1005;
-  }
+// ui - skipnav
+.nav-skip {
+  @extend %text-sr;
 }
-
diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss
index 5a5a4fde94..c2c45dd6e0 100644
--- a/lms/static/sass/base/_mixins.scss
+++ b/lms/static/sass/base/_mixins.scss
@@ -83,6 +83,13 @@
   padding: 0;
   position: absolute;
   width: 1px;
+
+  &:focus {
+    @extend %ui-depth5;
+    width: auto;
+    height: auto;
+    overflow: visible;
+  }
 }
 
 // extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
diff --git a/lms/templates/main.html b/lms/templates/main.html
index 41d7266480..e06dc02303 100644
--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -78,7 +78,14 @@
 </head>
 
 <body class="<%block name='bodyclass'/>">
-  <div id="skip-link"><a href="#content-wrapper">Skip to Content</a></div>
+  <nav class="nav-skip">
+    <ul class="list-nav">
+      <li class="nav-item">
+        <a href="#content">${_("Skip to this view's content")}</a>
+      </li>
+    </ul>
+  </nav>
+
   <%include file="mathjax_accessible.html" />
 
 % if theme_enabled():
@@ -87,7 +94,7 @@
   <%include file="navigation.html" />
 % endif
 
-  <section class="content-wrapper" id="content-wrapper">
+  <section class="content-wrapper" id="content">
     ${self.body()}
     <%block name="bodyextra"/>
   </section>
