diff --git a/src/App.tsx b/src/App.tsx
index 4538c5e..ed2771b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -67,6 +67,12 @@ function App() {
 
   return (
     <div className="flex h-screen bg-gray-900 text-white">
+      <a
+        href="#main-content"
+        className="sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:z-50 focus-visible:p-4 focus-visible:bg-blue-600 focus-visible:text-white rounded-br-md"
+      >
+        Skip to main content
+      </a>
       <Sidebar
         effectCategories={effectCategories}
         selectedEffect={selectedEffect}
diff --git a/src/components/ContentView.tsx b/src/components/ContentView.tsx
index 2e65555..04a8285 100644
--- a/src/components/ContentView.tsx
+++ b/src/components/ContentView.tsx
@@ -36,7 +36,7 @@ export const ContentView: React.FC<ContentViewProps> = ({
   console.log(`[ContentView] Rendering effect: ${selectedEffect || 'None'}, isLoading: ${isLoading}`);
 
   return (
-    <div className="flex-1 flex flex-col p-4">
+    <main id="main-content" tabIndex={-1} className="flex-1 flex flex-col p-4 focus:outline-none">
       <div className="flex justify-between items-center mb-4">
         <h1 className="text-2xl font-bold">
           {effectData ? effectData.name : 'Select an Effect'}
@@ -100,6 +100,6 @@ export const ContentView: React.FC<ContentViewProps> = ({
           )}
         </div>
       </div>
-    </div>
+    </main>
   );
 };