Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

Corriger le dysfonctionnement des ancres activées au clavier sous Internet Explorer

Cet article complète le critère "Mettre en place des liens d'évitement" de la notice d'accessibilité HTML et CSS.

Sur toutes les versions d’Internet Explorer, dans certains contextes, il existe un bug sur le fonctionnement au clavier des ancres pointant vers une balise pourvu d’un identifiant.

Concrètement, sur ces navigateurs, une ancre <a href=”#contenu”>Aller au contenu</a> pointant vers un <div id=“contenu”> (par exemple) ne fonctionne au clavier que dans un cas bien précis.

Explications et démonstrations

Le problème

Dans l’exemple ci-après, sous Internet Explorer, lorsque l’on active le lien “Aller au contenu” avec la touche entrée, la tabulation ne se poursuit pas naturellement (dans la partie “Contenu”) mais redonne le focus à ce même lien “Aller au contenu”.

Aller au contenu

Contenu
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.

La solution

Pour corriger ce point, la solution consiste à donner le “layout” à la balise de destination.

Il existe plusieurs propriétés CSS et valeur(s) associée(s) qui permettent d’affecter le layout aux éléments.
En voici quelques exemples :

Exemples de propriétés CSS et valeurs associées donnant le layout aux éléments
Propriété CSS Valeur
display inline-block
height valeur au choix
float left ou right
position absolute
width valeur au choix

Dans l’exemple ci-après, le layout a été forcé sur l’élément de destination (<div id=“contenu-02”>) en utilisant la déclaration CSS : height:100%.

Aller au contenu

Contenu
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.

Avec cette solution, l’ancre est désormais parfaitement fonctionnelle au clavier sous Internet Explorer.

Ressource

notices/dysfonctionnement-ancres-clavier-ie.txt · Dernière modification: Le 06/03/2013 à 16:23 (modification externe)
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :