diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml
index 19147759e6..efc125d6d5 100644
--- a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml
+++ b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml
@@ -878,6 +878,8 @@
Header
system field
Last Updated
+ Skip to menu
+ Skip to content
Blue
diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
index 67da5429bd..78fcd0f13d 100644
--- a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
+++ b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
@@ -908,6 +908,8 @@
Header
system field
Last Updated
+ Skip to menu
+ Skip to content
Blue
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
index a184967ca2..71171c2a73 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
@@ -127,6 +127,20 @@
}
};
+ scope.skipToMenu = function() {
+ document.querySelector('#applications a').focus();
+ };
+
+ scope.skipToContent = function() {
+ var focusableElements = document.querySelectorAll('.umb-app-content a, .umb-app-content button');
+ for(var i=0; i < focusableElements.length; i++){
+ if(focusableElements[i].offsetParent !== null) {
+ focusableElements[i].focus();
+ break;
+ }
+ }
+ };
+
}
var directive = {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
index a9b9cf6936..bc02705187 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
@@ -110,3 +110,27 @@
.umb-app-header__button:focus .umb-app-header__action-icon {
opacity: 1;
}
+
+.umb-app-header__skip-button {
+ position: absolute;
+ top: 7.5px;
+ left: 5px;
+ background-color: #FFF;
+ border: 1px solid #000;
+ display: block;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px,1px,1px,1px);
+ border-radius: 3px;
+ z-index: 1;
+}
+
+.umb-app-header__skip-button:focus {
+ height: auto;
+ width: auto;
+ clip: auto;
+ padding: 10px;
+ line-height: normal;
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
index 9d673ce8bb..fae3543429 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
@@ -1,5 +1,9 @@