diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 92b6754..eb85f0d 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -19,7 +19,7 @@
 	<input class="show-hide-menu-input" style="display:none;" autocomplete="off" type="checkbox" id="toggle-1">
 	<label class="overlay" for="toggle-1"></label>
 	<div class="main">
-		<div class="header">
+		<header class="header">
 			<div class="header-content">
 				<div class="title">
 					<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
@@ -31,7 +31,7 @@
 							<img class="color-adapting-image" width="30" src="" alt="change theme button">
 						</div>
 {{- end }}
-					    <label id="show-hide-menu-label" class="clickable-header-label" for="toggle-1">
+						<label id="show-hide-menu-label" class="clickable-header-label" for="toggle-1">
 							<img class="color-adapting-image" width="30" src="{{ "images/hamburger.svg" | relURL }}" alt="menu button">
 						</label>
 					</div>
@@ -49,18 +49,18 @@
 {{- end }}
 				</div>
 			</div>
-		</div>
-		<div class="body">
+		</header>
+		<main class="body">
 			<div class="body-content">
 				{{- block "main" . }}{{ end }}
 			</div>
-		</div>
+		</main>
 	</div>
 {{- if .Site.Params.FooterText }}
 	<hr class="dont-show">
-	<div class="footer">
+	<footer class="footer">
 		<p>{{ .Site.Params.FooterText | markdownify }}</p>
-	</div>
+	</footer>
 {{- end }}
 </body>
 </html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 78d465b..64320a7 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,6 @@
 {{ define "title" }}{{ .Title }} &ndash; {{ .Site.Title }}{{ end }}
 {{ define "main" }}
-  <div class="title-header">
+  <header class="title-header">
     <h1>{{ if .Draft }}<i>(Draft)</i> {{ end }}{{ .Title }}</h1>
     <div class="title-header-date">
       {{- if eq .Date.IsZero false }}
@@ -10,24 +10,24 @@
         &mdash; last updated <time>{{ .Lastmod.Format "January 2, 2006" }}</time>
       {{- end }}
     </div>
-  </div>
-  {{ if or (.Params.toc) (and (ne .Params.toc false) (isset .Site.Params "tocwordthreshold") (ge .Site.Params.TocWordThreshold 0) (gt .WordCount .Site.Params.TocWordThreshold)) }}
-    {{/* If the front matter parameter is true, show the toc */}}
-    {{/* Elif the front matter parameter is false, don't show the toc */}}
-    {{/* Elif the front matter parameter is not set, show the toc if the site parameter is set, non-negative, and less than the word count */}}
-    <p></p>
-    <div class="table-of-contents">
-      <details open="open">
-        <summary>
-          <span class="table-of-contents-title">Table of Contents</span>
-        </summary>
-        {{ $toc := .TableOfContents -}}
-        {{/* Workaround for an extra layer of indentation (https://discourse.gohugo.io/t/2303) */}}
-        {{- $toc := replaceRE `<nav(.*)>(\s*)<ul>\s*<li>\s*<ul>` `<nav${1}>${2}<ul>` $toc -}}
-        {{- $toc := replaceRE `</ul>\s*</li>\s*</ul>(\s*)</nav>` `</ul>${1}</nav>` $toc -}}
-        {{- safeHTML $toc }}
-      </details>
-    </div>
-  {{ end }}
-  {{ .Content | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" (printf "${1}<a href=\"#${2}\" class=\"heading-anchor\" aria-label=\"Anchor\"><img src=\"%s\" class=\"color-adapting-image\" height=\"20\"></a>${3}" ("images/chain-link.svg" | relURL)) | safeHTML }}
+    {{ if or (.Params.toc) (and (ne .Params.toc false) (isset .Site.Params "tocwordthreshold") (ge .Site.Params.TocWordThreshold 0) (gt .WordCount .Site.Params.TocWordThreshold)) }}
+      {{/* If the front matter parameter is true, show the toc */}}
+      {{/* Elif the front matter parameter is false, don't show the toc */}}
+      {{/* Elif the front matter parameter is not set, show the toc if the site parameter is set, non-negative, and less than the word count */}}
+      <p></p>
+      <div class="table-of-contents">
+        <details open="open">
+          <summary>
+            <span class="table-of-contents-title">Table of Contents</span>
+          </summary>
+          {{ $toc := .TableOfContents -}}
+          {{/* Workaround for an extra layer of indentation (https://discourse.gohugo.io/t/2303) */}}
+          {{- $toc := replaceRE `<nav(.*)>(\s*)<ul>\s*<li>\s*<ul>` `<nav${1}>${2}<ul>` $toc -}}
+          {{- $toc := replaceRE `</ul>\s*</li>\s*</ul>(\s*)</nav>` `</ul>${1}</nav>` $toc -}}
+          {{- safeHTML $toc }}
+        </details>
+      </div>
+    {{ end }}
+  </header>
+  {{ .Content | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" (printf "${1}<aside class=\"heading-anchor\"><a href=\"#${2}\" aria-label=\"Anchor\"><img src=\"%s\" class=\"color-adapting-image\" height=\"20\"></a></aside>${3}" ("images/chain-link.svg" | relURL)) | safeHTML }}
 {{ end }}
diff --git a/static/css/styles.css b/static/css/styles.css
index c61d7b5..ca2a00d 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -41,12 +41,14 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .heading-anchor {
+	/* this is used on an "aside" tag so that it's not shown in the browser's reader mode */
+	display: inline;
 	color: grey;
 	margin-left: 0.5em;
 	font-size: 0.75em;
 }
 
-.heading-anchor:hover {
+.heading-anchor a:hover {
 	text-decoration: none;
 }