diff --git a/ppr-ui/src/App.vue b/ppr-ui/src/App.vue
index 4c0a5b80d..3ad052a85 100644
--- a/ppr-ui/src/App.vue
+++ b/ppr-ui/src/App.vue
@@ -3,6 +3,8 @@
     id="app"
     class="app-container"
   >
+    <SkipToMainContent mainContentId="main-content" />
+
     <!-- Dialogs -->
     <BaseDialog
       id="errorDialogApp"
@@ -23,18 +25,25 @@
       :showLoginMenu="false"
     />
 
+    <SbcSystemBanner
+      v-if="bannerText != null"
+      class="mt-n1"
+      :show="bannerText != null"
+      type="warning"
+      icon="''"
+      :message="bannerText"
+      :dismissible="false"
+    />
+
+    <nav v-if="haveData">
+      <Breadcrumb />
+    </nav>
+
     <div class="app-body">
-      <main>
-        <SbcSystemBanner
-          v-if="bannerText != null"
-          class="mt-n1"
-          :show="bannerText != null"
-          type="warning"
-          icon="''"
-          :message="bannerText"
-          :dismissible="false"
-        />
-        <Breadcrumb v-if="haveData" />
+      <main
+        id="main-content"
+        tabindex="-1"
+      >
         <Tombstone
           v-if="haveData"
           :actionInProgress="actionInProgress"
@@ -74,7 +83,7 @@ import SbcHeader from 'sbc-common-components/src/components/SbcHeader.vue'
 import SbcFooter from 'sbc-common-components/src/components/SbcFooter.vue'
 import SbcSystemBanner from 'sbc-common-components/src/components/SbcSystemBanner.vue'
 import * as Dialogs from '@/components/dialogs'
-import { Breadcrumb } from '@/components/common'
+import { Breadcrumb, SkipToMainContent } from '@/components/common'
 import { Tombstone } from '@/components/tombstone'
 import * as Views from '@/views'
 import {
@@ -110,6 +119,7 @@ import { useAuth, useNavigation } from '@/composables'
 export default defineComponent({
   name: 'App',
   components: {
+    SkipToMainContent,
     SbcHeader,
     SbcFooter,
     Breadcrumb,
diff --git a/ppr-ui/src/components/common/SkipToMainContent.vue b/ppr-ui/src/components/common/SkipToMainContent.vue
new file mode 100644
index 000000000..4a2e2cc05
--- /dev/null
+++ b/ppr-ui/src/components/common/SkipToMainContent.vue
@@ -0,0 +1,44 @@
+<template>
+  <a
+    :href="`#${props.mainContentId}`"
+    class="skip-main-content-link py-6 fs-16"
+    @click="skipToContent"
+  >
+    Skip to Main Content
+  </a>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  mainContentId: string
+}>()
+
+// Focuses on main content id and prevents anchor link in url
+const skipToContent = event => {
+  event.preventDefault()
+  const mainContent = document.getElementById(props.mainContentId)
+  if (mainContent) {
+    mainContent.focus()
+  }
+}
+</script>
+
+<style lang="scss">
+.skip-main-content-link {
+  position: absolute;
+  z-index: 100;
+  left: calc(50% - 100px);
+  transform: translateY(-100%);
+  width: 200px;
+  border: 2px solid #000;
+  border-radius: 4px;
+  color: black;
+  text-align: center;
+  text-decoration: none;
+  background: #fff;
+}
+
+.skip-main-content-link:focus {
+  transform: translateY(0%);
+}
+</style>
diff --git a/ppr-ui/src/components/common/index.ts b/ppr-ui/src/components/common/index.ts
index 244257b11..9f14769e7 100644
--- a/ppr-ui/src/components/common/index.ts
+++ b/ppr-ui/src/components/common/index.ts
@@ -41,3 +41,4 @@ export { default as StaffPayment } from './StaffPayment.vue'
 export { default as CollapsibleCard } from './CollapsibleCard.vue'
 export { default as TabbedContainer } from './TabbedContainer.vue'
 export { default as SimpleTable } from './SimpleTable.vue'
+export { default as SkipToMainContent } from './SkipToMainContent.vue'
diff --git a/ppr-ui/tests/unit/App.spec.ts b/ppr-ui/tests/unit/App.spec.ts
index 660d51abe..151437944 100644
--- a/ppr-ui/tests/unit/App.spec.ts
+++ b/ppr-ui/tests/unit/App.spec.ts
@@ -5,7 +5,7 @@ import App from '@/App.vue'
 import SbcHeader from 'sbc-common-components/src/components/SbcHeader.vue'
 import SbcFooter from 'sbc-common-components/src/components/SbcFooter.vue'
 import { Tombstone } from '@/components/tombstone'
-import { Breadcrumb } from '@/components/common'
+import { Breadcrumb, SkipToMainContent } from '@/components/common'
 import {
   mockedDisableAllUserSettingsResponse,
   mockedFinancingStatementAll,
@@ -105,6 +105,7 @@ describe('App component basic rendering normal account', () => {
 
   it('renders the sub-components properly', async () => {
     expect(wrapper.findComponent(App).exists()).toBe(true)
+    expect(wrapper.findComponent(SkipToMainContent).exists()).toBe(true)
     expect(wrapper.findComponent(SbcHeader).exists()).toBe(true)
     expect(wrapper.findComponent(SbcFooter).exists()).toBe(true)
     expect(wrapper.findComponent(Tombstone).exists()).toBe(false)
@@ -126,4 +127,3 @@ describe('App component basic rendering normal account', () => {
     expect(store.getStateModel.userInfo.feeSettings.serviceFee).toBe(1)
   })
 })
-