a11y

Co-Authored-By: Vince Castillo, PhD <154394560+professorcastillo@users.noreply.github.com>

src/routes/(app)/+layout.svelte

@@ -517,7 +517,9 @@
 				<Sidebar />
 
 				{#if loaded}
-					<slot />
+					<main id="main-content" class="contents">
+						<slot />
+					</main>
 				{:else}
 					<div
 						class="w-full flex-1 h-full flex items-center justify-center {$showSidebar

src/routes/+layout.svelte

@@ -1307,6 +1307,13 @@
 	/>
 </svelte:head>
 
+<a
+	href="#main-content"
+	class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[9999] focus:rounded-lg focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-gray-900 focus:shadow-lg dark:focus:bg-gray-800 dark:focus:text-gray-100"
+>
+	{$i18n.t('Skip to main content')}
+</a>
+
 {#if showRefresh}
 	<div class=" py-5">
 		<Spinner className="size-5" />