diff --git a/resources/js/components/AppContent.vue b/resources/js/components/AppContent.vue
index 9b6f13f7..df1ccc81 100644
--- a/resources/js/components/AppContent.vue
+++ b/resources/js/components/AppContent.vue
@@ -17,6 +17,7 @@ const className = computed(() => props.class);
     </SidebarInset>
     <main
         v-else
+        id="main"
         class="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl"
         :class="className"
     >
diff --git a/resources/js/components/AppSkipLink.vue b/resources/js/components/AppSkipLink.vue
new file mode 100644
index 00000000..30ae00ce
--- /dev/null
+++ b/resources/js/components/AppSkipLink.vue
@@ -0,0 +1,9 @@
+<template>
+    <a
+        href="#main"
+        class="absolute -top-14 left-4 z-[100] rounded-md bg-black px-4 py-2 text-sm font-semibold text-white shadow-lg transition-all duration-300 ease-in-out focus:top-2 focus:outline-2 focus:ring-primary-500 focus:outline-offset-4 dark:bg-primary dark:text-black dark:focus:outline-sidebar-ring motion-reduce:transition-none"
+    >
+        Skip to Main Content
+    </a>
+</template>
+
diff --git a/resources/js/components/ui/sidebar/SidebarInset.vue b/resources/js/components/ui/sidebar/SidebarInset.vue
index 947331a1..18796722 100644
--- a/resources/js/components/ui/sidebar/SidebarInset.vue
+++ b/resources/js/components/ui/sidebar/SidebarInset.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
 
 <template>
   <main
+    id="main"
     data-slot="sidebar-inset"
     :class="cn(
       'bg-background relative flex w-full flex-1 flex-col',
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 77c93964..7b691d57 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
+import AppSkipLink from '@/components/AppSkipLink.vue';
 import type { BreadcrumbItemType } from '@/types';
 
 interface Props {
@@ -12,6 +13,7 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
+    <AppSkipLink />
     <AppLayout :breadcrumbs="breadcrumbs">
         <slot />
     </AppLayout>
diff --git a/resources/js/layouts/settings/Layout.vue b/resources/js/layouts/settings/Layout.vue
index da3c3dee..c10fe61d 100644
--- a/resources/js/layouts/settings/Layout.vue
+++ b/resources/js/layouts/settings/Layout.vue
@@ -41,7 +41,7 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
 
         <div class="flex flex-col lg:flex-row lg:space-x-12">
             <aside class="w-full max-w-xl lg:w-48">
-                <nav class="flex flex-col space-y-1 space-x-0">
+                <nav class="flex flex-col space-y-1 space-x-0" aria-label="Settings">
                     <Button
                         v-for="item in sidebarNavItems"
                         :key="toUrl(item.href)"
diff --git a/resources/js/pages/settings/Appearance.vue b/resources/js/pages/settings/Appearance.vue
index 5cd1a318..687e60ff 100644
--- a/resources/js/pages/settings/Appearance.vue
+++ b/resources/js/pages/settings/Appearance.vue
@@ -21,6 +21,8 @@ const breadcrumbItems: BreadcrumbItem[] = [
     <AppLayout :breadcrumbs="breadcrumbItems">
         <Head title="Appearance settings" />
 
+        <h1 class="sr-only">Appearance Settings</h1>
+
         <SettingsLayout>
             <div class="space-y-6">
                 <HeadingSmall
diff --git a/resources/js/pages/settings/Password.vue b/resources/js/pages/settings/Password.vue
index be330910..0dd3390f 100644
--- a/resources/js/pages/settings/Password.vue
+++ b/resources/js/pages/settings/Password.vue
@@ -28,6 +28,8 @@ const currentPasswordInput = ref<HTMLInputElement | null>(null);
     <AppLayout :breadcrumbs="breadcrumbItems">
         <Head title="Password settings" />
 
+        <h1 class="sr-only">Password Settings</h1>
+
         <SettingsLayout>
             <div class="space-y-6">
                 <HeadingSmall
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index 082b7a6e..f9c59c24 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -36,6 +36,8 @@ const user = page.props.auth.user;
     <AppLayout :breadcrumbs="breadcrumbItems">
         <Head title="Profile settings" />
 
+        <h1 class="sr-only">Profile Settings</h1>
+
         <SettingsLayout>
             <div class="flex flex-col space-y-6">
                 <HeadingSmall
diff --git a/resources/js/pages/settings/TwoFactor.vue b/resources/js/pages/settings/TwoFactor.vue
index dee1a36e..9ddc8484 100644
--- a/resources/js/pages/settings/TwoFactor.vue
+++ b/resources/js/pages/settings/TwoFactor.vue
@@ -41,6 +41,9 @@ onUnmounted(() => {
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head title="Two-Factor Authentication" />
+
+        <h1 class="sr-only">Two-Factor Authentication Settings</h1>
+
         <SettingsLayout>
             <div class="space-y-6">
                 <HeadingSmall
