<div> dans <a> et VoiceOver (iOS)
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 :
- « 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 :
<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
-
Dans le cas où il n’est pas envisageable d’utiliser des balises
<span>plutôt que<div>, une autre solution consiste à ajouterrole="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>
