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

Publié le 22 juillet 2015 par Équipe Atalan

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 :

Réservez votre place de concert

Au 1er rang

Pour 70€ seulement !

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 :

« Réservez votre place de concert, lien. »
« Au 1er rang, lien. »
« 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 :

Réservez votre place de concertAu 1er rangPour 70€ seulement !

<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 à 17:32.

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

Haut de page