diff --git a/articles/accessible-footnotes/index.html b/articles/accessible-footnotes/index.html index 22a183a4..0e6533a1 100644 --- a/articles/accessible-footnotes/index.html +++ b/articles/accessible-footnotes/index.html @@ -498,7 +498,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

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.

-

Furthermore, Kitty created the eleventy-plugin-footnotes plugintor the static site generator Eleventy, and wrote a blog post about it, "Footnotes in 11ty". Since I already had begun to use Eleventy to build my website, I tried Kitty's plugin.

+

Furthermore, Kitty created the eleventy-plugin-footnotes plugin for the static site generator Eleventy, and wrote a blog post about it, "Footnotes in 11ty". Since I already had begun to use Eleventy to build my website, I tried Kitty's plugin.

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:19Z https://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/">&quot;Accessible Footnotes with CSS&quot;</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/">&quot;Footnotes in 11ty&quot;</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/">&quot;Footnotes in 11ty&quot;</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>