[Maedi and I have been looking at this together.]
Looking at the
<dfn> tag some more, the W3C appears to be even more strict than Mozilla:
If the dfn element is specified, nearest parent of the dfn element(paragraph, description list group, or section) must also contain the definitions for the defining term.
So yeah, maybe the
<dfn> is not needed in Maedi’s example as there is no definition provided in the parent. The main point in Maedi’s code is that we can have some nice structure inside the
<dl> linked up via the aria-describedby.
For our particular use case, a term can appear multiple times on a page and so we wanted a single place to put all of the terms and definitions. We felt that this was better than repeating definitions all through the document. That is why we have the
<dl> for all the definitions at the bottom of the page.
Looking more broadly, the aria-describedby will help ATs. However, for desktop browsers, there is no visual indication that there is extra information. A tool such as TippyJS can work in with the markup to provide the tooltip popup in this case. What is needed is some guidance on the recommended mechanism to do this. TippyJS is one solution but maybe there are others which are preferred.