Markdown et les notes de bas de page

N’écrivant désormais quasiment plus qu’en Markdown grâce au plugin formatting-markdown, je me suis intéressée au rendu des notes de bas de page en HTML.

Lien de retour généré inaccessible

<a href="#fnref:toute" rev="footnote">↩</a>

Contrairement à la syntaxe wiki, le lien de retour au texte généré en Markdown n’est pas du tout explicite. Le symbole retour (↩) est ainsi restitué flèche courbe vers la gauche par le lecteur d’écran VoiceOver.

Impossible pour une personne aveugle, handicapée mentale ou utilisatrice de système de commandes vocales de comprendre ou d’actionner le lien (critère 6.1 du RGAA) 😤.

J’ai commencé par convertir mon dernier billet en XHTML pour aller corriger le code source. Je me suis imaginé le faire pour tous mes billets 😰… Il était grand temps de faire appel à cette saine paresse informatique et de prendre le temps de régler le problème à la source.

Un tour vers la documentation de Michel Fortin pour PHP Markdown pour comprendre la gestion et la configuration des notes de bas de page m’a fait découvrir l’existence de deux variables (fn_link_title et fn_backlink_title). Elles permettent de définir un attribut title sur les liens des notes de bas de page et les liens de retour au texte. À noter que le plugin Dotclear utilise la version classique de PHP Markdown.

Mon intention première est de rajouter un attribut title pour expliciter le lien pour obtenir :

<a href="#fnref:toute" rev="footnote" title="retour au texte">↩</a>

Dans le dossier inc du plugin formatting-markdown1, cherchez dans le fichier markdown.php MARKDOWN_FN_BACKLINK_TITLE et rajoutez simplement le texte voulu entre les guillemets :

@define( 'MARKDOWN_FN_BACKLINK_TITLE',     "retour au texte" );

Il serait préférable de proposer une chaîne de texte en anglais (back to text par exemple) et la traduction dans le fichier de traduction main.po dans le dossier locales. Après quelques tests infructueux, force est de constater ma complète ignorance en la matière.

Si on veut aller plus loin, on pourrait ajouter un aria-label sur le lien pour éviter la restitution du symbole.

<a href="#fnref:toute" rev="footnote" title="retour au texte" aria-label="retour au texte">↩</a>

Ça oblige par contre à modifier un peu plus le code entre les lignes 2970 et 2976.

$fn_backlink_title = MARKDOWN_FN_BACKLINK_TITLE;

# Prepare backlink, multiple backlinks if multiple references
$backlink = "<a href=\"#fnref:$note_id\"$attr aria-label=\"$fn_backlink_title\">&#8617;</a>";
    for ($ref_num = 2; $ref_num <= $ref_count; ++$ref_num) {
        $backlink .= " <a href=\"#fnref$ref_num:$note_id\"$attr aria-label=\"$fn_backlink_title\">&#8617;</a>";
    }

Erreurs de code : rev="footnote" ou rel="footnote"

footnote ne fait pas partie des mots-clés autorisés pour les attributs rev et rel.

En soi, ces erreurs n’ont pas d’impact d’accessibilité. Néanmoins, je me suis dit que tant qu’à y être, autant s’en débarrasser.

J’ai donc vidé les deux variables $attr lignes 2941 et 3010.

$attr= "";

Amélioration : des liens de note de bas de page plus explicites

Même si le contexte permet de comprendre la fonctionnalité des liens de note de bas de page, partie comme j’étais, je me suis dit que j’allais également faire quelque chose pour améliorer les intitulés par défaut.

J’ai défini MARKDOWN_FN_LINK_TITLE avec "note&nbsp;" et modifié les lignes 3027 à 3031 de la sorte :

            $fn_link_title = MARKDOWN_FN_LINK_TITLE;
            return
                "<sup id=\"fnref$ref_count_mark:$node_id\">".
                "<a href=\"#fn:$node_id\" aria-label=\"$fn_link_title$num\">$num</a>".
                "</sup>";

Le but est d’obtenir des liens dont l’intitulé n’est plus n, mais “note n” sans rien changer visuellement.

Mettre à jour les anciens billets

Toutes ces évolutions seront prises en compte pour tous les nouveaux billets rédigés en Markdown. Par contre, pour les anciens billets, j’ignore s’il existe un moyen de régénérer le HTML sans devoir enregistrer chaque billet à nouveau pour que la modification prenne effet.


  1. Les points soulevés et les corrections peuvent être adaptés à tous les plugins qui se reposent sur le travail de Michel Fortin pour générer du Markdown et ne concernent pas uniquement Dotclear

Ce billet est accessible à l’adresse suivante :
https://bribesdereel.net/post/2018/12/02/markdown-footnotes-accessibility

3 commentaires

  • 1

    J’ai (encore) une semaine super chargée au taf, mais ensuite ça devrait se calmer, je pourrai jeter un œil à ce code, y compris celui de Michel Fortin

    Franck

    Le 3 décembre 2018 à 07:30

  • 2

    Prévoir une moulinette de re-conversion MD → HTML est possible, faut juste que je prenne le temps de la coder :-)

    Franck

    Le 3 décembre 2018 à 07:31

  • 3

    Yep, pas de souci ! J’ai un souci pour faire en sorte que la chaîne de caractères soit en anglais et ensuite traduite par le le fichier de trad. Je crois avoir compris, mais tu sauras mieux que moi ^^

    Pour la moulinette, c’est super ! Je pense que j’en aurai pour moins long vu le peu de billets (j’ai pas commencé à écrire en Markdown y a si longtemps que ça) que j’ai à tout ré-enregistrer, mais ça doit être utile pour d’autres :)

    Llu

    Le 3 décembre 2018 à 10:01

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

Fil des commentaires