Tu es ici

🎯 Objectif

Signaler dans le menu la page en cours, pour tout le monde : avec un attribut que lisent les lecteurs d'écran, et un style qui ne dépend pas que de la couleur.

📖 Exemple

Le Théâtre du Moulin affiche sa page Spectacles. Son menu le dit — le code, et ce que le navigateur en fait :

<nav class="onglets">
    <ul>
        <li><a href="accueil.html">Accueil</a></li>
        <li><a href="spectacles.html" aria-current="page">Spectacles</a></li>
        <li><a href="billets.html">Billets</a></li>
    </ul>
</nav>

.onglets ul {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0;
}

.onglets a {
    color: #1e293b;
    text-decoration: none;
}

.onglets a[aria-current="page"] {
    font-weight: bold;
    text-decoration: underline;
}

Deux pièces travaillent ensemble.

Dans le HTML, l'attribut aria-current="page" désigne le lien qui mène à la page affichée. Il ne change rien à l'écran : il informe. Un lecteur d'écran annonce « Spectacles, lien, page actuelle ». Une personne aveugle sait où elle se trouve, sans voir le menu.

Dans le CSS, le sélecteur .onglets a[aria-current="page"] vise ce lien-là et lui seul. Les crochets testent un attribut et sa valeur, comme le point teste une classe. C'est le premier sélecteur d'attribut de la formation, et il évite d'ajouter une classe actif en double : le style suit l'information, il ne peut pas s'en écarter.

♿ Remarque le repère : du gras et un soulignement, pas seulement une couleur. Une différence de teinte seule échappe aux personnes daltoniennes, et à tout le monde en plein soleil. Deux indices valent mieux qu'un.

📝 Consigne

Le visiteur est sur la page Équipes du FC Courtételle, mais le menu ne le dit pas. Deux étapes, une par onglet :

1. Dans l'onglet HTML, ajoute au lien Équipes l'attribut aria-current, avec la valeur page
2. Dans l'onglet CSS, après la règle .menu a, écris une règle qui vise le lien du menu portant cet attribut avec cette valeur, avec deux déclarations :
   • un texte en gras
   • une bordure du bas de 3 pixels, en trait continu, couleur #d45e95