Accessible HTML5 markup for side notes / remarks / person’s affiliation
I have an HTML5 document which includes content such as
Presenters: John Doe1, Jane Doe2*
( 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.