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)

Effectivement ma solution n'est pas accessible. En alternative vous pouvez utiliser la vielle technique suivante (entre autres) :

position: absolute;
top: -9999px;
left: -9999px;