diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index ad5ac589d0f..7f5583c917a 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -376,3 +376,19 @@ table {
 }
 
 .hide-bottom-border { border-bottom: none !important; }
+
+.gl-accessibility {
+  &:focus {
+    top: 1px;
+    left: 1px;
+    width: auto;
+    height: 100%;
+    line-height: 50px;
+    padding: 0 10px;
+    clip: auto;
+    text-decoration: none;
+    color: $gl-title-color;
+    background: $gray-light;
+    z-index: 1;
+  }
+}
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 8aefdcb3d9b..a9a0b149049 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -26,5 +26,5 @@
     = render "layouts/flash"
     = yield :flash_message
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
-      .content
+      .content{ id: "content-body" }
         = yield
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 7a9859262f7..5456be77aab 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,4 +1,5 @@
 %header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
+  %a{ href: "#content-body", tabindex: "1", class: "sr-only gl-accessibility" } Skip to content
   %div{ class: "container-fluid" }
     .header-content
       %button.side-nav-toggle{ type: 'button', "aria-label" => "Toggle global navigation" }