Accessible HTML5 markup for side notes / remarks / person's affiliation

Question

I have an HTML5 document which includes content such as

Presenters: John Doe¹, Jane Doe^2*

( lots of text)
(...)

1: University of Foo
2: Institute of Bar
*: Presenting author

So there are side notes/additional information to entities (persons here), indicated by superscript, similar to Wikipedia's concept of references, citations, and notes.

How can I mark up such information in an accessible and semantic way, compliant with WCAG 2.x standards, especially considering visually impaired users / screenreader users, in such a way that these users don't get lost in understanding the meaning of either the superscript or their explanatory references?

I could imagine a screenreader user to get confused when skimming this document, then having their screenreader announce "Two: Institute of Bar" without context.

Answer 1

The simplest way to do this is with a hyperlink pointing to the reference, plus a tiny bit of WAI-ARIA to make the link announcement a little more friendly (as screen reader users may cycle through links on a page so they need to make sense "out of context").

Here is a jsFiddle demonstrating the code below.

<p>
  Presenters: John Doe<a href="#ref1" aria-label="reference 1"><sup>1</sup></a>, Jane Doe<a href="#ref2" aria-label="reference 2"><sup>2</sup></a><a href="#ref3" aria-label="note"><sup>*</sup></a>
</p>
<p>
  &nbsp;
</p>

( lots of text)
(...)

<h2>
  References and notes
</h2>
<ul>
  <li><a name="ref1">1: University of Foo</a></li>
  <li><a name="ref2">2: Institute of Bar</a></li>
  <li><a name="ref2">*: Presenting author</a></li>
</ul>

A much better way would be to make an accessible tooltip that shows the information when the number receives focus / is hovered, but that is a lot more involved.