Re: Code recommendation for numbered endnotes

Hi Harry,

Thanks for the response! For our content we’re in a similar situation you were in where we would need to replicate the print experience in the book.

Do you know the particular usability issues with solution 1?

Thanks again for your thoughts on this.

Alex

From: Harry Loots <harry.loots@ieee.org>
Date: Wednesday, May 12, 2021 at 12:24 PM
To: "Grover, Alex" <agrover@penguinrandomhouse.com>
Cc: W3C WAI ig <w3c-wai-ig@w3.org>
Subject: Re: Code recommendation for numbered endnotes

CAUTION: This email originated from outside of Penguin Random House. Please be extra cautious when opening file attachments or clicking on links.

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<mailto: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:

[https://jira.penguinrandomhouse.com/plugins/servlet/jeditor_file_provider?imgId=ckupload202105125039456714292383660&fileName=Screen+Shot+2021-05-12+at+9.38.06+AM.jpg][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<http://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:

[https://jira.penguinrandomhouse.com/plugins/servlet/jeditor_file_provider?imgId=ckupload202105128476232070403354273&fileName=Screen+Shot+2021-05-12+at+9.35.42+AM.jpg][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<http://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