Improve Sverdle a11y

- make inputs hidden
- respect reduced motion for confetti and jiggle
- visually hidden headings
- visually hidden text for letter state
- remove aria-selected
- increase color contrast on selected tile

Author: geoffrich

packages/create-svelte/templates/default/src/routes/styles.css

@@ -8,7 +8,7 @@
 	--color-bg-1: hsl(209, 36%, 86%);
 	--color-bg-2: hsl(224, 44%, 95%);
 	--color-theme-1: #ff3e00;
-	--color-theme-2: #40b3ff;
+	--color-theme-2: #4075a6;
 	--color-text: rgba(0, 0, 0, 0.7);
 	--column-width: 42rem;
 	--column-margin-top: 4rem;
@@ -93,3 +93,15 @@ button:focus:not(:focus-visible) {
 		font-size: 2.4rem;
 	}
 }
+
+.visually-hidden {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: auto;
+	margin: 0;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	white-space: nowrap;
+}

packages/create-svelte/templates/default/src/routes/sverdle/+page.svelte

@@ -2,6 +2,7 @@
 	import { confetti } from '@neoconfetti/svelte';
 	import { enhance } from '$app/forms';
 	import type { PageData, ActionData } from './$types';
+	import { reduced_motion } from './reduced-motion';
 
 	/** @type {import('./$types').PageData} */
 	export let data: PageData;
@@ -25,8 +26,16 @@
 	 */
 	let classnames: Record<string, 'exact' | 'close' | 'missing'>;
 
+	/**
+	 * A map of descriptions for all letters that have been guessed,
+	 * used for adding text for assistive technology (e.g. screen readers)
+	 * @type {Record<string, string>}
+	 */
+	let description: Record<string, string>;
+
 	$: {
 		classnames = {};
+		description = {};
 
 		data.answers.forEach((answer, i) => {
 			const guess = data.guesses[i];
@@ -36,8 +45,10 @@
 
 				if (answer[i] === 'x') {
 					classnames[letter] = 'exact';
+					description[letter] = 'correct';
 				} else if (!classnames[letter]) {
 					classnames[letter] = answer[i] === 'c' ? 'close' : 'missing';
+					description[letter] = answer[i] === 'c' ? 'present' : 'absent';
 				}
 			}
 		});
@@ -83,6 +94,8 @@
 	<meta name="description" content="A Wordle clone written in SvelteKit" />
 </svelte:head>
 
+<h1 class="visually-hidden">Sverdle</h1>
+
 <form
 	method="POST"
 	action="?/enter"
@@ -98,20 +111,30 @@
 	<div class="grid" class:playing={!won} class:bad-guess={form?.badGuess}>
 		{#each Array(6) as _, row}
 			{@const current = row === i}
-
+			<h2 class="visually-hidden">Row {row + 1}</h2>
 			<div class="row" class:current>
 				{#each Array(5) as _, column}
 					{@const answer = data.answers[row]?.[column]}
-
-					<input
-						name="guess"
-						disabled={!current}
-						readonly
-						class:exact={answer === 'x'}
-						class:close={answer === 'c'}
-						aria-selected={current && column === data.guesses[row].length}
-						value={data.guesses[row]?.[column] ?? ''}
-					/>
+					{@const value = data.guesses[row]?.[column] ?? ''}
+					{@const selected = current && column === data.guesses[row].length}
+					{@const exact = answer === 'x'}
+					{@const close = answer === 'c'}
+					{@const missing = answer === '_'}
+					<div class="letter" class:exact class:close class:missing class:selected>
+						{value}
+						<span class="visually-hidden">
+							{#if exact}
+								(correct)
+							{:else if close}
+								(present)
+							{:else if missing}
+								(absent)
+							{:else}
+								empty
+							{/if}
+						</span>
+						<input name="guess" disabled={!current} type="hidden" {value} />
+					</div>
 				{/each}
 			</div>
 		{/each}
@@ -122,12 +145,12 @@
 			{#if !won && data.answer}
 				<p>the answer was "{data.answer}"</p>
 			{/if}
-			<button data-key="enter" aria-selected="true" class="restart" formaction="?/restart">
+			<button data-key="enter" class="restart selected" formaction="?/restart">
 				{won ? 'you won :)' : `game over :(`} play again?
 			</button>
 		{:else}
 			<div class="keyboard">
-				<button data-key="enter" aria-selected={submittable} disabled={!submittable}>enter</button>
+				<button data-key="enter" class:selected={submittable} disabled={!submittable}>enter</button>
 
 				<button
 					on:click|preventDefault={update}
@@ -150,6 +173,7 @@
 								formaction="?/update"
 								name="key"
 								value={letter}
+								aria-label="{letter} {description[letter] || ''}"
 							>
 								{letter}
 							</button>
@@ -165,6 +189,7 @@
 	<div
 		style="position: absolute; left: 50%; top: 30%"
 		use:confetti={{
+			particleCount: $reduced_motion ? 0 : undefined,
 			force: 0.7,
 			stageWidth: window.innerWidth,
 			stageHeight: window.innerHeight,
@@ -225,15 +250,17 @@
 		margin: 0 0 0.2rem 0;
 	}
 
-	.grid.bad-guess .row.current {
-		animation: wiggle 0.5s;
+	@media (prefers-reduced-motion: no-preference) {
+		.grid.bad-guess .row.current {
+			animation: wiggle 0.5s;
+		}
 	}
 
 	.grid.playing .row.current {
 		filter: drop-shadow(3px 3px 10px var(--color-bg-0));
 	}
 
-	input {
+	.letter {
 		aspect-ratio: 1;
 		width: 100%;
 		display: flex;
@@ -250,33 +277,24 @@
 		color: rgba(0, 0, 0, 0.7);
 	}
 
-	input:disabled:not(.exact):not(.close) {
+	.letter.missing {
 		background: rgba(255, 255, 255, 0.5);
 		color: rgba(0, 0, 0, 0.5);
 	}
 
-	input.exact {
+	.letter.exact {
 		background: var(--color-theme-2);
 		color: white;
 	}
 
-	input.close {
+	.letter.close {
 		border: 2px solid var(--color-theme-2);
 	}
 
-	input:focus {
-		outline: none;
-	}
-
-	[aria-selected='true'] {
+	.selected {
 		outline: 2px solid var(--color-theme-1);
 	}
 
-	input:not(:disabled)::selection {
-		background: transparent;
-		color: var(--color-theme-1);
-	}
-
 	.controls {
 		text-align: center;
 		justify-content: center;

packages/create-svelte/templates/default/src/routes/sverdle/reduced-motion.ts

@@ -0,0 +1,26 @@
+import { readable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const reduced_motion_query = '(prefers-reduced-motion: reduce)';
+
+const get_initial_motion_preference = () => {
+	if (!browser) return false;
+	return window.matchMedia(reduced_motion_query).matches;
+};
+
+export const reduced_motion = readable(get_initial_motion_preference(), (set) => {
+	if (browser) {
+		/**
+		 * @param {MediaQueryListEvent} event
+		 */
+		const set_reduced_motion = (event: MediaQueryListEvent) => {
+			set(event.matches);
+		};
+		const media_query_list = window.matchMedia(reduced_motion_query);
+		media_query_list.addEventListener('change', set_reduced_motion);
+
+		return () => {
+			media_query_list.removeEventListener('change', set_reduced_motion);
+		};
+	}
+});