Better Footnotes in WordPress JetPack

Previously, I've written about using Footnotes in WordPress Markdown. A reader notified me that the footnotes⁰ 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:

 HTMLSome 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:

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

and

 HTML<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

 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.

 PHPif ($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:

 PHP@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.