Good accessibility practice for handling footnotes

Hello all,

I just wondered if there was an approved good practice for the use of accessible footnotes. We have some articles on our website that carry footnotes (currently numbered) that point to links further down the page.

Currently, a typical fragment looks a bit like this:
<p>Content in here<a href="#_ftn2" title="">[2]</a>.</p>

Then the footnote further down the page:
<div>
<p class="MsoFootnoteText"><a href="#_ftnref2" title="">[2]</a> the content source web link</p>

Would using the aria-describedby attribute as detailed by this writer be the best way forward? See https://www.sitepoint.com/accessible-footnotes-css/

I am guessing this scenario would affect research and education websites like ours rather than being a more general requirement.

If anyone can advise that would be great and then I can look at making it so (Jean-Luc Picard style).

Thank you, and sorry about all my questions!

With kind regards,
Louise

This email (and attachments) are confidential and intended for the addressee(s) only. If you are not the intended recipient please notify the sender, 
delete any copies and do not take action in reliance on it. Any views expressed are the author's and do not represent those of IOP, except where specifically 
stated. IOP takes reasonable precautions to protect against viruses but accepts no responsibility for loss or damage arising from virus infection. 
For the protection of IOP's systems and staff emails are scanned automatically. 

Institute of Physics. Registered charity no. 293851 (England & Wales) and SCO40092 (Scotland)
Registered Office:  37 Caledonian Road, London, N1 9BU