Est-ce qu'ajouter un attribut target="_blank" sur des liens hypertextes absolus suffit ? Non, l'exemple du module markdown-it-for-inline ne suffit pas.

J'aimerais :

• gérer la sécurité avec l'onglet ouvert. Il pourrait être utilisé par des pisteurs, sur la page nouvellement ouverte, par des extensions web verrolées ;
• informer de la destination aux lecteurs d'écran. La destination étant "un nouvel onglet". Ça correspond au critère 6.1.1 du RGAA ;
• distinguer visuellement les liens qui ouvrent un nouvel onglet. Même intention, visuelle cette fois.

La sécurité se gère à l'aide des valeurs noopener et noreferrer de l'attribut rel.

Elles préviennent, respectivement, l'accès à la propriété window.opener et à la diffusion de la provenance via l'entête HTTP Referrer.

Ça aide à préserver notre vie privée numérique.

On peut donner du contexte aux lecteurs d'écran dans un label ARIA :

1. qui repend l'intitulé du lien ;
2. et qui spécifie l'ouverture dans un nouvel onglet.

L'utilisation du rotor VoiceOver est un bon exemple de cette visibilisation :

L'antépénultième lien de cette capture d'écran rend explicite l'ouverture dans un nouvel onglet. Ça correspondrait au code HTML suivant :

<a href="..." aria-label="critère 6.1.1 du RGAA (ouvre une nouvelle fenêtre)">
  critère 6.1.1 du RGAA
</a>

Quelques lignes de CSS suffisent à ajouter un symbole visuel à la suite du lien :

a[target="_blank"]::after {
  content: "";
  display: inline-block;
  inline-size: .8em;
  block-size: .8em;
  /* ... */
  background-color: currentColor;
  mask-image: url("data:image/svg+xml;base64, …");
  mask-repeat: no-repeat;
  mask-size: contain;
}

L'utilisation combinée des propriétés background-color et mask-* aident à respecter les proportions de l'image vectorielle et à la détourer aux couleurs du texte du lien.

L'image est encodée directement dans la feuille CSS pour éviter un temps de latence à l'affichage.

C'est bon, nos liens externes sont désormais accessibles. Le code source des liens externes accessibles pour markdown-it (intégré à Build Awesome) est consultable dans le dépôt de ce carnet.

C'est une ascension de onze kilomètres sur une route empruntée par des voitures mais sans trop. On a opté pour des chemins de traverses entre Bourdeaux et Saoû : en passant par les très beau villages du Poët-Célard et de Francillon-sur-Roubion. Ça rallongeait et rajoutait du dénivelé (presque quatre-cent mètres) mais ça vallait le détour en cette saison.

On craignait le trafic important entre Saoû et Crest après 17h. On a alors opté pour un autre chemin de traverse, par la Répara-Auriple.

C'était la balade avec le plus de dénivelé en une journée. Je suis content de voir que j'avais encore de l'énergie en fin de journée. Et surtout, quel régal visuel tout au long du périple.

La lecture de l'article making emojis and icons screen reader accessible m'a fait agir dessus sur ce blog avec l'extension markdown-it-emoji.

J'ai suivi la documentation pour rendre l'affichage accessible.

Ainsi, le raccourci textuel :pray: est converti en :

<span class="emoji emoji--pray" aria-hidden="true">🙏</span>

Il a fallu plonger dans les entrailles du fonctionnement de markdown-it pour que chaque émoji existante soit elle aussi, convertie dans un code similaire.

J'ai créé une règle qui est insérée avant l'extension émojis pour convertir chaque émoji (unicode) en raccourci textuel d'émoji :

1. on parcourt chaque jeton markdown ;\

{
  type: 'inline',
  content: 'Coucou 👋🏻'
}

2. on vérifie la présence d'une émoji (via leur classe Unicode d'expression régulière) ;
3. on remplace chaque occurence par son raccourci textuel.\

{
  type: 'inline',
  content: 'Coucou :wave:'
}

4. qui a son tour rentre dans la moulinette expliquée précédemment\

  <p>Coucou <span class="emoji emoji--wave" aria-hidden="true">👋🏻</span></p>

Le code complet est disponible sur GitHub.

Tout autre émoji décoratif (comme dans cette entrée de journal par exemple) est masquée aux lecteurs d'écran avec aria-hidden="true" :

<h1 id="post-title">
  <span aria-hidden="true">☕️</span>
  Journal : Émojis accessibles
</h1>

Je n'ai pas eu à reprendre les vingt années de contenus pour y arriver. La lecture d'une issue GitHub, d'une proposition de code et le code d'autres extensions markdown m'ont aidé à mettre en place les mécanismes ci-dessus.

Un lieu m'intrigait depuis plusieurs années : le col Jérôme Cavalli. Je ne savais pas à quoi ressemblait le paysage d'un endroit dont je voyais la signalétique mais rien de plus.

