28111 sujets

CSS et mise en forme, CSS3

[Résolu] Css, menu déroulant et intérogations.

Salutations,

J'aurais deux questions vis-à-vis d'un test sur un déroulant en css pur, nonobstant le fait qu'un tel menu n'est pas fonctionnel sur Ie6, notamment. J'utilise pour ce menu un :hover sur la balise li, et si cela fonctionne, il me reste quelques points à éclaircir. Ceci est un exercice que je me suis imposé, et non un menu qui sera utilisé sur un site en ligne.

J'ai effectué une recherche sur le forum avant de vous importuner avec mes questions mais les sujets trouvés ne m'ont pas aidé (ou alors j'ai mal lu/compris et utilisé les mauvais mots clés pour ma recherche...)

1° Un test empirique m'ayant prouvé que l'attribut :focus sur une balise <li> n'est pas fonctionnel, je me demandais comment rendre la navigation au clavier, sans javascript toujours, possible.

Comment se comportera un lecteur d'écran face à un tel menu ? (subsidiaire, j'y pense en tappant et vais rechercher ça de ce pas, mais comment tester une page pour lecteur d'écran quand nous n'en disposons pas nous même ? ^^)

2° Lorsque le déroulant de mon menu principal passe au dessus du menu secondaire, si on se déplace dans le déroulé celui-ci disparait dès que le curseur mord sur le menu secondaire.

Est-il possible de fixer cela en css ?

-----

Si ma pauvre mémoire est bonne, Laurie-Anne déclarait sur l'un des sujet concernant les menus déroulant qu'il était impossible de rendre ceux-ci accessible.

Si cela est vrai, pourquoi voit-on ce type de menu partout ? (ou presque)
Faut-il songer lors du développement d'une solution internet à doubler le développement (une partie avec tel type de navigation, et une partie avec tel autre) ?

Est-il impossible de créer un menu déroulant "propre et respectueux" sans employer de javascript ?

Désolée si mes questions vous amène à vous répéter; Petite autodidacte du net, ma philosophie de développement évolue jour après jour grâce à (à cause de ?) alsacréation. Je vous en remercie, mais du coup je révise toutes mes bases, et cela est parfois difficile.

Dans l'attente d'une réponse, je retourne consulter le forum et les articles Smiley smile .


<ul id="menuPrincipal">
    <li><a href="#" alt="">Menu Principal</a>
        <ul>
            <li><a href="#" alt="">Menu Principal Déroulant</a></li>
            <li><a href="#" alt="">Menu Principal Déroulant</a></li> 
            ...
            <li><a href="#" alt="">Menu Principal Déroulant</a></li>
        </ul>
    </li>
    ...
    <li><a href="#" alt="">Menu Principal</a>
        <ul>
            <li><a href="#" alt="">Menu Principal Déroulant</a></li>
            <li><a href="#" alt="">Menu Principal Déroulant</a></li> 
            ...
            <li><a href="#" alt="">Menu Principal Déroulant</a></li>
        </ul>
    </li>
</ul>
<h1> titre</h1>
<ul id="menuSecondaire">
    <li><a href="#" alt="">Menu Secondaire</a></li>
    ...
    <li><a href="#" alt="">Menu Secondaire</a></li>
</ul>



ul#menuPrincipal
{
    list-style-type: none;
    margin: 0; padding: 0;
    height: 20px;
}
    ul#menuPrincipal li
    {
        float: left;
        position: relative;
    }
        ul#menuPrincipal li a
        {
            display: block;
            margin: 0; padding: 0;
            height: 20px;
        }
        ul#menuPrincipal li ul
        {
            margin: 0; padding: 0;
            display: none; visibility: hidden;	
            position: absolute;
            top: 20px;
        }
    ul#menuPrincipal li:hover ul
    {
        display: block; visibility: visible;
    }

Modifié par maosalia (21 Jan 2010 - 23:58)
maosalia a écrit :
1° Un test empirique m'ayant prouvé que l'attribut :focus sur une balise <li> n'est pas fonctionnel, je me demandais comment rendre la navigation au clavier, sans javascript toujours, possible.
L'idée est, lorsqu'on utilise JS, de toujours le faire de manière non obstrusive. C'est-à-dire que la couche de JS dois se supperposer à un menu fonctionnel sans lui. En pratique, sans JS tu aura un menu déplier, que tu replie avec le JS au chargement de la page. Ainsi, si JS n'est pas actif, le menu reste fonctionnel (bien que moins beau).

maosalia a écrit :
Comment se comportera un lecteur d'écran face à un tel menu ? (subsidiaire, j'y pense en tappant et vais rechercher ça de ce pas, mais comment tester une page pour lecteur d'écran quand nous n'en disposons pas nous même ? ^^)
Pour un lecteur d'écran, il ne faut pas oublier que l'utilisateur navigera au clavier (principalement) il y a donc les même contraire que pour une navigation au clavier classique. Le lecteur d'écran, prenant en compte les CSS et les JS (car il lis ce qui s'affiche effectivement à l'écran (plus quelques autres choses suivant sa configuration)). Il est donc important de faire en sorte que le focus sur les éléments reste possible et que le menu se déroule bien au focus (onFocus au lieux de onMouseOver) et pas seulement au survol.

maosalia a écrit :
Si ma pauvre mémoire est bonne, Laurie-Anne déclarait sur l'un des sujet concernant les menus déroulant qu'il était impossible de rendre ceux-ci accessible.
Théoriquement, rien n'est impossible. Il est possible de faire des menu déroulant accessibles à certains types de handicaps / difficultés (c'est plus difficile de le faire pour tous). Mais, c'est rarement techniquement possible sans JS. C'est pour cela qu'un menu déroulant accessible se fera avec l'aide de JS et non en CSS uniquement.

maosalia a écrit :
Si cela est vrai, pourquoi voit-on ce type de menu partout ? (ou presque)
Parce que peu se préocuppent réellement d'accessibilité et d'interopérabilité. Parce que beaucoup ne se rendent pas compte des problème que cela peut causer. Parce que chez eux ça marche très bien... Des raisons ils y en a plein. Quand je faisais ma thèse, j'ai quand même eu la réflexion que "oué, mais les aveugles, ils peuvent pas utiliser d'ordinateur de toute façon" (véridique).

maosalia a écrit :
Faut-il songer lors du développement d'une solution internet à doubler le développement (une partie avec tel type de navigation, et une partie avec tel autre) ?
Au maximum, il vaut mieux éviter. Ce n'est pas bien de séparer les accès (en plus ça ne réconforte pas vraiment ceux qui en ont besoin) et ça créé du travail supplémentaire.

maosalia a écrit :
Est-il impossible de créer un menu déroulant "propre et respectueux" sans employer de javascript ?
J'aurais tendance à dire non, car tout ce que j'ai vu à présent me le dit. Mais dans le futur, qui sait.

maosalia a écrit :
Désolée si mes questions vous amène à vous répéter; Petite autodidacte du net, ma philosophie de développement évolue jour après jour grâce à (à cause de ?) alsacréation. Je vous en remercie, mais du coup je révise toutes mes bases, et cela est parfois difficile.
Aucun problème avec ça. Répondre à des questions intelligente est toujours un plaisir.
Sujet clos
Aller à