<div> dans <a> et VoiceOver (iOS)

1 commentaire

Publié le 22 juillet 2015 par Johan Ramon

En HTML5, il est possible et valide d’intégrer des balises <div> dans des balises <a>.

Malheureusement, cette pratique peut avoir un impact assez gênant pour les personnes naviguant avec le lecteur d’écran VoiceOver sous iOS (iPhone ou iPad, par exemple).

Exemple

Imaginons un lien du type :

Codé de cette manière :

<a href="…">
   Réservez votre place de concert
   <div>Au 1er rang</div>
   Pour 70€ seulement !
</a>

Restitution par VoiceOver

VoiceOver découpera ce lien en trois et le restituera :

  1. « Réservez votre place de concert, lien. »
  2. « Au 1er rang, lien. »
  3. « Pour 70€ seulement ! lien. »

Ce qui n’est pas optimal.
Notamment car l’utilisateur pourrait penser qu’il s’agit de trois liens distincts. Ce qui peut fortement complexifier sa compréhension.

Solution

Une solution simple pour y remédier consiste à utiliser des <span> plutôt que des <div> tel que :

<a href="…">
   Réservez votre place de concert
   <span class="ligne-02">Au 1er rang</span>
   Pour 70€ seulement !
</a>

.ligne-02 {
   display: block;
   color: #c5742b;
}

Ainsi, VoiceOver restituera correctement :
« Réservez votre place de concert Au 1er rang Pour 70€ seulement ! lien. ».

Vos commentaires

  • Par Johan Ramon, le 30 juillet 2015 à 17h32.

    Dans le cas où il n’est pas envisageable d’utiliser des balises <span> plutôt que <div>, une autre solution consiste à ajouter role="presentation" dans les balises <div>.

    Pour obtenir concrètement :

    <a href="…">
       Réservez votre place de concert
       <div role="presentation">Au 1er rang</div>
       Pour 70€ seulement !
    </a>
    

    Répondre

Ajouter un commentaire

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

Haut de page