Bonjour tout le monde !
Je viens de reprendre un site que je suis chargé de remettre au goût du jour, entre autres.
Ce site utilise le tutoriel de Alsacréations pour son menu. Or, celui-ci pose d'importants problèmes d'accessibilité.
J'ai actuellement deux problèmes à résoudre:
- Rendre le menu utilisable lorsque JS est désactivé (Fait : injecter le position:absolute en JS et le retirer du CSS, pour que les menus ne se superposent pas et soient utilisables. Utiliser la même méthode pour tout ce qui relève du graphique, et appeler la fonction dans une fonction init() qui appellera montre(void), en utilisant window.onload et non <body onload="">)
- J'aimerais pouvoir utiliser le menu grâce à la navigation par clavier. J'utilise donc onfocus et onblur, mais cela me déplait car ces EventListeners ne passent pas au validateur. Comment écrire cela différemment? Peut-on, avec du JS évènementiel, réussir à entièrement externaliser le focus (et au passage le rollover?). Je connais très mal JS, aussi je ne saurais y répondre seul, et c'est d'ailleurs l'objet de mon post.
Ma fonction init pour résoudre le problème 1 : Attention, IE a tendance à calculer l'espace utilisé par les menus avant de tenir compte de celà (je ne sais pas comment résoudre ça)
Si vous avez des pistes pour le problème 2, merci de les poster, et peut-être pourra-t-on à terme réécrire ce tutoriel pour mieux prendre en compte les impératifs d'accessibilité.
Cordialement, SD.
Modifié par SiDi (17 Mar 2008 - 17:01)
Je viens de reprendre un site que je suis chargé de remettre au goût du jour, entre autres.
Ce site utilise le tutoriel de Alsacréations pour son menu. Or, celui-ci pose d'importants problèmes d'accessibilité.
J'ai actuellement deux problèmes à résoudre:
- Rendre le menu utilisable lorsque JS est désactivé (Fait : injecter le position:absolute en JS et le retirer du CSS, pour que les menus ne se superposent pas et soient utilisables. Utiliser la même méthode pour tout ce qui relève du graphique, et appeler la fonction dans une fonction init() qui appellera montre(void), en utilisant window.onload et non <body onload="">)
- J'aimerais pouvoir utiliser le menu grâce à la navigation par clavier. J'utilise donc onfocus et onblur, mais cela me déplait car ces EventListeners ne passent pas au validateur. Comment écrire cela différemment? Peut-on, avec du JS évènementiel, réussir à entièrement externaliser le focus (et au passage le rollover?). Je connais très mal JS, aussi je ne saurais y répondre seul, et c'est d'ailleurs l'objet de mon post.
Ma fonction init pour résoudre le problème 1 : Attention, IE a tendance à calculer l'espace utilisé par les menus avant de tenir compte de celà (je ne sais pas comment résoudre ça)
function init()
{
for (var i = 1; i<=10; i++)
{
if (document.getElementById('smenu'+i))
{
document.getElementById('smenu'+i).style.position='absolute';
document.getElementById('smenu'+i).style.zIndex='100';
document.getElementById('smenu'+i).style.marginTop='-1.8em';
document.getElementById('smenu'+i).style.left='150px';
}
}
montre(0);
}Si vous avez des pistes pour le problème 2, merci de les poster, et peut-être pourra-t-on à terme réécrire ce tutoriel pour mieux prendre en compte les impératifs d'accessibilité.
Cordialement, SD.
Modifié par SiDi (17 Mar 2008 - 17:01)
