Y a-t-il un moyen de styler un menu déroulant HTML accessible et n'a pas de JS?
Pour le moment je ne vois que des solutions avec JS, JQuery ou Webkit-apparence: aucun;
Mais je n'aime pas du tout du tout parce que je ne pense pas que ces solutions seraient accessibles.
3 Réponses :
Comme indiqué dans les commentaires, ce conseil s'applique à un menu "Fly-Out" ou à un menu déroulant qui fait partie de la navigation.
Si vous créez une application Web avec un menu de style de barre d'outils (un menu contenant des boutons qui déclenchent des fonctions, etc. au lieu de la navigation), alors le guidage et le comportement sont très différents.
Avec cela étant dit, la réponse générale est toujours la même JavaScript n'a rien à voir avec le style, à en juger par le reste de votre question que j'ai supposé que vous vouliez dire créer un menu déroulant et non comment le styler.
Vous ne pouvez pas créer un menu déroulant accessible sans JavaScript. Il y a quelques raisons à cela: -
Il y a d'autres raisons, mais cela devrait vous donner une idée de la raison pour laquelle JavaScript est nécessaire.
Avec cet étant dit si vous êtes inquiet pour les personnes qui n'ont pas de JavaScript activé, vous pouvez fournir un lien de retard sur un site HTML. Vous pouvez le faire en utilisant une balise Réponse originale
ARIA-AXTRÉSED sur le bouton qui ouvre la liste déroulante.
ESC devrait idéalement fermer le menu, pas indispensable à la conformité, mais une meilleure expérience de bien-être des utilisateurs du clavier.
Une réponse informative. Dans la raison 3, être clair, par Directives WAI , tabbing ne doit pas naviguer vers et depuis des éléments de menu mais vers et depuis le widget dans son ensemble. Dans la raison numéro 4, pour être claire, la navigation clé de la flèche est requise, non facultative, par ligne directrices.
Toute ma réponse a besoin d'une réécriture, c'est trompeur si vous pensez que je parle d'un menu d'application (qui est ma faute), mais si c'était un menu de fly de navigation (qui correspond à ce que le conseil était pour) la navigation par onglet est fortement recommandé voir w3.org / Wai / Tutoriels / Menus / Flyout / # Utiliser-parent-as-bascule et il est conforme au modèle recommandé. Les conseils des directives Wai-Aria que vous avez liées concernent des menus de style de la barre d'outils pour les applications Web et non une navigation de site Web normale. Je vais essayer de réécrire / développer la réponse plus tard dans la semaine. Merci de me laisser savoir que cette réponse était sous-par!
@CagerAtTler J'ai maintenant mis à jour la réponse pour inclure la clarté de ce que je décris pour éviter toute confusion supplémentaire, laissez-moi savoir si cela a du sens maintenant. Merci de le pointer.
Merci d'avoir pris le temps de clarifier, @grahamritchie. Les deux motifs que nous installons diffèrent grandement. Dans d'autres modèles alternatifs, la table versus de la grille, par exemple, il est clair que la navigation de flèche la plus typique utilisée dans d'autres widgets composés est requise chaque fois que les options sont nombreuses ou une méthode de sélection persistante. En l'absence de directives qualifiantes, j'ai tendance à considérer le motif "voler" de la même lumière. J'ai contacté les auteurs pour des éclaircissements.
Please check the following url for reference > Blockquote https://codepen.io/srirachachacha/pen/VPKjjx
Je suis d'accord avec @grahamritchie. Il est étrange d'accepter une réponse qui utilise Bootstrap et JQuery lorsque la question indiquait aucun JavaScript.
HTML
li {
display: block;
transition-duration: 0.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
Pourriez-vous reformuler votre question un peu comme la solution acceptée utilise JQuery et Bootstrap JS afin que je dois avoir mal compris ce que vous vouliez dire par aucun JavaScript et d'autres pourraient également. Je suppose que vous vouliez dire aucun styles en ligne? De cette façon, quiconque trébuche à travers votre question à l'avenir ne finit pas de malentendus que j'ai.