0

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.

5
  • This might be flagged as an implementation question. You do have a UX question here - are footnotes a good user experience? You might want to not make users using any device jump between what they're reading and a footnote. Consider embedding the information near the speaker's name.
    – Izquierdo
    Feb 7, 2022 at 20:24
  • 1
    Yes, this sounds like an implementation question better suited to stackoverflow.com but here's what I usually refer to to make accessible footnotes, sitepoint.com/accessible-footnotes-css Feb 8, 2022 at 2:14
  • The question is too broad for any SE-site. This is about basic HTML knowledge so I suggest to search for guidelines, tutorials etc.
    – jazZRo
    Feb 8, 2022 at 8:05
  • @jazzro - if this question really was about "basic HTML knowledge", my search had found guidelines, tutorials, etc. Please point one out to me, especially considering accessibility.
    – Abdull
    Feb 8, 2022 at 8:49
  • A search for HTML semantics should give enough sources to start with. Studying the semantics of the different HTML elements should give an understanding of how, when and where to use them. They are the basis of an accessible document.
    – jazZRo
    Feb 9, 2022 at 16:54

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.