Better Footnotes in WordPress JetPack

by @edent | , , , | Read ~107 times.

Previously, I've written about using Footnotes in WordPress Markdown. A reader notified me that the footnotes1 weren't very accessible. This blog post describes the problem and proposes a solution.

The Problem

Using WordPress's JetPack, markdown footnotes are rendered as:

Some text <sup id="fnref-1234-1"><a href="#fn-1234-1" class="jetpack-footnote">1</a></sup>
...
<li id="fn-1234-1">The footnotes. <a href="#fnref-1234-1">↩</a></li>

There are two main problems with this:

  1. The <sup>1</sup> doesn't announce the destination of the link.
  2. The ↩ may be read out as "leftwards arrow with hook"

Ideally, it would be useful to have something like:

<a href="#fn-1234-1" aria-label="Read footnote 1" ...

and

<a href="#fnref-1234-1" aria-label="Return to main content">↩</a>

Or similar.

The Solution

The issue occurs in jetpack/_inc/lib/markdown/extra.php

@define( 'MARKDOWN_FN_LINK_TITLE',     "" );
@define( 'MARKDOWN_FN_BACKLINK_TITLE', "" );

The link and backlink titles are used later in the same file to set the title.

if ($this->fn_backlink_title != "") {
    $title = $this->fn_backlink_title;
    $title = $this->encodeAttribute($title);
    $attr .= " title=\"$title\"";
}

But, because they're never set, the code doesn't run.

It's pretty easy to hotfix this. Replace the above definitions with:

@define( 'MARKDOWN_FN_LINK_TITLE',     __( 'Read footnote.', 'jetpack' ) );
@define( 'MARKDOWN_FN_BACKLINK_TITLE', __( 'Return to main content.', 'jetpack' ) );

I've raised this as an issue on GitHub.

Problems with the solution.

  • It will be overwritten when JetPack updates. You can also add the new @defines to your theme if you want them to survive updates.
  • I'm not sure if title is the right element. Although it seems has the same precedence as aria-label in the Accessible Name and Description Computation algorithm
  • It is in English only. Because those strings don't exit in the translation file, it will only work for monolingual installs.
  • The title text shows as a pop-up on certain browsers.
  • No metadata. It might be nice to have the title say "Read footnote 23."
  • Some footnote plugins put the footnote text in the title. That may be useful.

If you'd like to see this in the default JetPack experience - please leave a comment on GitHub.


  1. Like this! 

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: