Re: Code recommendation for numbered endnotes

Hi Alex

For what it's worth...

I recently published an EPUB. It contained several footnotes/endnotes. I
moved all of these into the main body of content for several reasons:
1. The note is read in context and does not require forward / backward
navigation.
2. Navigating to an anchor is not always accurate, and readers may end up
in the middle of a page, well above the anchor, if there's insufficient
text below the anchor point. While this may not be an issue for
text-to-speech, it is a problem for those with other reasons.

Neither of these are ideal, and rather than causing additional issues I
decided that a more accessible approach would be to incorporate footnotes
inline.


Ps! If I have to make a choice between 1 and 2, I'd select 2. I've used
this in an actual website in the past, where the organisation insisted on
replicating the printed document, and it passed all usability tests, even
though it slowed users down.

A better solution, I used on another site, was to use show / hide text to
expand / collapse the text associated with the footnote reference.

Kindest regards
Harry



On Wed, 12 May 2021, 17:08 Grover, Alex, <agrover@penguinrandomhouse.com>
wrote:

> Hi there,
>
>
>
> We are revising our internal numbered endnote specification for EPUB based
> on accessibility needs, and we have come to two possible solutions, but we
> aren’t sure which one is best in practice.
>
> *Solution 1: Use ARIA roles and directly link endnote number*
>
>
>
> *Visual example:*
>
>
>
> [image:
> https://jira.penguinrandomhouse.com/plugins/servlet/jeditor_file_provider?imgId=ckupload202105125039456714292383660&fileName=Screen+Shot+2021-05-12+at+9.38.06+AM.jpg][image:
> data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D]
>
> *Code example:*
>
>       <div role="doc-endnotes">
>
>         <h1>Notes</h1>
>
>         <h2 class="head">Endnote Section Heading</h2>
>
>         <div class="endnotes" role="list">
>
>           <div id="endnote-1" role="listitem">
>
>             <p class="endnote"><span class="endnote"><a
> href="#endnote-ref-1" role="doc-backlink" title="note
> reference">1.</a></span> Reference content. <a href="www.google.com">External
> link</a>.</p>
>
>           </div>
>
>           <div id="endnote-2" role="listitem">
>
>             <p class="endnote"><span class="endnote"><a
> href="#endnote-ref-2" role="doc-backlink" title="note
> reference">2.</a></span> Reference content.</p>
>
>             <p class="endnote_con">Additional paragraph with indent.
> Continues for a few lines. May be followed by more paragraphs.</p>
>
>           </div>
>
>           ...
>
>         </div>
>
>       </div>
>
>
>
> *Solution 2: Use <ol> with additional reciprocal links*
>
>
>
> *Visual example:*
>
>
>
> [image:
> https://jira.penguinrandomhouse.com/plugins/servlet/jeditor_file_provider?imgId=ckupload202105128476232070403354273&fileName=Screen+Shot+2021-05-12+at+9.35.42+AM.jpg][image:
> data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D]
>
> *Code example:*
>
>       <div role="doc-endnotes">
>
>         <h1>Notes</h1>
>
>         <h2 class="head">Endnote Section Heading</h2>
>
>         <ol class="endnotes">
>
>           <li id="endnote-1" class="endnote">
>
>             <p class="endnote">Reference content. <a href="www.google.com">External
> link</a>. <a href="#endnote-ref-1" role="doc-backlink">Back to note
> reference 1</a>.</p>
>
>           </li>
>
>           <li id="endnote-2" class="endnote">
>
>             <p class="endnote">Reference content. <a href="#endnote-ref-2"
> role="doc-backlink">Back to note reference 2</a>.</p>
>
>             <p class="endnote_con">Additional paragraph with indent.
> Continues for a few lines. May be followed by more paragraphs.</p>
>
>           </li>
>
>           ...
>
>         </ol>
>
>       </div>
>
> *Endnote Reference, Code Example*
>
> ...<a id="endnote-ref-1" class="endnote" href="notes.xhtml#endnote-1"
> role="doc-noteref">1</a>...
>
>
>
> Is there a functional preference for either of these code practices? Also,
> should doc-footnote be used for individual endnotes?
>
>
>
> Thanks,
>
> Alex
>