Introduction

What are footnotes

Footnotes are short notes that add context to something you just read. You usually see them as a small reference in the text, with the full note shown at the end of the article or section.

They are useful when you want to add additional content without disrupting the main flow of the page. Think things like sources or citations, extra non-essential details, clarifications or just additional notes.

They are convenient because not every reader needs every detail. Good writing often balances two goals: being clear and easy to read, and being complete and well-supported. Footnotes help you do both at once: the core message stays readable, and extra context is still available when someone wants it.

Footnotes are a good fit when:

• the note is useful but optional
• removing it would make the text cleaner
• readers might reasonably want both the short and long version

Try to avoid them when:

• the information is essential to understanding the sentence
• the note is so long it should be its own paragraph
• you are adding too many notes and they become distracting

A simple rule of thumb is to use footnotes for “nice to know,” not for “must know.”

What is this

This website is about making footnotes accessible on the web — which can be tricky. Accessible footnotes make it possible to attach extra information, context, or references to parts of your content without sacrificing accessibility.

This project collects several implementations of the same underlying idea:

• A React component (react-a11y-footnotes)
• An Eleventy plugin (eleventy-plugin-footnotes)
• A framework‑agnostic web component (accessible-footnotes)

All of them aim to:

• Keep the reading experience smooth for keyboard and screen‑reader users
• Use proper semantic roles for notes and note references
• Make it easy to style the visual appearance independently of the behaviour

If you already know which stack you are using, you can jump directly to the implementation that matches it. Otherwise, start with the guidelines and “choosing an implementation” pages.