I was wondering how y’all implement in-text citations or footnotes! In particular how you indicate which section of text is attributed to a source. Of course you can give an basic in-text citation at the end of a sentence, but how about if you want to credit one source for three consecutive sentances without repeating the same citation at the end of each sentence?
I was thinking about making a div with a class for a chunk of text from one source and the last link would be the citation which would be styled differently from the other links, maybe even in the margin of possible. The div would have a very faint box or corners on it to indicate which part of the text is being credited.
However this sounds annoying for when I want to reorder or update info. I also am not sure the appropriate way to indicate a section of text is associated with the source link for screen reader users
Since I use Eleventy, which has the markdown-it plugin built in to render Markdown as HTML, to build my website, I use the markdown-it-footnote plugin to generate footnotes, with additional configurations to make the output more accessible and screen reader friendly.
Kitty Giraudel wrote an article about accessible footnotes, 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. She also created an accessible footnote plugin for Eleventy, which I had tried out once, with this method.
Footnotes are indeed tricky to implement on web pages, so I am happy to share what I learned.