Suzy Naschanski du Calendrier de l'Avent HTMHell:
All About Dragons
I like dragons. Blah blah blah blah blah.
Regarde ça aria-labelledby attribut? Il enchaîne deux identifiants à partir du balisage, un pour le titre (#article1-heading) et un pour le lien (#article1-read-more). Ce qui se passe là-bas, c'est qu'un lecteur d'écran remplacera l'étiquette sémantique existante entre les balises de lien et utilisera le contenu des deux éléments et les annoncera ensemble comme une seule chaîne de texte :
Read more All About DragonsJe suis toujours penaud quand je réalise qu'il y a quelque chose que je pense que je devrais savoir mais que je ne sais pas. C'est certainement l'un de ces cas et je suis reconnaissant que Suzy l'ait partagé.
J'étais en fait récemment dans une situation où je aurait pu aurait dû faire ça. J'essaie toujours d'éviter un tas de liens "En savoir plus" sur la même page, mais il est difficile de proposer différentes saveurs de la même chose lorsque vous travaillez avec quelque chose comme une boucle de 15 messages (même s'il y a ressources pour aider). Et si nous devons garder des étiquettes courtes pour des raisons esthétiques (exigences de conception et autres), c'est encore plus difficile. La aria-labelledby me donne exactement ce que je veux : des étiquettes visuelles cohérentes et des annonces plus contextuelles pour les technologies d'assistance.
Et ce n'est une chose que lorsque le texte que vous souhaitez utiliser pour l'étiquette accessible existe déjà sur la page. Sinon, vous voudriez aller avec aria-label et avec la mise en garde que c'est uniquement pour les éléments interactifs qui sont incapables d'étiqueter les choses de manière accessible avec le HTML sémantique.
Si vous travaillez dans un CMS comme WordPress (ce que je suis), vous devrez peut-être faire un peu de travail supplémentaire. Comme lorsque je dépose un bloc Button sur la page, voici les options avec lesquelles je dois travailler :
Quelques bonnes options là-dedans, mais rien à voir avec l'étiquetage accessible. Si vous vous demandez ce qui se cache dans ce panneau Avancé :
Au lieu de cela, vous devrez modifier le bouton en mode HTML :
Mais avant cela, vous devez ajouter un ID à la rubrique que vous souhaitez utiliser. Le bloc Titre a le même paramètre de panneau Avancé pour ajouter une ancre, qui injectera un ID sur l'élément :
Ensuite, vous pouvez aller éditer le bloc Bouton en mode HTML et ajouter le accessible-labels ID ainsi qu'un ID pour le bouton lui-même. Voici un exemple du balisage modifié :
Super! Mais WordPress n'est pas cool avec ça :
Vous pouvez essayer de résoudre le problème :
Le soupir. Le bloc Button doit être converti en un bloc HTML personnalisé. Un peu à l'encontre de tout le truc de l'édition visuelle pour lequel WordPress est si doué. J'ai fait une recherche super rapide d'un plugin qui pourrait ajouter des options d'étiquetage ARIA à certains blocs, mais j'ai échoué. Semble être une bonne occasion de faire un ou soumettre des PR pour les blocs qui pourraient utiliser ces options.
