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.

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”.

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 :

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%.

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

Keyboard Navigation and Internet Explorer par Gez Lemon.