🖋 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: nho.io/a/2021/02/25/accessible

@nhoizey pour info, le rendu dans mon lecteur RSS n'est pas terrible (répétition du titre) :

Follow

@dav hum, merci pour l'info ! 👍

Je suppose qu'il faudrait les styles inline sur ce cas précis.

· · Web · 1 · 0 · 0

@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

@marien bon Ă  savoir, merci. Je peux effectivement envoyer une version diffĂ©rente dans le flux, mĂȘme si ça ajoute du boulot au build.
@dav

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

@marien @dav

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

@marien @dav

@nicod_ ah bin l'avis de @accessiblestef m'intĂ©resse aussi, du coup
 đŸ€”

@marien @dav

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

@nicod_ @marien @dav

@nhoizey Oui c'est ça. Ou des boutons.
C'est pourquoi je disais que ton cas est plutĂŽt le premier.
@nicod_ @marien @dav

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

@nicod_ @marien @dav

@nhoizey (je dois avouer que je n'ai pas encore lu les articles auxquels vous faisiez référence au début, j'ai les bras pleins là) @nicod_ @marien @dav

@accessiblestef y'a pas de mal, c'est toujours bon d'avoir ton avis quand mĂȘme ! 👍

@nicod_ @marien @dav

@nhoizey @nicod_ @marien @dav Bon, j'ai lu.

On ne cherche pas dans une liste de liens les titres de la page, donc l'idée de « soit la liste des titres, soit la liste des liens » est un peu caduque.

Pour ton cas, je maintiens : le aria-label sur un caractÚre m'est plus « naturel ».

@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 github.com/valeriangalliat/mar

@nicod_ @marien @dav

@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 :)

@nicod_ @marien @dav

@nhoizey La solution de Thierry Koblenz est assez proche de ce que je suggĂ©rerais, oui. (Mais velue en CSS, quand mĂȘme : j'ai tendance Ă  choisir la simplicitĂ©, personnellement, mais YMMV).
@nicod_ @marien @dav

@accessiblestef ok pour la liste des liens. La place prise sans styles spécifiques n'est pas si grande, non ?

@nicod_ @marien @dav

@nhoizey À titre perso je trouve ça pĂ©nible, et donc je rĂ©itĂšre ma suggestion d'origine : CaractĂšre de ton choix, lien autour avec aria-label gĂ©nĂ©rĂ© dynamiquement comme tu l'as fait.

@nicod_ @marien @dav

@nhoizey (« comme tu l'as fait » = généré dynamiquement, j'entends, nos lecteurs auront etc.) @nicod_ @marien @dav

@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 :
github.com/valeriangalliat/mar

@nicod_ @marien @dav

@nhoizey 
 ni bloquante. Tu as trop de temps libre toi ces jours-ci, non ? :)
@nicod_ @marien @dav

Show newer

@marien @dav finalement c'Ă©tait simple Ă  faire, donc ça doit ĂȘtre bon !

Sign in to participate in the conversation
La Quadrature du Net - Mastodon - Media Fédéré

Mamot.fr est une serveur Mastodon francophone, géré par La Quadrature du Net.