When I was searching for how to implement accessible footnotes, I discovered Kitty Giraudel's article, "Accessible Footnotes with CSS" which teaches the method of using the combination of HTML aria-describedby attribute and CSS counters to add numbered references, to reduce the hassle of manually re-numbering all existing footnotes in case you want to update or reorder the references.
Her article also teaches adding a highlight background colour when heading to a footnote from a reference, as well as providing back links to head back to a reference from a footnote, by using the combination of the backlink Unicode icon (↩) and the HTML aria-label attribute with a value of “Back to content”. The uses of ARIA labels make footnotes more screen reader-friendly.
Unfortunately, a known limitation of using CSS counter method to generate footnotes is not being able to reference the same footnote multiple times. As I want to be able to reference the same footnote more than once when I am citing sources on my shrine pages, I had to give up the plugin and look for an alternative.
Starting with markdown-it-footnote Plugin's Default Footnote Markup
diff --git a/feed.xml b/feed.xml
index 84ada57a..b12e8fec 100644
--- a/feed.xml
+++ b/feed.xml
@@ -4,7 +4,7 @@
Leilukin's personal website.
- 2024-08-06T14:20:12Z
+ 2024-08-06T14:34:19Zhttps://leilukin.com/Leilukin
@@ -43,7 +43,7 @@
<a class="heading-anchor" href="https://leilukin.com/articles/accessible-footnotes/#attempted-to-use-css-counters" aria-labelledby="attempted-to-use-css-counters"><span hidden="">#</span></a></div>
<p>When I was searching for how to implement accessible footnotes, I discovered <a href="https://kittygiraudel.com/">Kitty Giraudel</a>'s article, <a href="https://www.sitepoint.com/accessible-footnotes-css/">"Accessible Footnotes with CSS"</a> which teaches the method of using the combination of HTML <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby"><code>aria-describedby</code></a> attribute and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters">CSS counters</a> to add numbered references, to reduce the hassle of manually re-numbering all existing footnotes in case you want to update or reorder the references.</p>
<p>Her article also teaches adding a highlight background colour when heading to a footnote from a reference, as well as providing back links to head back to a reference from a footnote, by using the combination of the backlink Unicode icon (↩) and the HTML <code>aria-label</code> attribute with a value of “Back to content”. The uses of ARIA labels make footnotes more screen reader-friendly.</p>
-<p>Furthermore, Kitty created the <a href="https://github.com/KittyGiraudel/eleventy-plugin-footnotes">eleventy-plugin-footnotes plugin</a>tor the static site generator <a href="https://www.11ty.dev/">Eleventy</a>, and wrote a blog post about it, <a href="https://kittygiraudel.com/2020/12/02/footnotes-in-11ty/">"Footnotes in 11ty"</a>. Since I already had begun to <a href="https://leilukin.com/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy">use Eleventy to build my website</a>, I tried Kitty's plugin.</p>
+<p>Furthermore, Kitty created the <a href="https://github.com/KittyGiraudel/eleventy-plugin-footnotes">eleventy-plugin-footnotes plugin</a> for the static site generator <a href="https://www.11ty.dev/">Eleventy</a>, and wrote a blog post about it, <a href="https://kittygiraudel.com/2020/12/02/footnotes-in-11ty/">"Footnotes in 11ty"</a>. Since I already had begun to <a href="https://leilukin.com/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy">use Eleventy to build my website</a>, I tried Kitty's plugin.</p>
<p>Unfortunately, a known limitation of using CSS counter method to generate footnotes is <a href="https://github.com/KittyGiraudel/eleventy-plugin-footnotes/issues/83">not being able to reference the same footnote multiple times</a>. As I want to be able to reference the same footnote more than once when I am citing sources on my shrine pages, I had to give up the plugin and look for an alternative.</p>
<div class="heading-wrapper h2">
<h2 id="starting-with-markdown-it-footnote-plugins-default-footnote-markup">Starting with markdown-it-footnote Plugin's Default Footnote Markup</h2>