diff --git a/apps/site/components/withNavBar.tsx b/apps/site/components/withNavBar.tsx
index f62aaca997899..9a9ace98e1eb0 100644
--- a/apps/site/components/withNavBar.tsx
+++ b/apps/site/components/withNavBar.tsx
@@ -2,6 +2,7 @@
 
 import LanguageDropdown from '@node-core/ui-components/Common/LanguageDropDown';
 import Skeleton from '@node-core/ui-components/Common/Skeleton';
+import SkipToContentButton from '@node-core/ui-components/Common/SkipToContentButton';
 import NavBar from '@node-core/ui-components/Containers/NavBar';
 // TODO(@AvivKeller): I don't like that we are importing styles from another module
 import styles from '@node-core/ui-components/Containers/NavBar/index.module.css';
@@ -53,6 +54,10 @@ const WithNavBar: FC = () => {
 
   return (
     <div>
+      <SkipToContentButton>
+        {t('components.common.skipToContent')}
+      </SkipToContentButton>
+
       <WithBanner section="index" />
 
       <NavBar
diff --git a/apps/site/layouts/About.tsx b/apps/site/layouts/About.tsx
index 90ea86349a9d3..ea6260b27f1f5 100644
--- a/apps/site/layouts/About.tsx
+++ b/apps/site/layouts/About.tsx
@@ -16,7 +16,9 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
       <WithSidebar navKeys={['about', 'getInvolved']} />
 
       <div>
-        <main>{children}</main>
+        <main id="main" tabIndex={-1}>
+          {children}
+        </main>
 
         <WithMetaBar />
       </div>
diff --git a/apps/site/layouts/ArticlePage.tsx b/apps/site/layouts/ArticlePage.tsx
index b8369a7344ab2..37216ae07be11 100644
--- a/apps/site/layouts/ArticlePage.tsx
+++ b/apps/site/layouts/ArticlePage.tsx
@@ -15,7 +15,9 @@ const ArticlePageLayout: FC<PropsWithChildren> = ({ children }) => (
       <WithSidebar navKeys={[]} />
 
       <div>
-        <main>{children}</main>
+        <main id="main" tabIndex={-1}>
+          {children}
+        </main>
 
         <WithMetaBar />
       </div>
diff --git a/apps/site/layouts/Blog.tsx b/apps/site/layouts/Blog.tsx
index 216e793bebb12..17fb23029e896 100644
--- a/apps/site/layouts/Blog.tsx
+++ b/apps/site/layouts/Blog.tsx
@@ -54,7 +54,7 @@ const BlogLayout: FC = () => {
       <WithNavBar />
 
       <div className={styles.blogLayout}>
-        <main>
+        <main id="main" tabIndex={-1}>
           <BlogHeader category={blogData.category} />
 
           <WithBlogCategories
diff --git a/apps/site/layouts/Default.tsx b/apps/site/layouts/Default.tsx
index 9fae21760d7cd..14fe4a4cb5134 100644
--- a/apps/site/layouts/Default.tsx
+++ b/apps/site/layouts/Default.tsx
@@ -14,7 +14,9 @@ const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
       <WithSidebar navKeys={[]} />
 
       <div>
-        <main>{children}</main>
+        <main id="main" tabIndex={-1}>
+          {children}
+        </main>
       </div>
     </Article>
 
diff --git a/apps/site/layouts/Download.tsx b/apps/site/layouts/Download.tsx
index cfd6501b10678..dee2e309dc0fa 100644
--- a/apps/site/layouts/Download.tsx
+++ b/apps/site/layouts/Download.tsx
@@ -18,7 +18,7 @@ const DownloadLayout: FC<PropsWithChildren> = async ({ children }) => {
       <WithNavBar />
 
       <div className={styles.downloadLayout}>
-        <main>
+        <main id="main" tabIndex={-1}>
           <h1>{frontmatter.title}</h1>
 
           <WithDownloadSection releases={releases}>
diff --git a/apps/site/layouts/DownloadArchive.tsx b/apps/site/layouts/DownloadArchive.tsx
index 8096582ea79ef..e9e43288e5fc6 100644
--- a/apps/site/layouts/DownloadArchive.tsx
+++ b/apps/site/layouts/DownloadArchive.tsx
@@ -10,7 +10,9 @@ const DownloadArchiveLayout: FC<PropsWithChildren> = ({ children }) => (
     <WithNavBar />
 
     <div className={styles.downloadLayout}>
-      <main>{children}</main>
+      <main id="main" tabIndex={-1}>
+        {children}
+      </main>
     </div>
 
     <WithFooter />
diff --git a/apps/site/layouts/GlowingBackdrop.tsx b/apps/site/layouts/GlowingBackdrop.tsx
index efe869ead99d6..bbfb16430d05d 100644
--- a/apps/site/layouts/GlowingBackdrop.tsx
+++ b/apps/site/layouts/GlowingBackdrop.tsx
@@ -22,6 +22,8 @@ const GlowingBackdropLayout: FC<
       <GlowingBackdrop />
 
       <main
+        id="main"
+        tabIndex={-1}
         className={classNames({
           [styles.homeLayout]: kind === 'home',
         })}
diff --git a/apps/site/layouts/Learn.tsx b/apps/site/layouts/Learn.tsx
index cc297de76b871..1263e1f1adb4f 100644
--- a/apps/site/layouts/Learn.tsx
+++ b/apps/site/layouts/Learn.tsx
@@ -17,7 +17,7 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
       <WithSideBar navKeys={['learn']} />
 
       <div>
-        <main>
+        <main id="main" tabIndex={-1}>
           {children}
 
           <WithSidebarCrossLinks navKey="learn" />
diff --git a/apps/site/layouts/Post.tsx b/apps/site/layouts/Post.tsx
index b638b1ef8c5d5..407fed6230241 100644
--- a/apps/site/layouts/Post.tsx
+++ b/apps/site/layouts/Post.tsx
@@ -27,7 +27,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
 
       <div className={styles.contentLayout}>
         <div className={styles.postLayout}>
-          <main>
+          <main id="main" tabIndex={-1}>
             {type === 'vulnerability' && <EOLAlert />}
 
             <h1>{frontmatter.title}</h1>
diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
index 50a030f600447..b4e0f6728a43a 100644
--- a/packages/i18n/src/locales/en.json
+++ b/packages/i18n/src/locales/en.json
@@ -268,7 +268,8 @@
       "themeToggle": {
         "light": "Switch to Light Mode",
         "dark": "Switch to Dark Mode"
-      }
+      },
+      "skipToContent": "Skip to content"
     },
     "metabar": {
       "lastUpdated": "Last Updated",
diff --git a/packages/ui-components/src/Common/SkipToContentButton/index.module.css b/packages/ui-components/src/Common/SkipToContentButton/index.module.css
new file mode 100644
index 0000000000000..cd8457908d2d3
--- /dev/null
+++ b/packages/ui-components/src/Common/SkipToContentButton/index.module.css
@@ -0,0 +1,19 @@
+@reference "../../styles/index.css";
+
+.skipToContent {
+  @apply sr-only
+    focus:not-sr-only
+    focus:absolute
+    focus:top-4
+    focus:left-4
+    focus:z-50
+    focus:rounded
+    focus:bg-green-600
+    focus:px-4
+    focus:py-2
+    focus:text-white
+    focus:ring-2
+    focus:ring-green-500
+    focus:outline-none
+    dark:focus:ring-green-400;
+}
diff --git a/packages/ui-components/src/Common/SkipToContentButton/index.stories.tsx b/packages/ui-components/src/Common/SkipToContentButton/index.stories.tsx
new file mode 100644
index 0000000000000..97c9775478c0a
--- /dev/null
+++ b/packages/ui-components/src/Common/SkipToContentButton/index.stories.tsx
@@ -0,0 +1,14 @@
+import SkipToContentButton from '#ui/Common/SkipToContentButton';
+
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
+
+type Story = StoryObj<typeof SkipToContentButton>;
+type Meta = MetaObj<typeof SkipToContentButton>;
+
+export const Default: Story = {
+  args: {
+    children: 'Skip to content',
+  },
+};
+
+export default { component: SkipToContentButton } as Meta;
diff --git a/packages/ui-components/src/Common/SkipToContentButton/index.tsx b/packages/ui-components/src/Common/SkipToContentButton/index.tsx
new file mode 100644
index 0000000000000..6f4024eb63130
--- /dev/null
+++ b/packages/ui-components/src/Common/SkipToContentButton/index.tsx
@@ -0,0 +1,21 @@
+import type { FC, AnchorHTMLAttributes, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type SkipToContentButtonProps = PropsWithChildren<
+  AnchorHTMLAttributes<HTMLAnchorElement>
+>;
+
+const SkipToContentButton: FC<SkipToContentButtonProps> = ({
+  children,
+  href = '#main',
+  ...props
+}) => {
+  return (
+    <a href={href} className={styles.skipToContent} {...props}>
+      {children}
+    </a>
+  );
+};
+
+export default SkipToContentButton;