Reader Mode Friendly sidenotes

There’s really no practical way to make sidenotes or marginalia “accessible” ^{1 1} without using JS. With JS, you can dynamically enhance accessibility.But without it, either the content gets cut off, effectively hiding it entirely and robbing the reader of important information, or it’s awkwardly inserted in between sentences if the HTML processor doesn’t support CSS*. ^{2 2}

The latter issue can be somewhat mitigated with this method. Resulting in sidenotes displayed in reader mode as below.

On going sentence (sidenote:  ...)

Assuming the following the sidenotes.html shortcode file.

{{ $sidenoteDomIdSuffix := .Ordinal }}
<label
    tabindex="0"
    aria-describedby="sidenote-1"
    for="sidenote-{{.Page.File.UniqueID}}-{{ $sidenoteDomIdSuffix }}"
    class="margin-toggle sidenote-number"
> 
    {{ .Get "label" |markdownify }} 
</label>
<input
    aria-label="show sidenote"
    type="checkbox"
    tabindex="0"
    id="sidenote-{{.Page.File.UniqueID}}-{{ $sidenoteDomIdSuffix }}"
    class="margin-toggle sidenote-number"
/>
<span class="sidenote">
    <span class="sidenote-content-parenthesis"> (sidenote: </span>
    <span class="note-content">{{ .Inner | markdownify }}</span>
    <span class="sidenote-content-parenthesis"> ) </span>
</span>

The class that does the main work is sidenote-content-parenthesis, its not rendered in the client view when css is supported and vice versa.

.sidenote-content-parenthesis {
    display: none;
}

This does happen to be a workaround to get it working in reader-mode and screen readers, its subject to implementation differences in browsers. At the time of writing for example, chrome hides the reader mode behind a flag in chrome://flags.

EDIT: 2023-03-15: I’ve since moved away from doing sidenotes this way and stick to only using margin notes. FF seems to have drawn the line at not providing any option of rendering in the reader mode.