Alors, c'est l'occasion d'un détour… et d'un bon et long dénivelé.

Le trajet était pastoral et fleuri depuis la sortie de Chabeuil par les petites routes. Avec des senteurs de glycines près des maisons et de bruyères dans la lente ascension.

La route était tranquille et peu fréquentée : j'y ai croisé davantage de cyclistes que de voitures.

Et c'est une chose que j'adore avec cet apprentissage ouvert : on sait à peu près par où on commence, on a une petite idée d'où on veut aller mais le chemin est imprévisible.

Je tente un audit d'accessibilité après l'ajout d'une carte basée sur MapLibreGL et :

1. le titre par défaut du composant est en anglais : je souhaite le personnaliser en français ;
2. mais il manque un rôle au composant (image, région ou application par exemple) ;
3. et je découvre un audit d'accessibilité daté de 2021 qui révèle d'autres points d'amélioration (structure hiérarchique, alternative textuelle à des symboles, taille minimale des zones de clic).

Je me suis proposé pour prendre en charge ces corrections.
De manière égoïste parce que j'aimerais que les cartes de mon carnet web soient accessibles (une des intentions de la refonte 3.0).
Et aussi pour que les cartes interactives basées sur MapLibreGL le deviennent, accessibles, sans grand effort supplémentaire.

J'envisage une amélioration progressive de ce composant en expérimentant avec le composant <is-land> :

• utilisation d'une image légère, statique pour représenter la carte ;
• un bouton d'activation d'interactivité qui charge deux à trois cent kilo-octets d'interactivité.

J'envisage aussi de donner accès au téléchargement des tracés, pour le récupérer sur un autre appareil. C'est un des bénéfices des données interopérables. Et de leur attribuer une licence, pour rendre explicite leur source/origine/conditions de réutilisations.

J'en avais envie et besoin.
Envie car ça faisait longtemps que je n'avais pas fait de vélo à la journée, sur une longue distance (cent kilomètres ça commence à faire long pour mon niveau).
Besoin car il y a un genou à remuscler après une entorse en février.

J'aime bien les différents segments paysagers de ce parcours : des tunnels forestiers, de la loooooongue ligne droite en bord de Rhône (avec toutes ses infrastructures hydroélectriques — barrages et centrales nucléaires), des zones maraichères, des vis à vis industriels (pétrochimie, usines à papier, etc.).

Dans les deux sacoches :

• quelques vivres sucrées pour tenir la route ;
• une poche à eau (vide) de trois litres ;
• une gourde à eau de un litre ;
• du rechange pour 4 jours (dans des cubes de rangement, comme ça c'est facile à sortir/ranger) ;
• serviette de bain et trousse de toilette ;
• un sac à dos léger de travail (ordinateur, pochettes à câbles, carnet, trousse) ;
• de la place pour peut-être revenir avec quelques affaires en plus.

Enlever les styles de présentation, c'est rendre visibles l'ordre de lecture, la structure de page, l'ordre de tabulation et les intitulés de liens.

Ça m'a aidé à corriger la hiérarchie des titres, éparses et inégales entre les textes produits en vingt ans (!). Mais aussi à sectionner et à étiqueter chacune des zones.

Eleventy / Build Awesome propose deux mécanismes pour se brancher sur le contenu :

• le parseur Markdown
• les transformations HTML

De quoi ajouter automatiquement des attributs aux liens, images ou autre qui seraient fastidieux à faire à la main.

Le déplacement des répertoires et fichiers a été minimal. L'effort principal a été de séparer les entrées de journal des billets longs. C'était un travail manuel mais facile et rapide à distinguer.

Une paire de rechercher/remplacer ont suffi à actualiser les métadonnées des fichiers texte.

L'ajout de métadonnées dynamiques était facile grâce au système données calculées.

La génération de vignettes / images aux bonnes dimensions a été facilité avec le module Image. Chose que je faisais initialement en lançant un script maison.

L'organisation en collections rend très facile leur utilisation et ventilation en plusieurs pages. J'avais envie d'aller au-delà de "simples" pages de listing, de mettre en avant les séries d'article et de les regrouper quand et où je voulais.

Au final, au doigt mouillé, je dirais qu'il y a moins de bidouilles et moins de code pour aboutir à un résultat similaire. Et j'avoue, qui renouvelle mon enthousiasme à écrire/publier sur ce carnet.

Comme quoi, un bon stylo outil contribue au plaisir de l'utiliser.

En 2026 j'ai la même intention : avoir un même site pour tout. Et une seule base de code d'écrits et de photographies.

C'est fait. En remplaçant Hexo par Eleventy Build Awesome.

Les autres écrits viendront souligner les aspects de la refonte au fur et à mesure qu'elle se produit sous vos yeux ébahis.