Add tabindex to main content for improved accessibility

rdhar · rdhar · commit 9995ca5d5fec · 2026-04-12T17:30:54.000+01:00
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -57,7 +57,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 
   <body>
     <Header />
-    <main id="main-content">
+    <main id="main-content" tabindex="-1">
       <article>
         <div class="hero-image">
           {heroImage && <Image width={1020} height={510} src={heroImage} alt="" />}
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -86,7 +86,7 @@ const posts = (await getCollection("blog")).sort((a, b) => b.data.pubDate.valueO
   </head>
   <body>
     <Header />
-    <main id="main-content">
+    <main id="main-content" tabindex="-1">
       <section>
         <ul>
           {
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -12,7 +12,7 @@ import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
   </head>
   <body>
     <Header />
-    <main id="main-content">
+    <main id="main-content" tabindex="-1">
       <h1>🧑‍🚀 Hello, Astronaut!</h1>
       <p>
         Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This template serves as a lightweight, minimally-styled starting point for anyone looking to build a personal website, blog, or portfolio with Astro.

Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ const posts = (await getCollection("blog")).sort((a, b) => b.data.pubDate.valueO`
`86`	`86`	`</head>`
`87`	`87`	`<body>`
`88`	`88`	`<Header />`
`89`		`- <main id="main-content">`
	`89`	`+ <main id="main-content" tabindex="-1">`
`90`	`90`	`<section>`
`91`	`91`	`<ul>`
`92`	`92`	`{`