WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to do footnotes accessibly

for

From: Karl Brown
Date: Apr 27, 2017 12:58AM

Hugo Giraduel wrote an article on footnotes using HTML and CSS (no
JavaScript) in 2015 that I use as my go-to footnotes resource:
http://www.sitepoint.com/accessible-footnotes-css/

It uses IDs and CSS counters to achieve the footnotes.

If you're using a CMS it'd be worth having fields for the authors to make
sure they're using unique IDs for each footnote on a page.

On Wed, Apr 26, 2017 at 4:42 PM, Bryan Garaventa <
<EMAIL REMOVED> > wrote:

> The trick for accessible footnotes is to manage focus appropriately, and
> to provide intuitive roles, names, and descriptions. Here you can see an
> example of this at:
> http://whatsock.com/tsg/Coding%20Arena/Footnotes/
> Footnotes%20(Internal)/demo.htm
>
> This works across both desktop for keyboard based screen readers, for
> keyboard only users without a screen reader, and for mobile touch screen
> users. It also includes logic for multiple references accessing the same
> footnote and tracking them appropriately.
>
> You can download the code and see how this works if you wish, at
> https://github.com/accdc/tsg
>
> All the best,
> Bryan
>
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> <EMAIL REMOVED>
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>