Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Build: (593223e) Fix typo in the eleventy-plugin-footnotes plugin paragraph

This commit is contained in:
helenclx 2024-08-06 14:34:23 +00:00
parent a462ca9f0e
commit 6055461a90
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
articles/accessible-footnotes/index.html
View File

@ -498,7 +498,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<a class="heading-anchor" href="#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="/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="/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>

4
feed.xml
View File

@ -4,7 +4,7 @@
<subtitle>Leilukin&#39;s personal website.</subtitle>
<link href="https://leilukin.com/feed.xml" rel="self"/>
<link href="https://leilukin.com"/>
<updated>2024-08-06T14:20:12Z</updated>
<updated>2024-08-06T14:34:19Z</updated>
<id>https://leilukin.com/</id>
<author>
<name>Leilukin</name>
@ -43,7 +43,7 @@
&lt;a class=&quot;heading-anchor&quot; href=&quot;https://leilukin.com/articles/accessible-footnotes/#attempted-to-use-css-counters&quot; aria-labelledby=&quot;attempted-to-use-css-counters&quot;&gt;&lt;span hidden=&quot;&quot;&gt;#&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;When I was searching for how to implement accessible footnotes, I discovered &lt;a href=&quot;https://kittygiraudel.com/&quot;&gt;Kitty Giraudel&lt;/a&gt;&#39;s article, &lt;a href=&quot;https://www.sitepoint.com/accessible-footnotes-css/&quot;&gt;&amp;quot;Accessible Footnotes with CSS&amp;quot;&lt;/a&gt; which teaches the method of using the combination of HTML &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby&quot;&gt;&lt;code&gt;aria-describedby&lt;/code&gt;&lt;/a&gt; attribute and &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters&quot;&gt;CSS counters&lt;/a&gt; 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.&lt;/p&gt;
&lt;p&gt;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 &lt;code&gt;aria-label&lt;/code&gt; attribute with a value of “Back to content”. The uses of ARIA labels make footnotes more screen reader-friendly.&lt;/p&gt;
&lt;p&gt;Furthermore, Kitty created the &lt;a href=&quot;https://github.com/KittyGiraudel/eleventy-plugin-footnotes&quot;&gt;eleventy-plugin-footnotes plugin&lt;/a&gt;tor the static site generator &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;Eleventy&lt;/a&gt;, and wrote a blog post about it, &lt;a href=&quot;https://kittygiraudel.com/2020/12/02/footnotes-in-11ty/&quot;&gt;&amp;quot;Footnotes in 11ty&amp;quot;&lt;/a&gt;. Since I already had begun to &lt;a href=&quot;https://leilukin.com/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy&quot;&gt;use Eleventy to build my website&lt;/a&gt;, I tried Kitty&#39;s plugin.&lt;/p&gt;
&lt;p&gt;Furthermore, Kitty created the &lt;a href=&quot;https://github.com/KittyGiraudel/eleventy-plugin-footnotes&quot;&gt;eleventy-plugin-footnotes plugin&lt;/a&gt; for the static site generator &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;Eleventy&lt;/a&gt;, and wrote a blog post about it, &lt;a href=&quot;https://kittygiraudel.com/2020/12/02/footnotes-in-11ty/&quot;&gt;&amp;quot;Footnotes in 11ty&amp;quot;&lt;/a&gt;. Since I already had begun to &lt;a href=&quot;https://leilukin.com/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy&quot;&gt;use Eleventy to build my website&lt;/a&gt;, I tried Kitty&#39;s plugin.&lt;/p&gt;
&lt;p&gt;Unfortunately, a known limitation of using CSS counter method to generate footnotes is &lt;a href=&quot;https://github.com/KittyGiraudel/eleventy-plugin-footnotes/issues/83&quot;&gt;not being able to reference the same footnote multiple times&lt;/a&gt;. 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.&lt;/p&gt;
&lt;div class=&quot;heading-wrapper h2&quot;&gt;
&lt;h2 id=&quot;starting-with-markdown-it-footnote-plugins-default-footnote-markup&quot;&gt;Starting with markdown-it-footnote Plugin&#39;s Default Footnote Markup&lt;/h2&gt;