🖋 I enhanced the accessibility of my @eleven_ty@twitter.com site's anchor links with @ambrwlsn90@twitter.com 's advice, a new `renderPermalink` function for @valeriangalliat@twitter.com 's `markdown-it-anchor` plugin, and some CSS inspiration from @5t3ph@twitter.com 's Smol Article Anchors.
Details: https://nho.io/a/2021/02/25/accessible-anchor-links-with-markdown-it-and-eleventy/
@nhoizey Question peut être bête, mais pourquoi tu ne passes pas par des attributs aria-label par exemple, au lieu d'un span avec du vrai texte, qui seraient ignorés par les lecteurs RSS notamment ?
Ça permet aussi aux logiciels de traduction d'ignorer ces descriptions alternatives pour l'a11y puisque ce sont des attributs.
@marien @dav
@nicod_ Amber l'explique dans son article :
> First, aria-label is not actually brilliant for accessibility, as some translation services can have trouble accessing its value. So, it's best to add text content to the <a> element, and make sure to visually hide it. This way, screen readers can still access it but it'll be visually hidden for other users. Second, the # can be left in and hidden from screen readers using aria-hidden, while still being visible on the page.
@nhoizey Ok. Il m'avait semblé que @accessiblestef préconisait l'inverse (ce que je proposais), mais c'était peut être dans une autre situation.
@nicod_ ah bin l'avis de @accessiblestef m'intéresse aussi, du coup… 🤔
@nhoizey @nicod_ @marien @dav Pour moi deux situations :
* Celle de NicoH ici : un petit lien [caractère cabalistique], dans ce cas je mets un aria-label (surtout si c'est mon site où je maîtrise les risques de traduction, surtout en automatisant), et ça fera moins de bruit pour la plupart des agents utilisateurs (parce que là ça a l'air bien redondant)
* pour désambiguiser des trucs moins verbeux, je mets un span stylé « Lire l'article <span class="sr-only">Barbatruc</span> »
@accessiblestef ton second cas fait penser à un lien vers un autre contenu, pas vers une ancre du contenu courant.
@accessiblestef ok, j'avais pas compris. Dans ma mise en œuvre, c'est redondant à la lecture complète, mais on peut aussi avoir soit la liste des titres, soit la liste des liens. Avec le lien dans le titre ou l'inverse, ça pose problème, c'est surtout de là que vient la réflexion d'Amber.
@accessiblestef y'a pas de mal, c'est toujours bon d'avoir ton avis quand même ! 👍
@accessiblestef effectivement, la liste de liens est plutôt demandée pour sortir de la page, si je ne m'abuse… 🤦♂️
Du coup, il ne faudrait même pas que ces liens soient annoncés ?
Des points de vues (contradictoires) intéressants à partir de https://github.com/valeriangalliat/markdown-it-anchor/issues/82#issuecomment-788268457
@nhoizey Non, quand tu regardes la liste des liens c'est pour trouver les liens (nous en tant que concepteurs ne devons pas préjuger de l'intention de notre visiteur), y compris les liens d'évitement etc.
C'est pas grave d'avoir des liens visibles et annonçables vers tes titres dans ta page (regarde quand on fait une table des matières).
Je suggère juste que si on désactive CSS (ou qu'on est dans un autre UA), ils ne prennent pas autant de place que chez toi :)
@accessiblestef je trouve aussi sa solution trop risquée côté CSS.
@accessiblestef ok pour la liste des liens. La place prise sans styles spécifiques n'est pas si grande, non ?
@accessiblestef je note ta préférence ! 👍
@accessiblestef c'est vraiment compliqué, ce sujet, en fait ! 😭
Synthèse des différentes possibilités évoquées pour l'instant, et aucune n'est complètement satisfaisante :
https://github.com/valeriangalliat/markdown-it-anchor/issues/82#issuecomment-791968973
@accessiblestef @nicod_ @marien @dav si vous voulez creuser le sujet, y'a matière à discussion sur https://github.com/valeriangalliat/markdown-it-anchor/issues/82
@nhoizey Les lecteurs RSS virent les styles inline en principe, donc ça ne changera pas grand-chose. J'ai pas vraiment de bonne solution à part peut-être ne pas rendre les ancres dans le flux RSS si c'est possible, ou utiliser `aria-label` à défaut de mieux… mais `aria-describedby` ne sera pas utilisable puisque les `id` sont également virés. @dav