Bonjour,
Je continue avec mon second pb de navigation kb.
Le menu verticale est assez long (3 niveaux) et est prévu par cachier des charges en mode accordéon.
La chose est finie mais je constate (un peu tard certes) que le passage sur chaque lien de ce menu par TAB ne fonctionne que dans le 'tiroir' ouvert pour ses liens.
- La poignée (ou accordion header) qui sert de déclencheur à l'ouverture est un span contenant un <a>
(car ça peut aussi pointer sur une page contrairement à un 'vrai accordéon' ),
- mais ce n'est PAS un <a> directement.
Cet item lui n'est jamais survolé par TAB (donc pas d'activation clavier d'un 'tiroir').
Il semble que ce soit le point noir (cf. http://lab.dotjay.co.uk/tests/jquery-ui-accordion-keyboard-accessibility/ ).
Je précise que l'on a tous les 'tiroirs' repliés sur l'accueil.
Des réponses, déjà traité ??
Merci
Le code après passage du plugin jQ
edit:
ok j'ai trouvé ce n'était qu'un pb de css
l'état :focus ne pouvait apparaitre que sur les <a> directs.
En ajoutant un
Je rends visible le balayage TAB qui ne l'était pas. Entrée sur la poignée d'un tiroir fonctionne sans pb
Modifié par elz64 (12 Apr 2011 - 17:14)
Je continue avec mon second pb de navigation kb.
Le menu verticale est assez long (3 niveaux) et est prévu par cachier des charges en mode accordéon.
La chose est finie mais je constate (un peu tard certes) que le passage sur chaque lien de ce menu par TAB ne fonctionne que dans le 'tiroir' ouvert pour ses liens.
- La poignée (ou accordion header) qui sert de déclencheur à l'ouverture est un span contenant un <a>
(car ça peut aussi pointer sur une page contrairement à un 'vrai accordéon' ),
- mais ce n'est PAS un <a> directement.
Cet item lui n'est jamais survolé par TAB (donc pas d'activation clavier d'un 'tiroir').
Il semble que ce soit le point noir (cf. http://lab.dotjay.co.uk/tests/jquery-ui-accordion-keyboard-accessibility/ ).
Je précise que l'on a tous les 'tiroirs' repliés sur l'accueil.
Des réponses, déjà traité ??
Merci
Le code après passage du plugin jQ
<ul class="l1">
<li class="l1">
<span id="menu_accordion-100" class="accordion_toggle ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a onfocus="blurLink(this);" title="La Ville" href="accueil/la-ville/presentation.html" tabindex="-1">La Ville</a></span>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">
<ul class="l2">
<li class="l2"><a onfocus="blurLink(this);" title="Présentation" href="accueil/la-ville/presentation.html">Présentation</a>
<ul class="l3">
<li class="l3"><a onfocus="blurLink(this);" title="La ville en chiffres" href="accueil/la-ville/presentation/la-ville-en-chiffres.html">La ville en chiffres</a></li>
<li class="l3">
.......edit:
ok j'ai trouvé ce n'était qu'un pb de css
l'état :focus ne pouvait apparaitre que sur les <a> directs.En ajoutant un
a:focus, li:focus, .accordion_toggle:focus{
border: 1px dotted blue;
}
Je rends visible le balayage TAB qui ne l'était pas. Entrée sur la poignée d'un tiroir fonctionne sans pb
Modifié par elz64 (12 Apr 2011 - 17:14)