diff --git a/src/_components/footnotes.vto b/src/_components/footnotes.vto
new file mode 100644
index 0000000..508a4ec
--- /dev/null
+++ b/src/_components/footnotes.vto
@@ -0,0 +1,9 @@
+<hr class="border-overlay1 mb-2">
+<ul>
+    {{ for fn of footnotes }}
+        <li class="fn" id="{{ fn.id }}">
+            <span class="fn-label">{{ fn.rawId }}</span>: {{ fn.content }}
+            <a href="#{{ fn.refId }}" class="fn-backref" aria-label="Back to reference"></a>
+        </li>
+    {{ /for }}
+</ul>
diff --git a/src/_components/head.vto b/src/_components/head.vto
index 34dbdf5..581ed67 100644
--- a/src/_components/head.vto
+++ b/src/_components/head.vto
@@ -25,4 +25,23 @@
 <title>{{ title }}</title>
 {{ if !production }}
     <script defer="defer" src="/static/scripts/open-in-editor.js"></script>
+    {{# Load Sa11y #}}
+    <link rel="preconnect" href="https://cnd.jsdelivr.net">
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/gh/ryersondmp/sa11y@latest/dist/css/sa11y.min.css"
+    />
+    <script
+        src="https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@latest/dist/js/lang/en.umd.js,gh/ryersondmp/sa11y@latest/dist/js/sa11y.umd.min.js"
+    ></script>
+    <script>
+        Sa11y.Lang.addI18n(Sa11yLangEn.strings);
+      const sa11y = new Sa11y.Sa11y({
+        checkRoot: "body",
+        readabilityRoot: "main",
+        developerChecksOnByDefault: true,
+        showGoodLinkButton: false,
+        showGoodImageButton: false,
+      });
+    </script>
 {{ /if }}
diff --git a/src/_components/table_of_contents.vto b/src/_components/table_of_contents.vto
new file mode 100644
index 0000000..2312a6b
--- /dev/null
+++ b/src/_components/table_of_contents.vto
@@ -0,0 +1,20 @@
+<nav class="toc">
+    <h2 class="text-overlay1 mb-1">Table of Contents</h2>
+    <ol class="toc-l1">
+        {{ for item of toc }}
+            <li>
+                <a href="#{{ item.slug }}">{{ item.text }}</a>
+
+                {{ if item.children.length }}
+                    <ul>
+                        {{ for child of item.children }}
+                            <li class="toc-l2">
+                                <a href="#{{ child.slug }}">{{ child.text }}</a>
+                            </li>
+                        {{ /for }}
+                    </ul>
+                {{ /if }}
+            </li>
+        {{ /for }}
+    </ol>
+</nav>
diff --git a/src/_components/webring.vto b/src/_components/webring.vto
index dcc337c..9414857 100644
--- a/src/_components/webring.vto
+++ b/src/_components/webring.vto
@@ -2,10 +2,14 @@
     class="mb-2 lg:mb-4 px-2 py-1 bg-surface0 text-center text-lg rounded-md w-full sm:w-1/2 xl:w-1/3"
 >
     <p><a href="{{ring.all}}" class="text-serif text-2xl text-mauve">{{ ring.name }}</a></p>
-    <a href="{{ring.previous}}" class="text-green">&lt; Previous</a> |
+    <a href="{{ring.previous}}" class="text-green" aria-label="Previous site in the {{ring.name}}"
+    >&lt; Previous</a> |
     {{ if ring.random }}
-        <a href="{{ring.random}}" class="text-peach">Random</a> |
+        <a href="{{ring.random}}" class="text-peach" aria-label="Random site in the {{ring.name}}"
+        >Random</a> |
     {{ /if }}
-    <a href="{{ring.all}}" class="text-sapphire">All</a> |
-    <a href="{{ring.next}}" class="text-maroon">Next &gt;</a>
+    <a href="{{ring.all}}" class="text-sapphire" aria-label="Site list for the {{ring.name}}"
+    >All</a> |
+    <a href="{{ring.next}}" class="text-maroon" aria-label="Next site in the {{ring.name}}"
+    >Next &gt;</a>
 </li>
diff --git a/src/_includes/layouts/blog-post.vto b/src/_includes/layouts/blog-post.vto
index 5313fe5..19bb9a1 100644
--- a/src/_includes/layouts/blog-post.vto
+++ b/src/_includes/layouts/blog-post.vto
@@ -2,20 +2,38 @@
     <main class="min-h-screen text-text justify-self-center w-full lg:w-1/2">
         <article class="h-entry">
             <h1 class="text-5xl font-serif mt-8 p-name">{{ title }}</h1>
-            <h2 class="text-2xl font-sans mt-4 text-subtext0">
+
+            <h2 class="mt-4 text-subtext0">
                 Published on
                 <time class="dt-published" datetime="{{ published |> date }}">
                     {{ published |> date('POST_DATE') }}
                 </time>
             </h2>
-            <h2 class="text-2xl font-sans mb-8 text-overlay1">
+
+            <h2 class="hidden text-overlay1">
                 By
                 <span class="inline p-author h-card">{{ author.name }}</span>
             </h2>
 
+            <h2 class="text-overlay1">
+                {{ readingInfo.words }} words, about {{ readingInfo.minutes }}
+                minute{{ if readingInfo.minutes != 1 }}s{{ /if }}
+            </h2>
+
+            {{ if toc.length }}
+                {{ await comp.table_of_contents({"toc": toc}) }}
+            {{ else }}
+                <div class="mb-8"></div>
+            {{ /if }}
+
             <div class="e-content text-lg">
                 {{ content }}
             </div>
         </article>
+        {{ if footnotes.length }}
+            <section aria-label="Footnotes">
+                {{ await comp.footnotes({"footnotes": footnotes }) }}
+            </section>
+        {{ /if }}
     </main>
 {{ /layout }}