Choisir un contrôle natif plutôt qu’une imitation

Une interface peut sembler interactive à la souris tout en restant difficile à utiliser au clavier ou avec un lecteur d’écran. Cela arrive notamment lorsqu’un élément décoratif est transformé en faux bouton ou en faux lien. Vous allez associer chaque action à l’élément HTML qui fournit déjà le comportement attendu.

Choisir l’élément selon l’intention

Commencez par décrire ce que la personne cherche à faire. Si elle doit se rendre à une autre ressource ou à une autre partie de la page, utilisez un lien <a href>. Si elle doit déclencher une action dans la page, utilisez un <button>. Ces éléments fournissent des comportements clavier et des rôles compréhensibles sans que vous ayez à les reconstruire.

Dans le projet, « Événements » est un lien, car il conduit vers une section identifiée par id="evenements". « S’inscrire à la newsletter » est un bouton, car il ouvre une interaction sans changer de destination. Le lien d’évitement est lui aussi un lien : il conduit à l’identifiant contenu. Le nom visible doit permettre de comprendre l’action ou la destination sans devoir deviner le comportement.

Le comportement natif fait partie du composant

Un élément natif ne se limite pas à son apparence. Le navigateur lui associe un rôle et des interactions prévisibles : un lien peut recevoir le focus et être activé au clavier, un bouton répond aux touches prévues pour les commandes, et un champ de formulaire expose son type et son état. Un élément générique comme <div> ne devient pas équivalent parce qu’on lui donne une apparence de bouton avec du CSS.

Voici les contrôles déjà présents dans la page de l’association. Le code illustre des intentions distinctes : naviguer, ouvrir le dialogue, saisir une adresse et soumettre le formulaire. Il conserve les commandes natives de dialogue et la structure du projet ; vous n’avez pas à ajouter un gestionnaire JavaScript pour imiter ces commandes.

<body class="culture-page">
  <a class="culture-lien-evitement" href="#contenu">Aller au contenu principal</a>
  <header class="culture-entete">
    <a href="/" aria-label="Association culturelle, accueil">Association culturelle</a>
    <nav class="culture-navigation" aria-label="Navigation principale">
      <ul>
        <li><a href="#evenements">Événements</a></li>
        <li><a href="#association">L’association</a></li>
      </ul>
    </nav>
    <button class="culture-bouton" type="button" command="show-modal" commandfor="newsletter">S’inscrire à la newsletter</button>
  </header>
  <main class="culture-contenu" id="contenu">
    <h1>Nos événements</h1>
    <section class="culture-evenements" id="evenements" aria-labelledby="titre-evenements">
      <h2 id="titre-evenements">À venir</h2>
      <article class="culture-evenement">
        <h3>Soirée des cultures</h3>
        <img class="culture-image" src="assets/affiche-evenement.jpg" alt="Affiche illustrée de la soirée des cultures" width="1200" height="800" fetchpriority="high">
        <p><time datetime="2026-06-20T18:00:00+02:00">20 juin 2026, à 18 h</time></p>
        <p>Une soirée de rencontres, de musique et de découvertes culturelles.</p>
        <details class="culture-details">
          <summary>Informations pratiques</summary>
          <p>Rendez-vous à la Maison des associations, 10 rue des Arts, Lyon.</p>
        </details>
      </article>
    </section>
    <section id="association" aria-labelledby="titre-association">
      <h2 id="titre-association">Notre association</h2>
      <p>Nous créons des occasions de partager et de découvrir les cultures.</p>
    </section>
  </main>
  <dialog class="culture-dialogue" id="newsletter" aria-labelledby="titre-newsletter">
    <h2 id="titre-newsletter">Recevoir la newsletter</h2>
    <form action="/inscription" method="post">
      <label for="courriel">Adresse courriel</label>
      <input id="courriel" name="courriel" type="email" autocomplete="email" required>
      <button class="culture-bouton" type="submit">S’inscrire</button>
      <button class="culture-bouton" type="button" command="close" commandfor="newsletter">Fermer</button>
    </form>
  </dialog>
  <footer class="culture-pied">
    <p>Association culturelle — <a href="/mentions-legales">Mentions légales</a></p>
  </footer>
</body>

Dans le formulaire, type="email" indique la nature de la donnée attendue, tandis que required demande une valeur avant l’envoi. Le label associé au champ donne son intitulé ; ne remplacez pas ce lien par un texte placé uniquement en décoration. Les boutons précisent leur type : celui d’envoi soumet le formulaire, celui de fermeture ne le soumet pas.

Pour vérifier votre choix, parcourez l’interface au clavier et demandez-vous à chaque arrêt : « Est-ce que je vais quelque part, ou est-ce que je déclenche quelque chose ? » Contrôlez ensuite que l’intitulé annonce l’effet réel et que le champ de saisie possède un libellé. Le parcours clavier et le focus visible ont été étudiés dans la leçon « Vérifier le focus et les liens d’évitement » ; appuyez-vous sur ces vérifications sans modifier l’ordre du document.

À retenir

• Choisissez un lien pour naviguer vers une destination et un bouton pour déclencher une action.
• Utilisez les contrôles de formulaire adaptés à la donnée attendue et associez chaque champ à un libellé.
• Les éléments natifs fournissent des rôles et des comportements clavier que les imitations doivent reconstruire.
• Vérifiez que le nom du contrôle décrit son effet et que le comportement correspond à l’intention.