diff --git a/src/demos.md b/src/demos.md
index d0d01fd7..d3d36e07 100644
--- a/src/demos.md
+++ b/src/demos.md
@@ -173,6 +173,7 @@ let iconType: "none" | "left" | "full" = $state("none");
       x={position.startsWith("inner") ? "inner" : "right"}
       y={position.endsWith("down") ? "down" : "up"}
       onclick={() => {}}
+      id="splitbutton"
     >
       {#if iconType == "none"}
         Hello
@@ -182,7 +183,7 @@ let iconType: "none" | "left" | "full" = $state("none");
         <Icon icon={iconCircle} />
       {/if}
       {#snippet menu()}
-        <Menu>
+        <Menu aria-labelledby="splitbutton">
           <MenuItem icon={iconCircle} onclick={() => {}}>Hi</MenuItem>
           <MenuItem icon={iconSquare} onclick={() => {}}>Howdy</MenuItem>
           <MenuItem icon={iconTriangle} onclick={() => {}}>G'day</MenuItem>
@@ -328,7 +329,7 @@ let supporting = $derived(
   {"<" + type + ">"}
 </label>
 {#snippet demo()}
-  <div class="demo">
+  <div class="demo" role="list">
     {#snippet leading()}
       {#if type == "label"}
         <div class="box-wrapper">
@@ -389,7 +390,7 @@ let supporting = $derived(
 Minimal demo:
 
 ```svelte
-<Menu>
+<Menu aria-label="Template Menu">
   <MenuItem icon={iconCircle}>Undo</MenuItem>
   <MenuItem icon={iconSquare}>Redo</MenuItem>
   <MenuItem icon={iconTriangle}>Cut</MenuItem>
@@ -413,7 +414,7 @@ let icons = $state(false);
   {icons ? "Icons" : "No icons"}
 </label>
 {#snippet demo()}
-  <Menu>
+  <Menu aria-label="Template Menu">
     <MenuItem icon={icons ? iconCircle : undefined} onclick={() => {}}>Cut</MenuItem>
     <MenuItem icon={icons ? iconSquare : undefined} onclick={() => {}}>Undo</MenuItem>
     <MenuItem icon={icons ? iconTriangle : undefined} disabled onclick={() => {}}>Redo</MenuItem>
@@ -628,12 +629,12 @@ let selected = $state(false);
 Minimal demo:
 
 ```svelte
-<LinearProgress percent={60} />
-<LinearProgressEstimate sToHalfway={2} />
-<WavyLinearProgress percent={60} />
-<WavyLinearProgressEstimate sToHalfway={2} />
-<CircularProgress percent={60} />
-<CircularProgressEstimate sToHalfway={2} />
+<LinearProgress percent={60} aria-label="Loading episodes" />
+<LinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+<WavyLinearProgress percent={60} aria-label="Loading episodes" />
+<WavyLinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+<CircularProgress percent={60} aria-label="Loading episodes" />
+<CircularProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
 ```
 
 Full demo:
@@ -673,17 +674,34 @@ let percent = $state(10);
 
 {#snippet demo()}
   {#if estimate && type == "linear"}
-    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} />
+    <LinearProgressEstimate
+      sToHalfway={2}
+      height={thick ? 8 : 4}
+      aria-label="LinearProgressEstimate"
+    />
   {:else if estimate && type == "linear-wavy"}
-    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgressEstimate
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgressEstimate"
+    />
   {:else if estimate && type == "circular"}
-    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} />
+    <CircularProgressEstimate
+      sToHalfway={2}
+      thickness={thick ? 8 : 4}
+      aria-label="CircularProgressEstimate"
+    />
   {:else if type == "linear"}
-    <LinearProgress {percent} height={thick ? 8 : 4} />
+    <LinearProgress {percent} height={thick ? 8 : 4} aria-label="LinearProgress" />
   {:else if type == "linear-wavy"}
-    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgress
+      {percent}
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgress"
+    />
   {:else if type == "circular"}
-    <CircularProgress {percent} thickness={thick ? 8 : 4} />
+    <CircularProgress {percent} thickness={thick ? 8 : 4} aria-label="CircularProgress" />
   {/if}
 {/snippet}
 
@@ -699,7 +717,7 @@ let percent = $state(10);
 Minimal demo:
 
 ```svelte
-<LoadingIndicator />
+<LoadingIndicator aria-label="Loading episodes" />
 ```
 
 Full demo:
@@ -719,7 +737,7 @@ let container = $state(false);
 </label>
 
 {#snippet demo()}
-  <LoadingIndicator {container} />
+  <LoadingIndicator {container} aria-label="LoadingIndicator" />
 {/snippet}
 ```
 
diff --git a/src/lib/buttons/ConnectedButtons.svelte b/src/lib/buttons/ConnectedButtons.svelte
index cbc188e0..352e71c7 100644
--- a/src/lib/buttons/ConnectedButtons.svelte
+++ b/src/lib/buttons/ConnectedButtons.svelte
@@ -4,7 +4,7 @@
   let { round = false, children }: { round?: boolean; children: Snippet } = $props();
 </script>
 
-<div class="m3-container" class:round>
+<div class="m3-container" role="group" class:round>
   {@render children()}
 </div>
 
diff --git a/src/lib/containers/Dialog.svelte b/src/lib/containers/Dialog.svelte
index 7145376a..971e9192 100644
--- a/src/lib/containers/Dialog.svelte
+++ b/src/lib/containers/Dialog.svelte
@@ -34,6 +34,8 @@
     if (open) dialog.showModal();
     else dialog.close();
   });
+
+  const id = $props.id();
 </script>
 
 <dialog
@@ -61,12 +63,13 @@
         ? "closerequest"
         : "any")}
   role="alertdialog"
+  aria-labelledby="{id}headline"
   {...extra}
 >
   {#if icon}
     <Icon {icon} size={24} />
   {/if}
-  <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
+  <h2 class="headline m3-font-headline-small" class:center={icon} id="{id}headline">{headline}</h2>
   <div class="content m3-font-body-medium">
     {@render children()}
   </div>
diff --git a/src/lib/containers/Menu.svelte b/src/lib/containers/Menu.svelte
index 6b2ab057..8a298130 100644
--- a/src/lib/containers/Menu.svelte
+++ b/src/lib/containers/Menu.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
+  import type { LabelledAria } from "$lib/misc/typing-utils";
   import type { Snippet } from "svelte";
 
-  let { children }: { children: Snippet } = $props();
+  let { children, ...extra }: { children: Snippet } & LabelledAria = $props();
 </script>
 
-<div class="m3-container">
+<div class="m3-container" role="menu" {...extra}>
   {@render children()}
 </div>
 
diff --git a/src/lib/containers/MenuItem.svelte b/src/lib/containers/MenuItem.svelte
index d27f4003..121224d3 100644
--- a/src/lib/containers/MenuItem.svelte
+++ b/src/lib/containers/MenuItem.svelte
@@ -17,7 +17,13 @@
   } = $props();
 </script>
 
-<button type="button" class="item focus-inset m3-font-label-large" {disabled} {onclick}>
+<button
+  type="button"
+  class="item focus-inset m3-font-label-large"
+  role="menuitem"
+  {disabled}
+  {onclick}
+>
   <Layer />
   {#if icon == "space"}
     <span class="icon"></span>
diff --git a/src/lib/containers/SnackbarItem.svelte b/src/lib/containers/SnackbarItem.svelte
index 6dcd7e11..73f0da04 100644
--- a/src/lib/containers/SnackbarItem.svelte
+++ b/src/lib/containers/SnackbarItem.svelte
@@ -5,7 +5,7 @@
   let { children, ...extra }: { children: Snippet } & DivAttrs = $props();
 </script>
 
-<div class="m3-container" {...extra}>
+<div class="m3-container" role="status" {...extra}>
   {@render children()}
 </div>
 
diff --git a/src/lib/forms/CircularProgress.svelte b/src/lib/forms/CircularProgress.svelte
index e72d3f51..7e7bde9d 100644
--- a/src/lib/forms/CircularProgress.svelte
+++ b/src/lib/forms/CircularProgress.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
+  import type { LabelledAria } from "$lib/misc/typing-utils";
 
   let {
     percent,
     size = 48,
     thickness = 4,
-  }: { percent: number; size?: number; thickness?: number } & HTMLAttributes<SVGElement> = $props();
+    ...extra
+  }: { percent: number; size?: number; thickness?: number } & LabelledAria = $props();
 
   let r = $derived(size / 2 - thickness / 2);
   let circumference = $derived(Math.PI * r * 2);
@@ -18,6 +19,8 @@
   xmlns="http://www.w3.org/2000/svg"
   class="m3-container"
   role="progressbar"
+  aria-valuenow={percent}
+  {...extra}
 >
   <circle
     cx={size / 2}
diff --git a/src/lib/forms/CircularProgressEstimate.svelte b/src/lib/forms/CircularProgressEstimate.svelte
index aede4604..cf61c37f 100644
--- a/src/lib/forms/CircularProgressEstimate.svelte
+++ b/src/lib/forms/CircularProgressEstimate.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
+  import type { LabelledAria } from "$lib/misc/typing-utils";
+
   let {
     sToHalfway = 1,
     size = 48,
     thickness = 2,
+    ...extra
   }: {
     sToHalfway?: number;
     size?: number;
     thickness?: number;
-  } = $props();
+  } & LabelledAria = $props();
 
   let r = $derived(size / 2 - thickness / 2);
   let circumference = $derived(Math.PI * r * 2);
@@ -23,6 +26,7 @@
   role="progressbar"
   style:--speed="{sToHalfway * 8}s"
   style:--circumference={circumference}
+  {...extra}
 >
   <circle
     cx={size / 2}
diff --git a/src/lib/forms/LinearProgress.svelte b/src/lib/forms/LinearProgress.svelte
index 68e527a9..c003e27c 100644
--- a/src/lib/forms/LinearProgress.svelte
+++ b/src/lib/forms/LinearProgress.svelte
@@ -1,8 +1,20 @@
 <script lang="ts">
-  let { percent, height = 4 }: { percent: number; height?: number } = $props();
+  import type { LabelledAria } from "$lib/misc/typing-utils";
+
+  let {
+    percent,
+    height = 4,
+    ...extra
+  }: { percent: number; height?: number } & LabelledAria = $props();
 </script>
 
-<div class="m3-container" role="progressbar" style:height="{height / 16}rem">
+<div
+  class="m3-container"
+  role="progressbar"
+  aria-valuenow={percent}
+  style:height="{height / 16}rem"
+  {...extra}
+>
   <div class="percent" style:width="{percent}%"></div>
   <div class="track"></div>
 </div>
diff --git a/src/lib/forms/LinearProgressEstimate.svelte b/src/lib/forms/LinearProgressEstimate.svelte
index 6908805d..c6383eb4 100644
--- a/src/lib/forms/LinearProgressEstimate.svelte
+++ b/src/lib/forms/LinearProgressEstimate.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-  let { sToHalfway = 1, height = 4 }: { sToHalfway?: number; height?: number } = $props();
+  import type { LabelledAria } from "$lib/misc/typing-utils";
+
+  let {
+    sToHalfway = 1,
+    height = 4,
+    ...extra
+  }: { sToHalfway?: number; height?: number } & LabelledAria = $props();
   /*
   Easing calculated with
   // 1) define the original mapping f(y)=time-%, capped at 100% for y=1
@@ -72,6 +78,7 @@
   role="progressbar"
   style:height="{height / 16}rem"
   style:--speed="{sToHalfway * 8}s"
+  {...extra}
 >
   <div class="percent"></div>
   <div class="track"></div>
diff --git a/src/lib/forms/LoadingIndicator.svelte b/src/lib/forms/LoadingIndicator.svelte
index 792ad4aa..dd877383 100644
--- a/src/lib/forms/LoadingIndicator.svelte
+++ b/src/lib/forms/LoadingIndicator.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
+  import type { OneOf } from "$lib/misc/typing-utils";
+
   // for more weird loaders check out https://www.npmjs.com/package/kreations
   let {
     size = 48,
     container = false,
     center = true,
+    ...extra
   }: {
     size?: number;
     container?: boolean;
     center?: boolean;
-  } = $props();
+  } & OneOf<{ "aria-label": string; "aria-labelledby": string }> = $props();
 </script>
 
-<svg width={size} height={size} class:container class:center>
+<svg width={size} height={size} class:container class:center role="progressbar" {...extra}>
   <path fill="currentColor">
     <animate
       attributeName="d"
diff --git a/src/lib/forms/WavyLinearProgress.svelte b/src/lib/forms/WavyLinearProgress.svelte
index 28fe2c18..e3f44f07 100644
--- a/src/lib/forms/WavyLinearProgress.svelte
+++ b/src/lib/forms/WavyLinearProgress.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
   import { onMount, untrack } from "svelte";
   import { linear, trackOpacity } from "./_wavy";
+  import type { LabelledAria } from "$lib/misc/typing-utils";
 
   let {
     width = 600,
     height = 10,
     thickness = 4,
     percent,
-  }: { width?: number; height?: number; thickness?: number; percent: number } = $props();
+    ...extra
+  }: {
+    width?: number;
+    height?: number;
+    thickness?: number;
+    percent: number;
+  } & LabelledAria = $props();
 
   let time = $state(0);
 
@@ -37,7 +44,7 @@
   });
 </script>
 
-<svg viewBox="0 0 {width} {height}">
+<svg viewBox="0 0 {width} {height}" role="progressbar" aria-valuenow={percent} {...extra}>
   <path
     fill="none"
     stroke="rgb(var(--m3-scheme-primary))"
diff --git a/src/lib/forms/WavyLinearProgressEstimate.svelte b/src/lib/forms/WavyLinearProgressEstimate.svelte
index 88d6ab3f..50b086da 100644
--- a/src/lib/forms/WavyLinearProgressEstimate.svelte
+++ b/src/lib/forms/WavyLinearProgressEstimate.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { LabelledAria } from "$lib/misc/typing-utils";
   import { linear, trackOpacity } from "./_wavy";
 
   let {
@@ -6,7 +7,13 @@
     width = 600,
     height = 10,
     thickness = 4,
-  }: { sToHalfway?: number; width?: number; height?: number; thickness?: number } = $props();
+    ...extra
+  }: {
+    sToHalfway?: number;
+    width?: number;
+    height?: number;
+    thickness?: number;
+  } & LabelledAria = $props();
 
   let top = $derived(thickness * 0.5);
   let bottom = $derived(height - thickness * 0.5);
@@ -51,7 +58,7 @@
   });
 </script>
 
-<svg viewBox="0 0 {width} {height}">
+<svg viewBox="0 0 {width} {height}" role="progressbar" {...extra}>
   <path
     fill="none"
     stroke="rgb(var(--m3-scheme-primary))"
diff --git a/src/lib/forms/_picker/CalendarPicker.svelte b/src/lib/forms/_picker/CalendarPicker.svelte
index 3dda81c4..78389797 100644
--- a/src/lib/forms/_picker/CalendarPicker.svelte
+++ b/src/lib/forms/_picker/CalendarPicker.svelte
@@ -15,38 +15,62 @@
 
   const makeCalendar = (year: number, month: number) => {
     const firstDay = new Date(year, month, 1);
-    return Array.from({ length: 42 }, (_, i: number) => {
+    const days = Array.from({ length: 42 }, (_, i: number) => {
       const date = new Date(year, month, i - firstDay.getDay() + 1);
       const day = date.getDate();
       const iso =
-        year.toString().padStart(4, "0") +
+        date.getFullYear().toString().padStart(4, "0") +
         "-" +
-        (month + 1).toString().padStart(2, "0") +
+        (date.getMonth() + 1).toString().padStart(2, "0") +
         "-" +
-        date.getDate().toString().padStart(2, "0");
-      return { disabled: date.getMonth() != month, day, iso };
+        day.toString().padStart(2, "0");
+      const label = date.toLocaleDateString(undefined, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+      return { disabled: date.getMonth() != month, day, iso, label };
     });
+
+    const rows = [];
+    for (let r = 0; r < 6; r++) {
+      rows.push(days.slice(r * 7, (r + 1) * 7));
+    }
+
+    return rows;
   };
 
   let today = $state(new Date());
   setInterval(() => (today = new Date()), 1000 * 60);
 </script>
 
-<div class="m3-container">
-  {#each "SMTWTFS" as day}
-    <div class="day m3-font-body-small">{day}</div>
-  {/each}
-  {#each makeCalendar(focusedYear, focusedMonth) as day (day.iso + (day.disabled ? "-disabled" : ""))}
-    <Item
-      disabled={day.disabled || !dateValidator(day.iso)}
-      today={!day.disabled &&
-        focusedYear == today.getFullYear() &&
-        focusedMonth == today.getMonth() &&
-        day.day == today.getDate()}
-      selected={!day.disabled && day.iso == chosenDate}
-      label={day.day.toString()}
-      onclick={() => (chosenDate = day.iso)}
-    />
+<div class="m3-container" role="grid">
+  <div style:display="contents" role="row">
+    {#each ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] as day}
+      <!-- TODO: use a tooltip -->
+      <div class="day m3-font-body-small" role="columnheader" title={day}>{day.at(0)}</div>
+    {/each}
+  </div>
+  {#each makeCalendar(focusedYear, focusedMonth) as row}
+    <div style:display="contents" role="row">
+      {#each row as day (day.iso + (day.disabled ? "-disabled" : ""))}
+        {@const disabled = day.disabled || !dateValidator(day.iso)}
+        <div style:display="contents" role={disabled ? undefined : "gridcell"}>
+          <Item
+            {disabled}
+            today={!day.disabled &&
+              focusedYear == today.getFullYear() &&
+              focusedMonth == today.getMonth() &&
+              day.day == today.getDate()}
+            selected={!day.disabled && day.iso == chosenDate}
+            label={day.day.toString()}
+            onclick={() => (chosenDate = day.iso)}
+            aria-label={day.label}
+          />
+        </div>
+      {/each}
+    </div>
   {/each}
 </div>
 
diff --git a/src/lib/forms/_picker/Header.svelte b/src/lib/forms/_picker/Header.svelte
index f6b9e0ca..aabb4084 100644
--- a/src/lib/forms/_picker/Header.svelte
+++ b/src/lib/forms/_picker/Header.svelte
@@ -31,6 +31,7 @@
       type="button"
       class="arrow"
       onclick={() => (focusedMonth = (focusedMonth - 1 + 12) % 12)}
+      aria-label={getShortMonth((focusedMonth - 1 + 12) % 12)}
     >
       <Layer />
       <Icon icon={iconLeft} />
@@ -45,7 +46,12 @@
       {getShortMonth(focusedMonth)}
       <Icon icon={iconDown} />
     </button>
-    <button type="button" class="arrow" onclick={() => (focusedMonth = (focusedMonth + 1) % 12)}>
+    <button
+      type="button"
+      class="arrow"
+      onclick={() => (focusedMonth = (focusedMonth + 1) % 12)}
+      aria-label={getShortMonth((focusedMonth + 1) % 12)}
+    >
       <Layer />
       <Icon icon={iconRight} />
     </button>
@@ -56,6 +62,7 @@
       class="arrow"
       disabled={focusedYear <= startYear}
       onclick={() => focusedYear--}
+      aria-label={(focusedYear - 1).toString()}
     >
       <Layer />
       <Icon icon={iconLeft} />
@@ -75,6 +82,7 @@
       class="arrow"
       disabled={focusedYear >= endYear}
       onclick={() => focusedYear++}
+      aria-label={(focusedYear + 1).toString()}
     >
       <Layer />
       <Icon icon={iconRight} />
diff --git a/src/lib/forms/_picker/Item.svelte b/src/lib/forms/_picker/Item.svelte
index efa80b5f..f89655b8 100644
--- a/src/lib/forms/_picker/Item.svelte
+++ b/src/lib/forms/_picker/Item.svelte
@@ -2,28 +2,21 @@
   import Layer from "$lib/misc/Layer.svelte";
 
   let {
-    disabled,
     today,
     selected,
     label,
-    onclick,
+    ...extra
   }: {
     disabled: boolean;
     today: boolean;
     selected: boolean;
     label: string;
     onclick: () => void;
+    "aria-label": string;
   } = $props();
 </script>
 
-<button
-  type="button"
-  class="item m3-font-body-small"
-  {disabled}
-  class:today
-  class:selected
-  {onclick}
->
+<button type="button" class="item m3-font-body-small" class:today class:selected {...extra}>
   <Layer />
   {label}
 </button>
diff --git a/src/lib/misc/Icon.svelte b/src/lib/misc/Icon.svelte
index fbacd800..69eb52d3 100644
--- a/src/lib/misc/Icon.svelte
+++ b/src/lib/misc/Icon.svelte
@@ -17,6 +17,7 @@
   height={size || "1em"}
   viewBox="0 0 {icon.width} {icon.height}"
   data-badge={icon.body.includes("<!--badge-->") ? "" : undefined}
+  aria-hidden={!extra["aria-label"] && !extra["aria-labelledby"]}
   {...extra}
 >
   {@html icon.body}
diff --git a/src/lib/misc/typing-utils.ts b/src/lib/misc/typing-utils.ts
index 938f5d83..e4ba6ac8 100644
--- a/src/lib/misc/typing-utils.ts
+++ b/src/lib/misc/typing-utils.ts
@@ -13,3 +13,9 @@ export type NotButton<T> = Omit<T, "onclick">;
 export type ButtonAttrs = HTMLButtonAttributes & Required<Pick<HTMLButtonAttributes, "onclick">>;
 
 export type DivAttrs = NotButton<HTMLAttributes<HTMLDivElement>>;
+
+// thanks to https://stackoverflow.com/a/52140738/15557835
+export type OneOf<T, TKey extends keyof T = keyof T> = TKey extends keyof T
+  ? { [P in TKey]-?: T[TKey] } & Partial<Record<Exclude<keyof T, TKey>, never>>
+  : never;
+export type LabelledAria = OneOf<{ "aria-label": string; "aria-labelledby": string }>;
diff --git a/src/lib/nav/Tabs.svelte b/src/lib/nav/Tabs.svelte
index 6ab5c13d..f0b1f415 100644
--- a/src/lib/nav/Tabs.svelte
+++ b/src/lib/nav/Tabs.svelte
@@ -21,11 +21,20 @@
   const name = $props.id();
 </script>
 
-<div class="m3-container" class:primary={!secondary} style:--items={items.length}>
-  <div class="divider"></div>
+<div class="m3-container" class:primary={!secondary} style:--items={items.length} role="tablist">
+  <div class="divider" aria-hidden="true"></div>
   {#each items as item}
     {@const id = name + item.value}
-    <input type="radio" {name} {id} value={item.value} bind:group={tab} {...extra} />
+    <input
+      type="radio"
+      {name}
+      {id}
+      value={item.value}
+      bind:group={tab}
+      role="tab"
+      aria-selected={item.value === tab}
+      {...extra}
+    />
     <label for={id} class:tall={item.icon}>
       <Layer />
       {#if item.icon}
@@ -34,7 +43,7 @@
       <span class="m3-font-title-small">{item.name}</span>
     </label>
   {/each}
-  <div class="bar"></div>
+  <div class="bar" aria-hidden="true"></div>
 </div>
 
 <style>
diff --git a/src/lib/nav/TabsLink.svelte b/src/lib/nav/TabsLink.svelte
index c6cf045f..73554030 100644
--- a/src/lib/nav/TabsLink.svelte
+++ b/src/lib/nav/TabsLink.svelte
@@ -21,15 +21,21 @@
   } & HTMLAnchorAttributes = $props();
 </script>
 
-<div
+<nav
   class="m3-container"
   class:primary={!secondary}
   style:--items={items.length}
   style:--i={items.findIndex((i) => i.value == tab)}
 >
-  <div class="divider"></div>
+  <div class="divider" aria-hidden="true"></div>
   {#each items as item}
-    <a href={item.href} class:tall={item.icon} class:selected={item.value == tab} {...extra}>
+    <a
+      href={item.href}
+      class:tall={item.icon}
+      class:selected={item.value == tab}
+      aria-current={item.value == tab ? "page" : "false"}
+      {...extra}
+    >
       <Layer />
       {#if item.icon}
         <Icon icon={item.icon} />
@@ -37,8 +43,8 @@
       <span class="m3-font-title-small">{item.name}</span>
     </a>
   {/each}
-  <div class="bar"></div>
-</div>
+  <div class="bar" aria-hidden="true"></div>
+</nav>
 
 <style>
   .m3-container {
diff --git a/src/lib/nav/VariableTabs.svelte b/src/lib/nav/VariableTabs.svelte
index c9cfa7cb..6a13ba82 100644
--- a/src/lib/nav/VariableTabs.svelte
+++ b/src/lib/nav/VariableTabs.svelte
@@ -20,7 +20,7 @@
   } & HTMLInputAttributes = $props();
 
   const name = $props.id();
-  let wrapper: HTMLDivElement | undefined = $state();
+  let wrapper: HTMLElement | undefined = $state();
   const handleInput = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
     const before = tab;
     const after = e.currentTarget.value;
@@ -72,8 +72,9 @@
   class:primary={!secondary}
   style:--items={items.length}
   bind:this={wrapper}
+  role="tablist"
 >
-  <div class="divider"></div>
+  <div class="divider" aria-hidden="true"></div>
   {#each items as item}
     {@const id = name + item.value}
     <input
@@ -83,6 +84,8 @@
       value={item.value}
       bind:group={tab}
       oninput={handleInput}
+      role="tab"
+      aria-selected={item.value === tab}
       {...extra}
     />
     <label for={id} class:tall={item.icon}>
@@ -93,7 +96,7 @@
       <span class="m3-font-title-small">{item.name}</span>
     </label>
   {/each}
-  <div class="bar"></div>
+  <div class="bar" aria-hidden="true"></div>
 </div>
 
 <style>
diff --git a/src/lib/nav/VariableTabsLink.svelte b/src/lib/nav/VariableTabsLink.svelte
index 27c490d0..7df6fd46 100644
--- a/src/lib/nav/VariableTabsLink.svelte
+++ b/src/lib/nav/VariableTabsLink.svelte
@@ -21,7 +21,7 @@
   } & HTMLAnchorAttributes = $props();
 
   let prevTab = $state(tab);
-  let wrapper: HTMLDivElement | undefined = $state();
+  let wrapper: HTMLElement | undefined = $state();
   $effect(() => {
     if (!wrapper) return;
 
@@ -74,19 +74,20 @@
   });
 </script>
 
-<div
+<nav
   class="m3-container"
   class:primary={!secondary}
   style:--items={items.length}
   bind:this={wrapper}
 >
-  <div class="divider"></div>
+  <div class="divider" aria-hidden="true"></div>
   {#each items as item, i}
     <a
       href={item.href}
       class:tall={item.icon}
       class:selected={item.value == tab}
       style:grid-column={i + 1}
+      aria-current={item.value == tab ? "page" : "false"}
       {...extra}
     >
       <Layer />
@@ -96,8 +97,12 @@
       <span class="m3-font-title-small">{item.name}</span>
     </a>
   {/each}
-  <div class="bar" style="grid-column: {items.findIndex((i) => i.value == tab) + 1}"></div>
-</div>
+  <div
+    class="bar"
+    aria-hidden="true"
+    style="grid-column: {items.findIndex((i) => i.value == tab) + 1}"
+  ></div>
+</nav>
 
 <style>
   .m3-container {
diff --git a/src/routes/12.svelte b/src/routes/12.svelte
index 3b516c8c..3048164d 100644
--- a/src/routes/12.svelte
+++ b/src/routes/12.svelte
@@ -25,12 +25,12 @@ let { showCode }: { showCode: (
   relevantLinks: { title: string; link: string }[],
 ) => void } = $props();
 
-const minimalDemo = `${"<"}LinearProgress percent={60} />
-${"<"}LinearProgressEstimate sToHalfway={2} />
-${"<"}WavyLinearProgress percent={60} />
-${"<"}WavyLinearProgressEstimate sToHalfway={2} />
-${"<"}CircularProgress percent={60} />
-${"<"}CircularProgressEstimate sToHalfway={2} />`;
+const minimalDemo = `${"<"}LinearProgress percent={60} aria-label="Loading episodes" />
+${"<"}LinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+${"<"}WavyLinearProgress percent={60} aria-label="Loading episodes" />
+${"<"}WavyLinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+${"<"}CircularProgress percent={60} aria-label="Loading episodes" />
+${"<"}CircularProgressEstimate sToHalfway={2} aria-label="Loading episodes" />`;
 const relevantLinks = [{"title":"LinearProgress.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/LinearProgress.svelte"},{"title":"LinearProgressEstimate.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/LinearProgressEstimate.svelte"},{"title":"WavyLinearProgress.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/WavyLinearProgress.svelte"},{"title":"WavyLinearProgressEstimate.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/WavyLinearProgressEstimate.svelte"},{"title":"CircularProgress.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/CircularProgress.svelte"},{"title":"CircularProgressEstimate.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/CircularProgressEstimate.svelte"},{"title":"Slider.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/Slider.svelte"}];
 </script>
 
@@ -51,17 +51,34 @@ const relevantLinks = [{"title":"LinearProgress.sv","link":"https://github.com/K
 
 {#snippet demo()}
   {#if estimate && type == "linear"}
-    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} />
+    <LinearProgressEstimate
+      sToHalfway={2}
+      height={thick ? 8 : 4}
+      aria-label="LinearProgressEstimate"
+    />
   {:else if estimate && type == "linear-wavy"}
-    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgressEstimate
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgressEstimate"
+    />
   {:else if estimate && type == "circular"}
-    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} />
+    <CircularProgressEstimate
+      sToHalfway={2}
+      thickness={thick ? 8 : 4}
+      aria-label="CircularProgressEstimate"
+    />
   {:else if type == "linear"}
-    <LinearProgress {percent} height={thick ? 8 : 4} />
+    <LinearProgress {percent} height={thick ? 8 : 4} aria-label="LinearProgress" />
   {:else if type == "linear-wavy"}
-    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgress
+      {percent}
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgress"
+    />
   {:else if type == "circular"}
-    <CircularProgress {percent} thickness={thick ? 8 : 4} />
+    <CircularProgress {percent} thickness={thick ? 8 : 4} aria-label="CircularProgress" />
   {/if}
 {/snippet}
 
diff --git a/src/routes/13.svelte b/src/routes/13.svelte
index 678c96da..49297cc5 100644
--- a/src/routes/13.svelte
+++ b/src/routes/13.svelte
@@ -15,7 +15,7 @@ let { showCode }: { showCode: (
   relevantLinks: { title: string; link: string }[],
 ) => void } = $props();
 
-const minimalDemo = `${"<"}LoadingIndicator />`;
+const minimalDemo = `${"<"}LoadingIndicator aria-label="Loading episodes" />`;
 const relevantLinks = [{"title":"LoadingIndicator.sv","link":"https://github.com/KTibow/m3-svelte/blob/main/src/lib/forms/LoadingIndicator.svelte"}];
 </script>
 
@@ -26,6 +26,6 @@ const relevantLinks = [{"title":"LoadingIndicator.sv","link":"https://github.com
 </label>
 
 {#snippet demo()}
-  <LoadingIndicator {container} />
+  <LoadingIndicator {container} aria-label="LoadingIndicator" />
 {/snippet}
 </InternalCard>
diff --git a/src/routes/2.svelte b/src/routes/2.svelte
index d2a6225f..79a47a7c 100644
--- a/src/routes/2.svelte
+++ b/src/routes/2.svelte
@@ -49,6 +49,7 @@ const relevantLinks = [{"title":"SplitButton.sv","link":"https://github.com/KTib
       x={position.startsWith("inner") ? "inner" : "right"}
       y={position.endsWith("down") ? "down" : "up"}
       onclick={() => {}}
+      id="splitbutton"
     >
       {#if iconType == "none"}
         Hello
@@ -58,7 +59,7 @@ const relevantLinks = [{"title":"SplitButton.sv","link":"https://github.com/KTib
         <Icon icon={iconCircle} />
       {/if}
       {#snippet menu()}
-        <Menu>
+        <Menu aria-labelledby="splitbutton">
           <MenuItem icon={iconCircle} onclick={() => {}}>Hi</MenuItem>
           <MenuItem icon={iconSquare} onclick={() => {}}>Howdy</MenuItem>
           <MenuItem icon={iconTriangle} onclick={() => {}}>G'day</MenuItem>
diff --git a/src/routes/5.svelte b/src/routes/5.svelte
index 1c63b787..2ebe9855 100644
--- a/src/routes/5.svelte
+++ b/src/routes/5.svelte
@@ -46,7 +46,7 @@ const relevantLinks = [{"title":"ListItem.sv","link":"https://github.com/KTibow/
   {"<" + type + ">"}
 </label>
 {#snippet demo()}
-  <div class="demo">
+  <div class="demo" role="list">
     {#snippet leading()}
       {#if type == "label"}
         <div class="box-wrapper">
diff --git a/src/routes/6.svelte b/src/routes/6.svelte
index 9ab776d5..b34e94de 100644
--- a/src/routes/6.svelte
+++ b/src/routes/6.svelte
@@ -16,7 +16,7 @@ let { showCode }: { showCode: (
   relevantLinks: { title: string; link: string }[],
 ) => void } = $props();
 
-const minimalDemo = `${"<"}Menu>
+const minimalDemo = `${"<"}Menu aria-label="Template Menu">
   ${"<"}MenuItem icon={iconCircle}>Undo${"<"}/MenuItem>
   ${"<"}MenuItem icon={iconSquare}>Redo${"<"}/MenuItem>
   ${"<"}MenuItem icon={iconTriangle}>Cut${"<"}/MenuItem>
@@ -30,7 +30,7 @@ const relevantLinks = [{"title":"Menu.sv","link":"https://github.com/KTibow/m3-s
   {icons ? "Icons" : "No icons"}
 </label>
 {#snippet demo()}
-  <Menu>
+  <Menu aria-label="Template Menu">
     <MenuItem icon={icons ? iconCircle : undefined} onclick={() => {}}>Cut</MenuItem>
     <MenuItem icon={icons ? iconSquare : undefined} onclick={() => {}}>Undo</MenuItem>
     <MenuItem icon={icons ? iconTriangle : undefined} disabled onclick={() => {}}>Redo</MenuItem>
diff --git a/static/llms.txt b/static/llms.txt
index 8f989590..749c8583 100644
--- a/static/llms.txt
+++ b/static/llms.txt
@@ -696,6 +696,7 @@ let iconType: "none" | "left" | "full" = $state("none");` to make this demo:
       x={position.startsWith("inner") ? "inner" : "right"}
       y={position.endsWith("down") ? "down" : "up"}
       onclick={() => {}}
+      id="splitbutton"
     >
       {#if iconType == "none"}
         Hello
@@ -705,7 +706,7 @@ let iconType: "none" | "left" | "full" = $state("none");` to make this demo:
         <Icon icon={iconCircle} />
       {/if}
       {#snippet menu()}
-        <Menu>
+        <Menu aria-labelledby="splitbutton">
           <MenuItem icon={iconCircle} onclick={() => {}}>Hi</MenuItem>
           <MenuItem icon={iconSquare} onclick={() => {}}>Howdy</MenuItem>
           <MenuItem icon={iconTriangle} onclick={() => {}}>G'day</MenuItem>
@@ -819,7 +820,7 @@ let supporting = $derived(
   {"<" + type + ">"}
 </label>
 {#snippet demo()}
-  <div class="demo">
+  <div class="demo" role="list">
     {#snippet leading()}
       {#if type == "label"}
         <div class="box-wrapper">
@@ -879,7 +880,7 @@ let supporting = $derived(
 
 Minimal demo:
 ```svelte
-<Menu>
+<Menu aria-label="Template Menu">
   <MenuItem icon={iconCircle}>Undo</MenuItem>
   <MenuItem icon={iconSquare}>Redo</MenuItem>
   <MenuItem icon={iconTriangle}>Cut</MenuItem>
@@ -893,7 +894,7 @@ The M3 Svelte interactive demo for this component uses Menu, MenuItem with the T
   {icons ? "Icons" : "No icons"}
 </label>
 {#snippet demo()}
-  <Menu>
+  <Menu aria-label="Template Menu">
     <MenuItem icon={icons ? iconCircle : undefined} onclick={() => {}}>Cut</MenuItem>
     <MenuItem icon={icons ? iconSquare : undefined} onclick={() => {}}>Undo</MenuItem>
     <MenuItem icon={icons ? iconTriangle : undefined} disabled onclick={() => {}}>Redo</MenuItem>
@@ -1054,12 +1055,12 @@ let selected = $state(false);` to make this demo:
 
 Minimal demo:
 ```svelte
-<LinearProgress percent={60} />
-<LinearProgressEstimate sToHalfway={2} />
-<WavyLinearProgress percent={60} />
-<WavyLinearProgressEstimate sToHalfway={2} />
-<CircularProgress percent={60} />
-<CircularProgressEstimate sToHalfway={2} />
+<LinearProgress percent={60} aria-label="Loading episodes" />
+<LinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+<WavyLinearProgress percent={60} aria-label="Loading episodes" />
+<WavyLinearProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
+<CircularProgress percent={60} aria-label="Loading episodes" />
+<CircularProgressEstimate sToHalfway={2} aria-label="Loading episodes" />
 ```
 
 The M3 Svelte interactive demo for this component uses LinearProgress, LinearProgressEstimate, WavyLinearProgress, WavyLinearProgressEstimate, CircularProgress, CircularProgressEstimate, Button, Slider with the TS `let type: "linear" | "linear-wavy" | "circular" = $state("linear");
@@ -1083,17 +1084,34 @@ let percent = $state(10);` to make this demo:
 
 {#snippet demo()}
   {#if estimate && type == "linear"}
-    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : 4} />
+    <LinearProgressEstimate
+      sToHalfway={2}
+      height={thick ? 8 : 4}
+      aria-label="LinearProgressEstimate"
+    />
   {:else if estimate && type == "linear-wavy"}
-    <WavyLinearProgressEstimate height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgressEstimate
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgressEstimate"
+    />
   {:else if estimate && type == "circular"}
-    <CircularProgressEstimate sToHalfway={2} thickness={thick ? 8 : 4} />
+    <CircularProgressEstimate
+      sToHalfway={2}
+      thickness={thick ? 8 : 4}
+      aria-label="CircularProgressEstimate"
+    />
   {:else if type == "linear"}
-    <LinearProgress {percent} height={thick ? 8 : 4} />
+    <LinearProgress {percent} height={thick ? 8 : 4} aria-label="LinearProgress" />
   {:else if type == "linear-wavy"}
-    <WavyLinearProgress {percent} height={thick ? 14 : 10} thickness={thick ? 8 : 4} />
+    <WavyLinearProgress
+      {percent}
+      height={thick ? 14 : 10}
+      thickness={thick ? 8 : 4}
+      aria-label="WavyLinearProgress"
+    />
   {:else if type == "circular"}
-    <CircularProgress {percent} thickness={thick ? 8 : 4} />
+    <CircularProgress {percent} thickness={thick ? 8 : 4} aria-label="CircularProgress" />
   {/if}
 {/snippet}
 
@@ -1108,7 +1126,7 @@ let percent = $state(10);` to make this demo:
 
 Minimal demo:
 ```svelte
-<LoadingIndicator />
+<LoadingIndicator aria-label="Loading episodes" />
 ```
 
 The M3 Svelte interactive demo for this component uses LoadingIndicator with the TS `let container = $state(false);` to make this demo:
@@ -1119,7 +1137,7 @@ The M3 Svelte interactive demo for this component uses LoadingIndicator with the
 </label>
 
 {#snippet demo()}
-  <LoadingIndicator {container} />
+  <LoadingIndicator {container} aria-label="LoadingIndicator" />
 {/snippet}
 ```