Minor semantic tweaks

- Add missing p-name microformats to some citations
- Add download link for audio element

content/posts/website-best-practices.md

@@ -813,7 +813,7 @@ Some users have trouble when controls have a different look, color, or shape tha
 
 </blockquote>
 {{< quotecaption partOfType="TechArticle" >}}
-<cite itemprop="name headline">Making Content Usable for People with Cognitive and Learning Disabilities</cite>, section 4.2.5.3: 
+<cite itemprop="name headline" class="p-name">Making Content Usable for People with Cognitive and Learning Disabilities</cite>, section 4.2.5.3: 
 <a href="https://www.w3.org/TR/coga-usable/#how-it-helps-3">Clearly Identify Controls and Their Use: How it Helps</a>
 {{< /quotecaption >}}
 {{</quotation>}}
@@ -842,7 +842,7 @@ When this is not possible, provide instructions that explain how to use the cont
 
 </blockquote>
 {{< quotecaption partOfType="TechArticle" >}}
-<cite itemprop="name headline">Making Content Usable for People with Cognitive and Learning Disabilities</cite>, section 4.2.5.2: 
+<cite itemprop="name headline" class="p-name">Making Content Usable for People with Cognitive and Learning Disabilities</cite>, section 4.2.5.2: 
 <a href="https://www.w3.org/TR/coga-usable/#what-to-do-3">Clearly Identify Controls and Their Use: What to Do</a>
 {{< /quotecaption >}}
 {{</quotation>}}
@@ -1169,7 +1169,7 @@ This includes:
 
 </blockquote>
 {{< quotecaption partOfType="TechArticle" >}}
-<cite itemprop="name headline">Making Content Usable for People with Cognitive and Learning Disabilities</cite>, section 4.3.1: 
+<cite itemprop="name headline" class="p-name">Making Content Usable for People with Cognitive and Learning Disabilities</cite>, section 4.3.1: 
 <a href="https://www.w3.org/TR/coga-usable/#what-to-do-6">Make it Easy to Find the Most Important Tasks and Features of the Site</a>
 {{< /quotecaption >}}
 {{</quotation>}}

layouts/shortcodes/audio.html

@@ -2,6 +2,7 @@
 {{- $opus := resources.GetMatch (printf "/a/%s.opus" $name) -}}
 {{- $mp3 := resources.GetMatch (printf "/a/%s.mp3" $name) -}}
 {{- $isTranscribed := false -}}
+{{- $download_url := "" -}}
 {{- /* preloading an in-page audio asset under 32 KiB is fine. */ -}}
 {{- $shouldPreload := lt (len $opus.Content) 32768 -}}
 <audio
@@ -19,21 +20,24 @@
 	{{- end -}}
 	>
 	{{ with $opus -}}
+	{{- $download_url = $opus.RelPermalink -}}
 	{{ $opus_src := . | resources.Fingerprint "md5" -}}
 	<source
 		src="{{ $opus_src.RelPermalink }}"
 		type='audio/ogg; codecs="opus"' />
 	{{ end -}}
 	{{ with $mp3 -}}
+	{{- $download_url = $mp3.RelPermalink -}}
 	{{ $mp3_src := . | resources.Fingerprint "md5" -}}
 	<source
 		src="{{ $mp3_src.RelPermalink }}"
 		type="audio/mpeg" />
-	<p role="note">Your browser does not support HTML5 audio. Here’s a <a
-		href="{{ $mp3_src.RelPermalink }}"
-		{{ if $isTranscribed -}}
-			itemprop="audio contentUrl"
-		{{- end -}}
-		>link to download the audio file <samp translate="no">{{ $name }}.mp3</samp></a> instead.</p>
+	<p role="note">Your browser does not support HTML5 audio.</p>
 	{{ end -}}
-</audio>{{- /* Strip trailing newline: https://github.com/gohugoio/hugo/issues/1753 */ -}}
+</audio>
+<a
+	href="{{ $download_url }}" download=""
+	{{ if $isTranscribed -}}
+		itemprop="audio contentUrl"
+	{{- end -}}>Download audio file <samp translate="no">{{ $name }}.mp3</samp></a>
+{{- /* Strip trailing newline: https://github.com/gohugoio/hugo/issues/1753 */ -}}

linter-configs/hintrc

@@ -44,14 +44,15 @@
 				"ignore": [
 					"time",
 					"picture",
-					"meta[name=color-scheme]",
-					"meta[name=theme-color]",
-					"img[decoding]",
+					"a[download]",
 					"a[referrerpolicy]",
-					"code[translate]",
 					"a[translate]",
+					"code[translate]",
+					"samp[translate]",
 					"span[translate]",
-					"samp[translate]"
+					"img[decoding]",
+					"meta[name=color-scheme]",
+					"meta[name=theme-color]"
 				]
 			}
 		],