[docs] fix small a11y issues (#8074)

- duplicate text in showcase/deploy links - make banner a <header> - move skip link in front of banner - treat focusing deployment links the same as hovering them - properly label search input - make CTRL+K a div instead of a label
sveltejs · Dec 12, 2022 · ab5f1c1 · ab5f1c1
1 parent 755096e
commit ab5f1c1
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 22 deletions.
diff --git a/sites/kit.svelte.dev/src/lib/search/Search.svelte b/sites/kit.svelte.dev/src/lib/search/Search.svelte
@@ -7,7 +7,6 @@
 
 <form class="search-container" action="/search">
 	<input
-		id="search"
 		value={q}
 		on:input={(e) => {
 			$searching = true;
@@ -19,13 +18,14 @@
 		type="search"
 		name="q"
 		placeholder="Search"
+		aria-label="Search"
 		spellcheck="false"
 	/>
 
 	{#if browser}
-		<label for="#search">
+		<div class="shortcut">
 			<kbd>{navigator.platform === 'MacIntel' ? '⌘' : 'Ctrl'}</kbd> <kbd>K</kbd>
-		</label>
+		</div>
 	{/if}
 </form>
 
@@ -62,7 +62,7 @@
 		color: var(--sk-text-3);
 	}
 
-	input:focus + label {
+	input:focus + .shortcut {
 		display: none;
 	}
 
@@ -71,7 +71,7 @@
 		text-transform: uppercase;
 	}
 
-	label {
+	.shortcut {
 		color: var(--sk-text-3);
 		position: absolute;
 		top: calc(50% - 0.9rem);
@@ -100,7 +100,7 @@
 			width: 11rem;
 		}
 
-		label {
+		.shortcut {
 			padding: 0 1.6rem 0 0;
 		}
 

diff --git a/sites/kit.svelte.dev/src/routes/Banner.svelte b/sites/kit.svelte.dev/src/routes/Banner.svelte
@@ -13,13 +13,13 @@
 
 <svelte:window on:scroll={handle_scroll} />
 
-<div class="banner" class:visible>
+<header class="banner" class:visible>
 	<p>
 		<a href="https://www.youtube.com/watch?v=N4BRVkQVoMc">
 			<strong>Dec 14:</strong> a Svelte Radio live special 👀
 		</a>
 	</p>
-</div>
+</header>
 
 <style>
 	.banner {

diff --git a/sites/kit.svelte.dev/src/routes/home/Deployment.svelte b/sites/kit.svelte.dev/src/routes/home/Deployment.svelte
@@ -34,7 +34,7 @@
 				href="https://github.com/sveltejs/kit/tree/master/packages/adapter-static"
 				class="invert"
 			>
-				<img src={html5} alt="HTML5 logo" />
+				<img src={html5} alt="" />
 				<span><span class="large">Static</span> HTML</span>
 			</a>
 			<a
@@ -43,7 +43,7 @@
 				href="https://github.com/sveltejs/kit/tree/master/packages/adapter-node"
 				class="invert"
 			>
-				<img src={node} alt="Node logo" />
+				<img src={node} alt="" />
 				<span>Node.js</span>
 			</a>
 			<a
@@ -52,23 +52,23 @@
 				href="https://github.com/sveltejs/kit/tree/master/packages/adapter-vercel"
 				class="invert invert-hover"
 			>
-				<img src={vercel} alt="Vercel logo" style="transform: translate(0,-0.2rem)" />
+				<img src={vercel} alt="" style="transform: translate(0,-0.2rem)" />
 				<span>Vercel</span>
 			</a>
 			<a
 				target="_blank"
 				rel="noreferrer"
 				href="https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify"
 			>
-				<img src={netlify} alt="Netlify logo" />
+				<img src={netlify} alt="" />
 				<span>Netlify</span>
 			</a>
 			<a
 				target="_blank"
 				rel="noreferrer"
 				href="https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare"
 			>
-				<img src={cloudflare} alt="Cloudflare logo" />
+				<img src={cloudflare} alt="" />
 				<span>Cloudflare</span>
 			</a>
 		</div>
@@ -79,7 +79,7 @@
 				rel="noreferrer"
 				href="https://github.com/jthegedus/svelte-adapter-firebase"
 			>
-				<img src={firebase} alt="Firebase logo" />
+				<img src={firebase} alt="" />
 				<span>Firebase</span>
 			</a>
 			<a
@@ -88,23 +88,23 @@
 				href="https://github.com/pluvial/svelte-adapter-deno"
 				class="invert invert-hover"
 			>
-				<img src={deno} alt="Deno logo" />
+				<img src={deno} alt="" />
 				<span>Deno</span>
 			</a>
 			<a target="_blank" rel="noreferrer" href="https://github.com/MikeBild/sveltekit-adapter-aws">
-				<img src={lambda} alt="AWS Lambda logo" />
+				<img src={lambda} alt="" />
 				<span>AWS</span>
 			</a>
 			<a
 				target="_blank"
 				rel="noreferrer"
 				href="https://github.com/geoffrich/svelte-adapter-azure-swa"
 			>
-				<img src={azure} alt="Azure logo" />
+				<img src={azure} alt="" />
 				<span>Azure</span>
 			</a>
 			<a target="_blank" rel="noreferrer" href="https://kit.svelte.dev/docs/adapters">
-				<img src={plus} alt="Plus sign" />
+				<img src={plus} alt="" />
 				<span>More...</span>
 			</a>
 		</div>
@@ -193,12 +193,14 @@
 		transition: filter 0.2s;
 	}
 
-	.platforms a:hover img {
+	.platforms a:hover img,
+	.platforms a:focus-visible img {
 		filter: invert(var(--invert-hover));
 		transition: none;
 	}
 
-	.platforms a:hover span {
+	.platforms a:hover span,
+	.platforms a:focus-visible span {
 		color: var(--sk-text-1);
 	}
 

diff --git a/sites/kit.svelte.dev/src/routes/home/Showcase.svelte b/sites/kit.svelte.dev/src/routes/home/Showcase.svelte
@@ -28,7 +28,7 @@
 	<div class="showcase">
 		{#each showcase as { url, image }}
 			<a href="https://{url}" target="_blank" rel="noreferrer">
-				<Image src={image} alt="Screenshot of {url}" />
+				<Image src={image} alt="" />
 				<span>{url}</span>
 			</a>
 		{/each}

diff --git a/sites/site-kit/src/lib/components/SkipLink.svelte b/sites/site-kit/src/lib/components/SkipLink.svelte
@@ -14,7 +14,7 @@
 		inset-block-start: 0;
 		inset-inline-start: 0;
 		transform: translateY(-999px);
-		z-index: 101; /* 1 more than the nav z-index */
+		z-index: 1000; /* 1 more than the banner z-index */
 	}
 
 	a:focus {