How I implement accessible footnotes, at least to the best of my ability. Written for 32-Bit Cafe's Community Code Jam #5.
- 4,069 words. + 5,535 words. Posted on by Leilukin
+Last updated on
+Categories: @@ -471,7 +473,9 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
Plagiarism.org defines footnotes as notes placed at the bottom of a page, and what footnotes do is to cite references or comment on a designated part of the text above it.
-My use case of footnotes is citing sources of information, particularly citing the same source multiple times on the same page when information from the same source is spread across my page. As of this writing, my website pages that use footnotes include the trivia page of my A Summer’s End — Hong Kong 1986 shrine 1 and the facts page of my Cassette Beasts shrine. You are free to look at the HTML and CSS for reference, including when you are reading this article as I am explaining how I implement the footnotes.
+My use case of footnotes is citing sources of information, particularly citing the same source multiple times on the same page when information from the same source is spread across my page. As of this writing, my website pages that use footnotes include the trivia page of my A Summer’s End — Hong Kong 1986 shrine 1 and the facts page of my Cassette Beasts shrine. You are free to look at the HTML and CSS for reference.
Footnotes are used both on print and on the web. However, maintaining footnotes on the web can be tedious, especially if you want to update a web page to add or remove them, since you will need to change the number references of existing footnotes.
Creating and maintaining footnotes on web pages is tricky, so I hope my article about accessible footnotes is helpful if you want to create them.
I am still not completely certain if my method is the best, although I tried to the best of my abilities, so I am interested in hearing feedback for my way of implementing accessible footnotes.
+On 3 December 2024, ~hedy emailed me talking about this article, offering additional tips for improving footnotes. She also recommended me to check out Seirdy's blog as a reference for formatting footnotes.
+I found ~hedy's suggestions good, so I made further improvements to my footnotes, by enlarging the target area of links. To achieve this, I changed the reference labels and footnote backlinks by using visible longer link text instead of ARIA labels.
+Specifically, for reference labels, I now use "[Note 1]" instead of just a number like "[1]", while for footnote backlinks, I use "↩︎ Back to reference 1" instead of just a ↩︎ symbol.
+In addition, I wrap each footnote backlink in a paragraph element (<p>), to place each backlink per line to improve footnotes' readability.
Larger link target area is even better because mobile device users would find it easier to tap on the reference links and the footnote backlinks, and sighted visitors on desktop are also benefited because they can see the purpose of these links on plain slight.
+Here is an example of how the final HTML markup would look like with larger link target area:
+<p>This is a paragraph with the first footnote reference. <sup class="footnote-ref"><a href="#fn1" id="fnref1">[Note 1]</a></sup></p>
+
+<p>Here is the second paragraph with the second footnote reference. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[Note 2]</a></sup></p>
+
+<p>This the third paragraph, but with a foootnote reference that points to the first footnote. <sup class="footnote-ref"><a href="#fn1" id="fnref1:1">[Note 1:1]</a></sup></p>
+
+<hr class="footnotes-sep">
+<section class="footnotes">
+ <h2>Footnotes</h2>
+ <ol class="footnotes-list">
+ <li id="fn1" class="footnote-item">
+ First footnote
+ <p><a href="#fnref1" class="footnote-backref">↩︎ Back to reference 1</a></p>
+ <p><a href="#fnref1:1" class="footnote-backref">↩︎ Back to reference 1:1</a></p>
+ </li>
+ <li id="fn2" class="footnote-item">
+ Second footnote
+ <p><a href="#fnref2" class="footnote-backref">↩︎ Back to reference 2</a></p>
+ </li>
+ </ol>
+</section>Here is the code of the configuration for the markdown-it-footnotes plugin:
+// markdown-it plugins
+const markdownIt = require("markdown-it");
+const markdownItFootnote = require("markdown-it-footnote");
+let markdownLibrary;
+
+module.exports = function (eleventyConfig) {
+ /* Markdown Overrides */
+ markdownLibrary = markdownIt({
+ html: true,
+ }).use(markdownItFootnote);
+
+ // Configure markdown-it-footnote
+ markdownLibrary.renderer.rules.footnote_block_open = () => (
+ '<hr class="footnotes-sep">\n' +
+ '<section class="footnotes">\n' +
+ `<h2>Footnotes</h2>\n`
+ );
+
+ markdownLibrary.renderer.rules.footnote_anchor = (tokens, idx, options, env, slf) => {
+ let id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf);
+
+ if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`;
+
+ /* ↩ with escape code to prevent display as Apple Emoji on iOS */
+ return `
+ <p class="footnote-item__back">
+ <a href="#fnref${id}" class="footnote-backref">
+ <span aria-hidden="true">\u21a9\uFE0E</span>
+ Back to reference ${id}
+ </a>
+ </p>
+ `;
+ };
+
+ const renderRules = {
+ footnote_caption: ['[', '[Note '],
+ };
+ Object.keys(renderRules).map(rule => {
+ let defaultRender = markdownLibrary.renderer.rules[rule];
+ markdownLibrary.renderer.rules[rule] = (tokens, idx, options, env, self) => {
+ return defaultRender(tokens, idx, options, env, self).replace(...renderRules[rule]);
+ }
+ });
+
+ /* This is the part that tells 11ty to swap to our custom config */
+ eleventyConfig.setLibrary("md", markdownLibrary);
+}Michelle Cheung's Chinese name is 張鳳霞, while Sam Wong's Chinese name is 黃嘉欣[Footnote #1]. Oracle and Bone had commented on their idea behind the characters' Chinese names in a response to a fan's question on Tumblr:
+Michelle Cheung's Chinese name is 張鳳霞, while Sam Wong's Chinese name is 黃嘉欣[Note 1]. Oracle and Bone had commented on their idea behind the characters' Chinese names in a response to a fan's question on Tumblr:
@@ -481,32 +481,32 @@A part of how we came up with their names was by referencing names of Hong Kong film actresses from their time period as a little homage to them. We also thought of how their names might reflect their upbringing. For example, despite Michelle being younger than Sam, she has a more old fashioned sounding Chinese name. The meaning of their Chinese names was also important to us. We particularly wanted Michelle’s name to have metaphoric meaning that reflected her story as well as the themes of the game.
On 12 October 2023, Bytten Studio wrote a Steam blog post "Cassette Beasts - Design & Expectations" about their design philosophy of Cassette Beasts to celebrate the game reaching 350,000+ players.
-Cassette Beasts very consciously opens with exploration and combat within the first minute of the game and leaves the lore for later, because Bytten Studio believes in giving players the game first and selling the players on the story later.[Footnote #2]
+Cassette Beasts very consciously opens with exploration and combat within the first minute of the game and leaves the lore for later, because Bytten Studio believes in giving players the game first and selling the players on the story later.[Note 2]
The YouTube channel Lockstin & Gnoggin has a video that explains the names and designs of the monsters and Archangels: EVERY Cassette Beast EXPLAINED! 🖭. The video was retweeted by Bytten Studio.
-The idea of copying monster forms to transform into came from Tom Coxon's dream. Jay Baylis, inspired by Kamen Rider, later suggested doing the copying and transforming with physical cassette tapes.[Footnote #1:1]
-Another oddball source of inspiration for Tom the story “The Beatles Never Broke Up”, about a man who in 2009 hit his head and woke up in another world where the Beatles still exist, where people still use analogue technology, and where parallel universe travel is commonplace.[Footnote #1:2]
-The presentation of Archangels is inspired a little by the Witches in Puella Magi Madoka Magica.[Footnote #1:3]
-The way the relationship system ties into fusions is heavily influenced by Steven Universe, which both Tom and Jay are fans of.[Footnote #1:4]
-The AP system in Cassette Beasts is taken from board and card games.[Footnote #1:5]
-Jay cited comic author Grant Morrison as an influence on the broader themes of the game (as well as the strange English surrealism of the setting), as Morrison's stories often explore the nature of fiction, multiple realities, and their influence on one another.[Footnote #1:6]
-Archangels Morgante and Aleph were inspired by Morgan le Fay and King Arthur from Arturian legends, but with an unusual twist that Aleph is portrayed as a conqueror instead of a "rightful king" to reflect Britain's history of conquest.[Footnote #3]
-The ideas for the other Archangels came after Morgante and Aleph. Their themes were kind of arbitrarily chosen to match the design Jay had given them.[Footnote #3:1]
-Bytten Studio made a point to not put in a huge amount of Japanese mythological monsters in comparison to mythology from other nations, especially since well-known mons franchises such as Shin Megami Tensei, Pokémon and Digimon are Japanese franchises; they do not want to seem derivative.[Footnote #4]
-Barkley was not inspired by anything in particular; he was added in the game to surprise players as a non-human partner.[Footnote #5]
+The idea of copying monster forms to transform into came from Tom Coxon's dream. Jay Baylis, inspired by Kamen Rider, later suggested doing the copying and transforming with physical cassette tapes.[Note 1:1]
+Another oddball source of inspiration for Tom the story “The Beatles Never Broke Up”, about a man who in 2009 hit his head and woke up in another world where the Beatles still exist, where people still use analogue technology, and where parallel universe travel is commonplace.[Note 1:2]
+The presentation of Archangels is inspired a little by the Witches in Puella Magi Madoka Magica.[Note 1:3]
+The way the relationship system ties into fusions is heavily influenced by Steven Universe, which both Tom and Jay are fans of.[Note 1:4]
+The AP system in Cassette Beasts is taken from board and card games.[Note 1:5]
+Jay cited comic author Grant Morrison as an influence on the broader themes of the game (as well as the strange English surrealism of the setting), as Morrison's stories often explore the nature of fiction, multiple realities, and their influence on one another.[Note 1:6]
+Archangels Morgante and Aleph were inspired by Morgan le Fay and King Arthur from Arturian legends, but with an unusual twist that Aleph is portrayed as a conqueror instead of a "rightful king" to reflect Britain's history of conquest.[Note 3]
+The ideas for the other Archangels came after Morgante and Aleph. Their themes were kind of arbitrarily chosen to match the design Jay had given them.[Note 3:1]
+Bytten Studio made a point to not put in a huge amount of Japanese mythological monsters in comparison to mythology from other nations, especially since well-known mons franchises such as Shin Megami Tensei, Pokémon and Digimon are Japanese franchises; they do not want to seem derivative.[Note 4]
+Barkley was not inspired by anything in particular; he was added in the game to surprise players as a non-human partner.[Note 5]
Jay Baylis' favourite monster catching game is Pokémon Ruby/Sapphire.[Footnote #6]
-Tom Coxon's favourite monster catching game is Siralim Ultimate.[Footnote #7]
+Jay Baylis' favourite monster catching game is Pokémon Ruby/Sapphire.[Note 6]
+Tom Coxon's favourite monster catching game is Siralim Ultimate.[Note 7]
"Cassette Beasts Blog #13 - You asked, we answered!". Cassette Beasts Steam blog. 28 February 2023. ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎
+"Cassette Beasts Blog #13 - You asked, we answered!". Cassette Beasts Steam blog. 28 February 2023. +
+ ++ + + Back to reference 1:1 + +
+ ++ + + Back to reference 1:2 + +
+ ++ + + Back to reference 1:3 + +
+ ++ + + Back to reference 1:4 + +
+ + + + +Jay Baylis' (@SamuriFerret) quote tweet from @DavidKayConrad. 10 May 2024. ↩︎
+Jay Baylis' (@SamuriFerret) quote tweet from @DavidKayConrad. 10 May 2024. +
+Tom Coxon's (u/tcoxon) comment. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023. ↩︎ ↩︎
+Tom Coxon's (u/tcoxon) comment. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023. +
+ + +Jay Baylis's (samuri) message. Bytten Studio Discord server. 11 February 2024. ↩︎
+Jay Baylis's (samuri) message. Bytten Studio Discord server. 11 February 2024. +
+Tom Coxon's (u/tcoxon) comment. Bytten Studio's AMA on r/JRPG. 25 March 2024. ↩︎
+Tom Coxon's (u/tcoxon) comment. Bytten Studio's AMA on r/JRPG. 25 March 2024. +
+Jay Baylis' (u/SamuriFerret) comment. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023. ↩︎
+Jay Baylis' (u/SamuriFerret) comment. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023. +
+Tom Coxon's (u/tcoxon) comment. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023. ↩︎
+Tom Coxon's (u/tcoxon) comment. Bytten Studio's AMA on r/NintendoSwitch. 1 July 2023. +
+