1174 sujets

Accessibilité du Web

Menu sans javascript

Bonjour,
J’ai créé, pour les petits écrans, un menu vertical, qui, pour des raisons de simplicité, est fait en pur CSS, mais je me demandais si cette solution était adaptée pour tous les périphériques.
Voici le code :
<div id="menu">
	<input type="checkbox" role="button" id="bouton" />
	<label for="bouton">Menu</label>
	<nav>
		<a href=".">Accueil</a>
		<a href="2.html">2</a>
		<a href="3.html">3</a>
		<a href="4.html">4</a>
		<a href="5.html">5</a>
		<a href="6.html">6</a>
		<span id="act">7</span><!-- Ça non plus je sais pas si c’est bon, ce id="act" représente la page courante -->
	</nav>
</div>

nav {
	height: 0;
	overflow: hidden;
}
input {
	display: none
}
input:checked ~ nav {
	height: auto;
}


En gros, le nav reprend sa taille initiale lorsque la case à cocher (invisible) est cochée, c’est-à-dire quand on clique sur le label de cette dernière...
Ça fonctionne à merveille sur tous les écrans, néanmoins il y a quelques détails qui me font douter de son accessibilité, notamment l’affichage sur Opera Mini pour lequel j’ai dû rajouter ce bout de code :
@supports not (transition: 1s) {
	#menu label {
		display: none;
	}
	#menu nav {
		height: auto;
	}
}

ou bien le mode lecture de Firefox qui n’affiche purement pas mon menu.
Pensez-vous que c’est mauvais, et si oui, comment résoudre ce problème, si possible sans JS ?
Merci d’avance
Modifié par Duchampignon (09 Feb 2019 - 16:04)
Bonjour. Faire un menu en full CSS est parfaitement possible, même un menu complexe, voici le mien : Menu Full CSS

Quand au vôtre, pourquoi ne pas utiliser la fonction display uniquement ? :
nav,
input {
	display: none;
}
input:checked ~ nav {
	display: block;
}


Edit : le span#act dans la nav est tout à fait possible. Personnellement j'aurais tout mis dans une liste, mais en réalité c'est une question de préférence.
Modifié par Olivier C (10 Feb 2019 - 06:17)
En réalité, mon menu est plus complexe que cela (bon, quand même pas autant que le vôtre, chapeau par ailleurs!), mais je n’en avais représenté que l’essentiel.
Voici le code complet https://codepen.io/anon/pen/gqegvV (note: CodePen semble avoir de la peine à gérer les rem, les liens sont plus petits qu’ils ne devraient l’être).
En ce qui est du pourquoi j’ai utilisé un height: 0, c’est juste pour la jolie transition.

Du coup cette méthode n’a-t-elle vraiment aucune incidence sur l’accessibilité, sur des supports non-conventionnels tels que lecteur d’écran, mode lecture, etc. ?
Effectivement ma solution n'est pas accessible. En alternative vous pouvez utiliser la vielle technique suivante (entre autres) :
position: absolute;
top: -9999px;
left: -9999px;
Sujet clos
Aller à