setting up markdown-it-footnote to be like 10% more accessible

If you’re here, it’s because you, like me, dislike putting shortcodes in your markdown, so you’re using markdown-it-footnote instead of the correctly-accessible option. You probably have far saner reasons than I, but this does mean we’re both using something that, from the standpoint of “can everyone read this in an equally comprehensive amount”, is kind of ass for our footnotes.

let’s make it slightly less ass

First things first, you’ll need a CSS class that lets you hide shit. I yoinked the example from a11yproject for mine, class name and all:

.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

Once you do that, you’re going to replace the fuck out of some rules. Here’s an extremely culled config of what that might look like:

const md = require("markdown-it");
const footnotes = require("markdown-it-footnote");

const options = {
		html: true,
		breaks: true,
		linkify: false,
		typographer: true,
	};
	
const mdengine = md(options).use(footnotes)

mdengine.renderer.rules.footnote_ref = (tokens, idx, options, env, slf) => {
	const id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf)
	let refid = id
	let n = Number(tokens[idx].meta.id + 1).toString()
	if (tokens[idx].meta.subId > 0) refid += `:${tokens[idx].meta.subId}`

	return `
	<sup class="footnote-ref">
	<a href="#fn${id}" id="fnref${refid}">
	<span aria-hidden="true">[${n}]</span>
	<span class="visually-hidden">Link to footnote ${n}</span>
	</a>
	</sup>`
};

mdengine.renderer.rules.footnote_anchor = (tokens, idx, options, env, slf) => {
	let id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf)
	let n = Number(tokens[idx].meta.id + 1).toString()
	if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`

	return `
	<a href="#fnref${id}" class="footnote-backref">
	<span aria-hidden="true">\u21a9\uFE0E</span>
	<span class="visually-hidden">Return to article via footnote ${n}</span>
	</a>`
};

module.exports = function (eleventyConfig) {
	eleventyConfig.setLibrary("md", mdengine);
};

The relevant stuff is in the middle, wherein we use .renderer.rules to mess with the tags the footnotes plugin wants to insert. Ideally, you’d want to be able to give these an actual label, especially since [^cool-note-title] is valid syntax, but if there is an easy way to do that, it’s not something I can rip right out of the plugin’s own code. You’d think footnote_anchor_name or footnote_caption would do it, but nope.

I at least keep it kind of sane, by labeling each by the footnote number. So, using this very page’s own footnote as an example,^{[1]Link to footnote 1} we get

<!-- the ref tag -->
<sup class="footnote-ref">
	<a href="#fn-ten-percent-more-accessible-footnotes-1" id="fnref-ten-percent-more-accessible-footnotes-1">
		<span aria-hidden="true">[1]</span>
		<span class="visually-hidden">Link to footnote 1</span>
	</a>
</sup>

<!-- the footnote anchor -->
<a href="#fnref-ten-percent-more-accessible-footnotes-1" class="footnote-backref">
	<span aria-hidden="true">↩︎</span>
	<span class="visually-hidden">Return to article via footnote 1</span>
</a>

This is still not great; again, you’d actually want to be able to give a more customizable label, and javascript is old sorcery shit that frightens me so I can’t say I’d be able to do that. It is, at the very least, something.