From d985dadfe9cb4fe50cfc046aacb20fa61188d37e Mon Sep 17 00:00:00 2001
From: ckie <git-525ff67@ckie.dev>
Date: Sat, 5 Oct 2024 22:07:58 +0300
Subject: [PATCH] alt text

---
 src/lib/Highlight.svelte |  4 +++-
 src/routes/+page.svelte  | 11 ++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/Highlight.svelte b/src/lib/Highlight.svelte
index 2ed64e6..a34077c 100644
--- a/src/lib/Highlight.svelte
+++ b/src/lib/Highlight.svelte
@@ -5,11 +5,13 @@
 	export let language;
 	export let code;
 	export let slice = true;
+	export let alt;
 
 	let renderedCode;
 	$: renderedCode = slice ? code.replace(/#<hidden>[^]*?#<\/hidden>/, "") : code;;
 </script>
 
-<div class="whitespace-pre-wrap font-mono">
+<p class="sr-only">{alt}</p>
+<div class="whitespace-pre-wrap font-mono" aria-hidden title={alt}>
 	<Highlight {language} code={renderedCode} />
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a5a525c..65b53de 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -39,8 +39,11 @@
 			<div class="clear-left text-xl">
 				Gain certainty in your deployed system configuration by
 				replacing your opaque state with code.
-				<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow">
-					<Highlight language={nix} code={demo1} />
+				<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow mt-2">
+					<Highlight
+						language={nix} code={demo1}
+						alt="Definition of a simple {DISTRO} system running MediaWiki with the HTTP port opened."
+					/>
 				</div>
 			</div>
 			<div class="text-4xl flex justify-center items-center h-full">
@@ -51,7 +54,9 @@
 					<div><span class="text-zinc-700">http://</span><b>localhost</b>:3000</div>
 					<span class="text-blue-700 font-black text-lg select-none -mt-[2px]">⨯</span>
 				</div>
-				<enhanced:img src="./demo1/mediawiki.png?format=png"  />
+				<enhanced:img src="./demo1/mediawiki.png?format=png"
+					alt="The main page of a brand-new MediaWiki instance hosted on the VM. It starts: 'MediaWiki has been installed.'"
+				/>
 			</div>
 		</div>
 	</div>