feat(a11y): improve accessibility

src/components/JournalList.astro

@@ -32,6 +32,7 @@ const { entries } = Astro.props;
 								alt={data.title}
 								formats={['avif', 'webp']}
 								height="937"
+								role="presentation"
 								src={data.cover}
 								width="1500"
 							/>

src/components/ProjectContent.astro

@@ -14,6 +14,7 @@ const { project } = Astro.props;
 ---
 
 <small
+	aria-label="Categories"
 	class="project-categories dark:text-white/0.2 text-black/0.8 block text-3 leading-4 small-caps md:p-0"
 >
 	{project.data.categories.join(' / ')}

src/components/ProjectImage.astro

@@ -19,6 +19,7 @@ const { project } = Astro.props;
 		) : (
 			<Image
 				alt={project.data.title}
+				aria-label={project.data.title}
 				class="[&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
 				noMargin
 				src={project.data.image.src}

src/components/RSSLink.astro

@@ -5,7 +5,7 @@ import Link from './Link.astro';
 import Subsubheadline from './Subsubheadline.astro';
 ---
 
-<aside class="grow mbe-5 sm:mbe-0">
+<aside class="grow mbe-5 sm:mbe-0" aria-label="Subscribe to RSS">
 	<Subsubheadline as="h2">Stay up to date.</Subsubheadline>
 	<p>
 		<Rss aria-hidden="true" className="icon inline h-icon w-icon" />{' '}

src/components/SocialLinks.astro

@@ -19,7 +19,7 @@ import Link from '../components/Link.astro';
 		<Mail aria-hidden="true" className="icon h-icon-small w-icon-small" />
 	</Link>
 	<Link
-		aria-label="𝕏"
+		aria-label="Twitter/X"
 		class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center transition-transform duration-500 ease-in-out hover:scale-125 focus:scale-125"
 		data-umami-event="𝕏"
 		href="https://x.com/kogakure"

src/layouts/AboutLayout.astro

@@ -37,7 +37,11 @@ const schema = JSON.stringify({
 		slot="before-content"
 		class="col-start-1 col-end-12 md:col-start-3 md:col-end-10 xl:col-start-15 xl:col-end-18 xl:row-start-2 xl:-scale-x-100 3xl:col-start-14 3xl:col-end-17"
 	>
-		<Image alt="Stefan Imhoff" src="/assets/images/portrait-stefan-imhoff-2025.webp" />
+		<Image
+			alt="Stefan Imhoff"
+			role="presentation"
+			src="/assets/images/portrait-stefan-imhoff-2025.webp"
+		/>
 	</div>
 	<slot />
 	{

src/pages/index.astro

@@ -50,7 +50,12 @@ rssPosts.sort(sortMarkdownByDate);
 	<div
 		class="col-start-1 col-end-19 md:col-start-1 md:col-end-11 xl:col-end-11 [&_div]:!border-x-0 [&_div]:!mbe-0 [&_div]:md:!border-s-0"
 	>
-		<Image alt="Bonsai" loading="eager" src="/assets/images/cover/bonsai.webp" />
+		<Image
+			alt="Bonsai"
+			loading="eager"
+			role="presentation"
+			src="/assets/images/cover/bonsai.webp"
+		/>
 	</div>
 
 	<article
@@ -82,6 +87,7 @@ rssPosts.sort(sortMarkdownByDate);
 	<article
 		class="min-[1794px]:[&_li:block col-start-2 col-end-18 grid w-full grid-cols-18 gap-y-gap mbe-12 min-[1097px]:[&_li:nth-child(n+5)]:hidden min-[1410px]:[&_li:nth-child(n+5)]:block min-[1411px]:[&_li:nth-child(n+6)]:hidden min-[1793px]:[&_li:nth-child(n+6)]:block"
 		data-pagefind-ignore
+		aria-label="Latest essays"
 	>
 		<JournalList entries={formattedLatest} />
 	</article>

src/pages/journal.astro

@@ -34,7 +34,7 @@ const description = 'I am writing essays about various topics in this Journal.';
 	>
 		<Intro components={mapping} />
 	</article>
-	<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
+	<aside aria-label="Filter by tags" class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
 		{uniqueTags.map((tag) => <Tag href={`/tag/${tag}/`}>{tag}</Tag>)}
 	</aside>
 	<nav class="col-start-1 col-end-18" aria-label="Journal">