5.6. Regrouper les boutons ou les liens adjacents déclenchant la même action

Lorsque plusieurs éléments servant de boutons ou de liens visuellement côte à côte sont prévus pour déclencher la même action, les structurer avec une seule balise <button> ou <a>.

Exemple 1

Voici par exemple une intégration non recommandée d’une icône et d’un texte adjacents servant de boutons d’ajout aux favoris :

<button>
   <img src="favoris.png" alt="Ajouter à mes favoris" />
</button>
<button>Ajouter à mes favoris</button>

Puis maintenant une intégration davantage accessible de ces mêmes icône et texte adjacents servant de bouton d’ajout aux favoris :

<button>
   <img src="favoris.png" alt="" />
   Ajouter à mes favoris
</button>

Exemple 2

Voici par exemple une intégration incorrecte d’une image, d’un titre, d’une date et d’un texte introductif adjacents servant de lien vers le détail d’une actualité :

<a href="…">
   <img src="boulonnais.jpg" alt="Un jeudi dans le Boulonnais" />
</a>
<h2><a href="…">Un jeudi dans le Boulonnais</a></h2>
<p class="date">
   <a href="…">Publié le 13 mai 2016</a>
</p>
<p class="intro">
   <a href="…">Michel Serin est allé à la rencontre des habitants et des acteurs locaux du Boulonnais. […]</a>
</p>

Puis maintenant une intégration davantage accessible de ces mêmes image, titre, date et texte introductif adjacents servant de lien vers le détail d’une actualité :

<a href="…">
   <img src="boulonnais.png" alt="" />
   <h2>Un jeudi dans le Boulonnais</h2>
   <p class="date">Publié le 13 mai 2016</p>
   <p class="intro">Michel Serin est allé à la rencontre des habitants et des acteurs locaux du Boulonnais. […]</p>
</a>

Aller plus loin

  1. Sur le blog Atalan : <div> dans <a> et VoiceOver (iOS).

7 commentaires

  • Par Sébastien Delorme, le 27 mai 2016 à 14h00.

    Fiche nouvellement ajoutée le 27 mai 2016.

    Répondre

  • Par Johan Ramon, le 30 mai 2017 à 16h25.

    Fiche mise à jour le 30/05/2017 : termes « idéale » remplacés par « davantage accessible ».

    Répondre

  • Par Antsa, le 23 octobre 2018 à 12h11.

    Bonjour,

    Tout d’abord, merci pour ces notices car elles me sont d’une grande aide.

    Pouvez-vous m’indiquer si ma façon d’intégrer est correcte ou s’il vaut mieux que j’englobe tout mon contenu dans une balise <a> tel que vous l’avez montré dans votre exemple ? Car je crains des répétitions pour les lecteurs d’écran.

    Voici le code en question :

      <a href="https://www.monsite.com"></a>
      
        <strong>Monsieur DUPONT</strong> Directeur du pôle Sécurité
        « La sécurité avant tout »
        <a href="https://www.monsite.com" title="Monsieur DUPONT (voir le témoignage)" >Voir le témoignage</a>
    

    Pensez-vous qu’il serait utile que j’intègre également (ou en remplacement de « TITLE » un attribut ARIA-LABEL ? (Le site doit être conforme RGAA)
    (Je précise que j’ai lu la fiche 5.2 mais que j’ai toujours un doute sur le mieux à faire)

    Merci !

    Répondre

    • Par Sébastien Delorme, le 23 octobre 2018 à 15h07.

      Bonjour,

      Merci pour votre commentaire, nous sommes ravis de voir que les notices AcceDe Web vous sont utiles.

      L’idéal serait de pouvoir englober l’ensemble dans un seul et unique lien qui serait alors « Monsieur DUPONT Directeur du pôle Sécurité « La sécurité avant tout » Voir le témoignage ».
      Cela est parfaitement possible et conforme, et cela évitera l’usage du title ou d’aria-label

      Si toutefois, vous n’aviez pas la possibilité et que le lien doit être placé seulement sur « Voir le témoignage ». L’idéal est effectivement d’utiliser title ou aria-label dans lequel vous pourriez écrire « Voir le témoignage : Monsieur DUPONT ».

      Il faut utiliser soit title soit aria-label, éviter les deux car il peut y avoir un risque de redite. Les deux solutions sont conformes RGAA, toutefois aria-label est bien mieux supporté par les lecteurs d’écran, nous vous recommandons donc cette solution.

      Enfin, j’ai peur que « Voir le témoignage : Monsieur DUPONT » ne soit pas suffisamment explicite, le nom de la personne ne permet pas vraiment de connaître le contenu de l’interview. L’idéal serait donc « Voir le témoignage : Monsieur DUPONT, directeur du pôle Sécurité « La sécurité avant tout ».

      Et par conséquent, nous en revenons à ma recommandation initiale : englober directement tout le texte visible dans le lien, ce qui donnerait :

      <a href="https://www.monsite.com">
          <strong>Monsieur DUPONT</strong> Directeur du pôle Sécurité
          « La sécurité avant tout »
          Voir le témoignage
      </a>
      

      Répondre

      • Par Antsa, le 23 octobre 2018 à 17h10.

        Merci infiniment pour votre réponse (rapide d’ailleurs !).

        Le copier/coller du code que j’ai fourni n’a pas l’air d’avoir bien fonctionné (il manque des bouts de balise) mais j’ai globalement compris la démarche.

        Dans la note 5.2, il est indiqué de mettre la reprise de l’intitulé de l’action à la fin, mais dans votre exemple, il est au début. Est-ce que cela change beaucoup de choses ?

        Merci encore !

      • Par Sébastien Delorme, le 23 octobre 2018 à 17h29.

        C’est bien remarqué !
        Effectivement, jusque là nous recommandions de positionner la partie la plus explicite du texte à la fin de l’étiquette.

        Toutefois, les normes ont évolué et précisent désormais de faire le contraire : mettre la partie visible puis ajouter le complément d’information.
        Nous avons prévu de mettre à jour nos notices dans ce sens.

        Il faut comprendre qu’en renseignant par exemple aria-label="Voir le témoignage Monsieur DUPONT", les aides techniques disposeront d’un lien qui sera « Voir le témoignage Monsieur DUPONT ». La partie visible « Voir le témoignage » sera elle totalement ignorée.
        L’objectif est donc notamment et par exemple de permettre :

        1. Aux utilisateurs malvoyants qui se servent d’une synthèse vocale et regardent l’écran en même temps d’avoir d’abord une vocalisation de la partie visible puis du complément
        2. Aux personnes utilisant de la reconnaissance vocale pour piloter l’ordinateur de pouvoir demander à leurs aides techniques d’activer le lien « Voir le témoignage » (car c’est le texte qu’ils voient). L’aide technique sera plus efficace pour retrouver ce lien (ou lister tous les liens « Voir le témoignage ») car le contenu d’aria-label sera parfaitement identique.

        Sébastien.

  • Par Antsa, le 23 octobre 2018 à 17h46.

    C’est noté !

    Merci beaucoup !

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page