Intégrer la newsletter et les informations repliables
Objectif : Ajouter à la page le dialogue d’inscription et une section de détails utilisables au clavier.
Une page d’événement peut présenter correctement son contenu tout en laissant les visiteurs chercher les informations pratiques ou l’inscription. Vous allez intégrer ces deux interactions directement dans le document HTML, avec des éléments natifs utilisables au clavier et sans script de bascule supplémentaire.
Les comportements de dialog et de details, ainsi que leur place dans le parcours clavier, ont déjà été étudiés. Ici, vous assemblez ces composants dans la page fil rouge et vérifiez que leurs intitulés, leurs commandes et leur position dans le document restent compréhensibles.
Intégrer les interactions dans la page
Dans l’en-tête, le bouton d’inscription cible le dialogue portant l’identifiant newsletter. La commande native show-modal ouvre ce dialogue ; dans le formulaire, la commande close le ferme. Le champ de courriel possède une étiquette associée et les contraintes nécessaires pour que le navigateur puisse valider une adresse avant l’envoi.
Dans l’article de l’événement, l’élément details regroupe les informations pratiques. Son premier enfant summary fournit l’intitulé du contrôle ; le paragraphe suivant contient l’adresse. À l’ouverture de la page, le détail reste replié, mais le résumé peut être activé au clavier.
Version complète de index.html
Remplacez le contenu de index.html par la version ci-dessous. Elle reprend la page événement du projet et intègre le dialogue et le détail sans changer les noms de fichiers, les classes contractuelles ni les contenus déjà établis.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Association culturelle — événements</title>
<meta name="description" content="Découvrez les événements et les activités de notre association culturelle.">
<link rel="canonical" href="https://exemple.fr/evenements">
<meta property="og:type" content="website">
<meta property="og:locale" content="fr_FR">
<meta property="og:title" content="Association culturelle — événements">
<meta property="og:description" content="Découvrez les événements et les activités de notre association culturelle.">
<meta property="og:url" content="https://exemple.fr/evenements">
<meta property="og:image" content="https://exemple.fr/assets/affiche-evenement.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" as="image" href="assets/affiche-evenement.jpg">
<link rel="stylesheet" href="style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"name": "Soirée des cultures",
"startDate": "2026-06-20T18:00:00+02:00",
"endDate": "2026-06-20T22:00:00+02:00",
"eventStatus": "https://schema.org/EventScheduled",
"eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
"location": {
"@type": "Place",
"name": "Maison des associations",
"address": {
"@type": "PostalAddress",
"streetAddress": "10 rue des Arts",
"addressLocality": "Lyon",
"postalCode": "69001",
"addressCountry": "FR"
}
},
"organizer": {
"@type": "Organization",
"name": "Association culturelle",
"url": "https://exemple.fr/"
},
"image": "https://exemple.fr/assets/affiche-evenement.jpg",
"description": "Une soirée de rencontres, de musique et de découvertes culturelles."
}
</script>
</head>
<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>
</html>Vérifier les interactions au clavier
Enregistrez le fichier puis ouvrez la page dans le navigateur. Parcourez-la avec la touche Tab : vous devez atteindre le lien d’évitement, les liens de navigation et le bouton de newsletter dans l’ordre du document. Activez ensuite le résumé « Informations pratiques » avec Entrée ou Espace et vérifiez que le texte de l’adresse apparaît ; une nouvelle activation le replie.
Activez le bouton de newsletter. Le dialogue doit s’ouvrir en mode modal et le champ « Adresse courriel » doit pouvoir être atteint puis renseigné. Testez le bouton « Fermer » et la touche Échap ; le formulaire envoie les données à /inscription, une route de traitement que le serveur du site doit fournir.
À retenir
- Le dialogue de newsletter est une fenêtre native identifiée par l’id newsletter et ciblée par les commandes du bouton d’ouverture et du bouton de fermeture.
- Le champ de courriel possède une étiquette, un nom de formulaire et une validation native avant l’envoi.
- Les informations pratiques sont regroupées dans details ; summary en donne l’intitulé activable au clavier.
- Les deux interactions sont placées dans le document à proximité de leur contenu et n’exigent pas de script de bascule.
Dans la prochaine leçon, vous contrôlerez la cohérence entre la page publiée, son aperçu social et les données structurées, puis vous examinerez les ressources critiques et différées.