feat(a11y): implement screen reader support and accessibility optimizations

app/[locale]/layout.tsx

@@ -3,6 +3,7 @@ import Header from '@/components/Header';
 import JsonLd from '@/components/JsonLd';
 import AnalyticsProvider from '@/components/analytics/AnalyticsProvider';
 import ScrollDepthTracker from '@/components/analytics/ScrollDepthTracker';
+import SkipLink from '@/components/SkipLink';
 import CMSConnectivityNotice from '@/components/CMSConnectivityNotice';
 import { RecordModeProvider } from '@/components/record-mode/RecordModeContext';
 import { RecordModeVisuals } from '@/components/record-mode/RecordModeVisuals';
@@ -100,9 +101,16 @@ export default async function Layout(props: {
         <NextIntlClientProvider messages={messages} locale={safeLocale}>
           <RecordModeProvider isEnabled={recordModeEnabled}>
             <RecordModeVisuals>
+              <SkipLink />
               <JsonLd />
               <Header />
-              <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
+              <main
+                id="main-content"
+                className="flex-grow animate-fade-in overflow-visible"
+                tabIndex={-1}
+              >
+                {children}
+              </main>
               <Footer />
             </RecordModeVisuals>