diff --git a/package-lock.json b/package-lock.json
index 1687022fb7..ddfde9ea0d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,8 @@
         "vue": "^2.7.14",
         "vue-color": "^2.8.1",
         "vue-frag": "^1.4.3",
-        "vue2-datepicker": "^3.11.0"
+        "vue2-datepicker": "^3.11.0",
+        "vue2-teleport": "^1.0.1"
       },
       "devDependencies": {
         "@babel/plugin-syntax-import-assertions": "^7.22.5",
@@ -29981,6 +29982,11 @@
         "vue": "^2.5.0"
       }
     },
+    "node_modules/vue2-teleport": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue2-teleport/-/vue2-teleport-1.0.1.tgz",
+      "integrity": "sha512-hbY/Q0x8qXGFxo6h4KU4YYesUcN+uUjliqqC0PoNSgpcbS2QRb3qXi+7XMTgLYs0a8i7o1H6Mu43UV4Vbgkhgw=="
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
diff --git a/package.json b/package.json
index 1f50fbf86c..219928e2df 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,8 @@
     "vue": "^2.7.14",
     "vue-color": "^2.8.1",
     "vue-frag": "^1.4.3",
-    "vue2-datepicker": "^3.11.0"
+    "vue2-datepicker": "^3.11.0",
+    "vue2-teleport": "^1.0.1"
   },
   "engines": {
     "node": "^20.0.0",
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index 35edba847c..f2d657d8d8 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -93,6 +93,9 @@ export default {
 		NcAppNavigationToggle,
 	},
 
+	// Injected from NcContent
+	inject: ['setAppNavigation'],
+
 	props: {
 		/**
 		 * The aria label to describe the navigation
@@ -135,6 +138,7 @@ export default {
 	},
 
 	mounted() {
+		this.setAppNavigation(true)
 		subscribe('toggle-navigation', this.toggleNavigationByEventBus)
 		// Emit an event with the initial state of the navigation
 		emit('navigation-toggled', {
@@ -150,6 +154,7 @@ export default {
 		this.toggleFocusTrap()
 	},
 	unmounted() {
+		this.setAppNavigation(false)
 		unsubscribe('toggle-navigation', this.toggleNavigationByEventBus)
 		this.focusTrap.deactivate()
 	},
@@ -161,6 +166,14 @@ export default {
 		 * @param {boolean} [state] set the state instead of inverting the current one
 		 */
 		toggleNavigation(state) {
+			// Early return if alreay in that state
+			if (this.open === state) {
+				emit('navigation-toggled', {
+					open: this.open,
+				})
+				return
+			}
+
 			this.open = (typeof state === 'undefined') ? !this.open : state
 			const bodyStyles = getComputedStyle(document.body)
 			const animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100
diff --git a/src/components/NcContent/NcContent.vue b/src/components/NcContent/NcContent.vue
index 225a987f13..64acc7ea76 100644
--- a/src/components/NcContent/NcContent.vue
+++ b/src/components/NcContent/NcContent.vue
@@ -28,6 +28,8 @@ This component provides the default container of all apps.
 It _MUST_ be used as the main wrapper of your app.
 It includes the Navigation, the App content and the Sidebar.
 
+It also will set the skip content buttons needed for accessibility.
+
 ### Standard usage
 
 ```vue
@@ -72,18 +74,68 @@ It includes the Navigation, the App content and the Sidebar.
 	<div id="content-vue"
 		:class="`app-${appName.toLowerCase()}`"
 		class="content">
+		<Teleport to="#skip-actions">
+			<NcButton type="primary" href="#app-content-vue">
+				{{ t('Skip to main content') }}
+			</NcButton>
+			<NcButton v-show="hasAppNavigation"
+				type="primary"
+				href="#app-navigation-vue"
+				@click.prevent="openAppNavigation">
+				{{ t('Skip to app navigation') }}
+			</NcButton>
+		</Teleport>
 		<slot />
 	</div>
 </template>
 
 <script>
+import { emit } from '@nextcloud/event-bus'
+import { t } from '../../l10n.js'
+
+import NcButton from '../NcButton/NcButton.vue'
+// TODO: This is built-in for vue3 just drop the import
+import Teleport from 'vue2-teleport'
+
 export default {
+	name: 'NcContent',
+	components: {
+		NcButton,
+		Teleport,
+	},
+	provide() {
+		return {
+			setAppNavigation: this.setAppNavigation,
+		}
+	},
 	props: {
 		appName: {
 			type: String,
 			required: true,
 		},
 	},
+	data() {
+		return {
+			hasAppNavigation: false,
+		}
+	},
+	beforeMount() {
+		const container = document.getElementById('skip-actions')
+		if (container) {
+			// clear default buttons
+			container.innerHTML = ''
+		}
+	},
+	methods: {
+		t,
+		openAppNavigation() {
+			emit('toggle-navigation', { open: true })
+			this.$nextTick(() => { window.location.hash = 'app-navigation-vue' })
+		},
+		setAppNavigation(value) {
+			this.hasAppNavigation = value
+		},
+	},
 }
 </script>