diff --git a/layouts/shortcodes/codecaption.html b/layouts/shortcodes/codecaption.html
index 390fb0e..3560284 100644
--- a/layouts/shortcodes/codecaption.html
+++ b/layouts/shortcodes/codecaption.html
@@ -1,6 +1,14 @@
-{{ $codeIndex := (.Page.Scratch.Get "codeIndex") }}
-<figcaption>
-	<strong itemprop="name" id="{{ if .Get "id" }}{{.Get "id"}}{{else}}code-{{ $codeIndex }}{{end}}"> <span itemprop="codeSampleType">Code snippet</span> {{ $codeIndex }}</strong>{{with .Get "lang"}} (<span itemprop="programmingLanguage">{{ . }}</span>){{end}}:
+{{- $codeIndex := (.Page.Scratch.Get "codeIndex") -}}
+{{- $id := (printf `code-%d` $codeIndex) -}}
+{{ with .Parent }}
+	{{- with .Get "id" -}}
+		{{- $id = . -}}
+	{{- end -}}
+{{- end -}}
+<figcaption id="{{ $id }}-caption">
+	<span id="{{ $id }}">
+	<strong itemprop="name"> <span itemprop="codeSampleType">Code snippet</span> {{ $codeIndex }}</strong>{{with .Get "lang"}} (<span itemprop="programmingLanguage">{{ . }}</span>){{ end -}}
+	</span>:
 {{ .Inner | markdownify | safeHTML }}
 </figcaption>
 {{- .Page.Scratch.Set "codeIndex" (add 1 $codeIndex) -}}
diff --git a/layouts/shortcodes/codefigure.html b/layouts/shortcodes/codefigure.html
index d12efee..ebf0138 100644
--- a/layouts/shortcodes/codefigure.html
+++ b/layouts/shortcodes/codefigure.html
@@ -1,3 +1,12 @@
-<figure itemscope itemtype="https://schema.org/SoftwareSourceCode">
+{{- $codeIndex := (.Page.Scratch.Get "codeIndex") -}}
+{{- $id := (printf `code-%d` (sub $codeIndex 1)) -}}
+{{- with .Get "id" -}}
+	{{- $id = . -}}
+{{- end -}}
+<!--
+	The full caption is too long for an aria-label;
+	just use the beginning for the label and the full thing for the aria description.
+-->
+<figure aria-labelledby="{{ $id }}" aria-describedby="{{ $id }}-caption" itemscope itemtype="https://schema.org/SoftwareSourceCode">
 {{ .Inner | markdownify }}
 </figure>