Tabulation à travers les liens qui sont cachés sur la page Web (problème d'accessibilité)

J'ai une page Web avec 3 liens. 1 des liens est caché par un div parent qui a l'affichage: aucun. Quand je planerai au-dessus d'une autre div cependant, la div cachée sera montrée révélant ainsi le lien. Comment puis-je tabuler à travers les 3 liens et obtenir le lien 3 pour afficher automatiquement lorsque je tabulation?Tabulation à travers les liens qui sont cachés sur la page Web (problème d'accessibilité)

<html> 
<head> 
    <title>Skype Home</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
    <style> 
    a,.hoverMe{ 
    display:block; 
    width:50px; 
    height:50px; 
    margin-bottom:10px; 
    background-color:#CCC; 
    } 
    .hoverMe{ 
    background-color:pink; 
    width:100px; 
    height:50px; 
    } 
    .hiddenDiv{ 
    visibility:hidden; 
    } 
    .hiddenDiv.shown{ 
    visibility:visible; 
    } 
    </style> 
    <script> 
    $(document).ready(
    function(){ 
    $(".hoverMe").hover(
    function(){ 
     $(".hiddenDiv").addClass("shown"); 
    }, 
    function(){ 
     $(".hiddenDiv").removeClass("shown"); 
    } 
    ) 
    } 
); 
    </script> 
</head> 
<body> 
    <a href="#1">Link 1</a> 
    <a href="#2">Link 2</a> 
    <div class="hoverMe">hover me to open Link 3</div> 
    <div class="hiddenDiv"> 
    <a href="#3">Link 3</a> 
    </div> 
</body> 
</html>

Source

2010-08-05 Abadaba

Voir votre balisage et CSS vous aidera à répondre à votre question. – Oded

Utilisez JavaScript.

Ajoutez un onfocus et un gestionnaire onblur à l'ancre qui bascule une classe sur la div parente. Modifiez votre feuille de style pour la révéler lorsque la classe est définie.

Ajoutez également un indicateur pour indiquer que JS est présent, par ex.

<body> 
<script type="text/javascript"> 
document.body.className += " js"; 
</script>

... et protéger la règle qui cache la div en premier lieu avec body.js suivi d'un sélecteur descendant (afin que les utilisateurs non-JS seront toujours en mesure d'accéder au contenu).

Source

2010-08-05 06:15:15 Quentin

L'onfocus ne se déclenche jamais pour l'ancre .... – Abadaba

affichage: aucun contenu est hors de l'ordre de tabulation? Je dois avouer ne pas l'avoir testé. Dans ce cas, vous devrez également passer de 'display: none' à' position: absolute; à gauche: -1000px; 'ou similaire. – Quentin

Il semble y avoir un bug dans IE6 au moins quand vous mettez rtl comme attribut dir pour html, une énorme barre de défilement horizontale apparaîtra en raison du décalage négatif de la div cachée. Aucun moyen de réparer cela? – Abadaba

Tabulation à travers les liens qui sont cachés sur la page Web (problème d'accessibilité)

Répondre

Questions connexes