{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreib4haf6wiesj6suclej2h7eiso3brofhqbq6biyagp446qfg2h6fi",
    "uri": "at://did:plc:sd3acwgcdqc5doj5bqttjvs4/app.bsky.feed.post/3mmhoiuuexqey"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreiddvov2gjpy2csqsjs6frw6bq6i6dyow6cv3mtzaj26suj4mjsw6e"
    },
    "mimeType": "image/webp",
    "size": 11386
  },
  "description": "un peu de code pour améliorer la lisibilité des commentaires du plugin ActivityPub de WordPress",
  "path": "/ameliorer-laccessibilite-des-commentaires/",
  "publishedAt": "2026-05-17T17:25:57.000Z",
  "site": "at://did:plc:sd3acwgcdqc5doj5bqttjvs4/site.standard.publication/3mmhm2fuq4hoo",
  "tags": [
    "accessibilité",
    "activitypub",
    "commentaires",
    "css",
    "fediverse",
    "WordPress"
  ],
  "textContent": "ActivityPub est le protocole qui permet à ce site d’être reconnu sur le Fédiverse (par exemple via Mastodon) et de faire remonter directement sur le site les commentaires écrits depuis là-bas grâce à une extension WordPress. Problème, les commentaires et réponses trop petits pénalisent l’accessibilité. Il faut ajouter une feuille de style CSS. Pourquoi l’accessibilité d’un site est importante ? C’est exactement comme un bâtiment : des accès faciles pour tous, une signalétique lisible aident toute visiteuse ou visiteur à naviguer. Il existe d’ailleurs une réglementation notamment pour les sites institutionnels. L’accessibilité permet à chacun de consulter un site dans de bonnes conditions, y compris les personnes ayant des difficultés visuelles, motrices ou cognitives.Un site accessible est aussi plus clair, plus confortable et souvent plus performant pour l’ensemble des visiteurs. L’accessibilité aide aussi les technologies d’assistance et les lecteurs automatisés : les lecteurs d’écran, les navigateurs vocaux, outils de synthèse…Une structure claire et conforme rend le contenu plus compréhensible aussi bien pour les humains que pour les systèmes automatisés. J’essaie d’améliorer les choses J’expliquais cela il y a un moment. J’essaie d’améliorer les choses. Je m’appuie notamment sur l’évaluation en ligne du site soit avec PageSpeed Insights, soit avec Wave. J’ai réussi à atteindre 10/10 sur la page d’accueil du site et ça n’a pas été sans efforts. Il fallait aller chercher ici et là ce qui pouvait créer des ambiguïtés. Il reste encore deux petites alertes liées au nom du site qui peut être confondu avec un titre. Il faut parfois peu de choses pour que ça bascule. À défaut d’être parfait, l’évaluation invite à la vigilance. Les commentaires du plugin faisaient baisser la note sur ordinateur Ce n’était pas dramatique, mais j’ai noté que le plugin ActivityPub génère des liens « Répondre dans le fédivers » avec une taille cible insuffisante. La note d’accessibilité tombait alors de 100% à 97% et ça peut-être gênant si de nombreux commentaires s’enchâssent. Solution Plutôt que de coller un plugin de plus, j’ai testé différents « bouts de code » pour jour sur le style. On appelle ça des CSS. Selon les sites les réponses peuvent varier notamment en fonction des thèmes. J’utilise moi un thème FSE (full site editing) avec le thème Twenty Twenty-Five légèrement adapté avec Twentig. Prendre garde à certaines propositions que j’ai trouvé sur le net et qui utilisent le signe d’exclamation dans le code (!) . Ça pose problème, donc à éviter. Je mettrai ce bout de code dans mon espace Codeberg où je partage les différentes adaptations mises en place depuis le début. On doit aller dans l’éditeur de styles (au niveau de l’administration) : Apparence > Éditeur > Styles . Juste à côté d’un petit œil on voit ⋮ (trois points en haut à droite) → CSS additionnel. C’est là qu’il faut copier coller le code suivant. .wp-block-comments .comment-reply-link, .wp-block-comments .activitypub-remote-reply__link, .comment-reply-link.activitypub-remote-reply__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 10px 18px; margin: 6px 12px 6px 0; border-radius: 8px; font-size: 0.95rem; line-height: 1.4; text-decoration: none; transition: all 0.2s ease; } .wp-block-comments .comment-reply-link:hover, .wp-block-comments .activitypub-remote-reply__link:hover, .comment-reply-link.activitypub-remote-reply__link:hover, .wp-block-comments .comment-reply-link:focus-visible, .wp-block-comments .activitypub-remote-reply__link:focus-visible, .comment-reply-link.activitypub-remote-reply__link:focus-visible { background-color: rgba(0, 0, 0, 0.05); outline: 2px solid var(—wp—preset—color—primary, currentColor); } /* Desktop */ @media (min-width: 782px) { .wp-block-comments .comment-reply-link, .wp-block-comments .activitypub-remote-reply__link, .comment-reply-link.activitypub-remote-reply__link { min-height: 40px; padding: 8px 16px; margin: 4px 10px 4px 0; } } /* Mobile */ @media (max-width: 781px) { .wp-block-comments .comment-reply-link, .wp-block-comments .activitypub-remote-reply__link, .comment-reply-link.activitypub-remote-reply__link { min-height: 48px; padding: 12px 20px; } } On valide, on vérifie que ça ne casse rien (si jamais, il suffit d’enlever), on vide les caches et on reteste. J’ai obtenu 100% partout. Si ça peut m’être utile pour ne rien oublier et utile à d’autres. Peut-être à terme, peut-on espérer que le plugin prenne cet aspect en considération et ce d’autant plus qu’il est maintenant sous l’égide de WordPress.",
  "title": "Améliorer l’accessibilité des commentaires",
  "updatedAt": "2026-05-17T17:25:59.000Z"
}