Préparer la structure de la page événement
Objectif : Produire le squelette HTML de l’événement avec un parcours de lecture et de tabulation cohérent.
Une page d’événement peut contenir les bonnes informations tout en restant difficile à parcourir : les titres ne guident pas la lecture, ou les commandes se présentent dans un ordre inattendu au clavier. Vous allez assembler une page complète pour l’association culturelle, puis vérifier que sa structure suit un parcours logique, du lien d’évitement jusqu’aux informations légales.
Assembler les régions de la page
Commencez par placer les éléments selon leur fonction : l’en-tête regroupe la marque, la navigation et l’action d’inscription ; le contenu principal présente les événements et l’association ; le pied de page porte les informations légales. Le lien d’évitement vient en premier dans le body : il permet de rejoindre directement le contenu principal. Ces régions donnent un cadre au lecteur d’écran, tandis que leur ordre dans le document fournit aussi le parcours de tabulation naturel.
À l’intérieur du contenu principal, placez un titre de niveau 1 pour le sujet général de la page, puis un titre de niveau 2 pour la section des événements. Le nom de l’événement devient un titre de niveau 3, car il décrit un article inclus dans cette section. La section consacrée à l’association revient au niveau 2 : elle est parallèle à la section des événements, et non subordonnée à l’événement.
Lire et parcourir la page dans le même ordre
Dans cette page, le parcours commence par le lien d’évitement, puis passe par les liens de la marque et de navigation, et par le bouton d’inscription. Il continue dans le contenu principal : le lien fourni par le résumé de details est atteignable au clavier, contrairement aux paragraphes ordinaires. Enfin, il atteint les champs et boutons du dialogue lorsqu’il est ouvert, puis les liens du pied de page. Vous avez déjà étudié le lien d’évitement, le focus visible et les composants natifs dans les leçons précédentes ; ici, vérifiez leur place dans l’ensemble de la page.
Squelette HTML de la page
Le document ci-dessous reprend les informations de l’événement et les éléments déjà établis dans le projet. Les métadonnées et le préchargement restent dans le head ; l’affiche est l’image prioritaire et conserve ses dimensions. Le dialogue possède un titre associé à la fenêtre, et ses commandes natives sont placées avec le formulaire. L’attribut aria-labelledby du dialogue lui donne un nom accessible à partir de son titre : il complète ici l’élément natif au lieu de remplacer sa sémantique.
<!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="/">Association culturelle</a>
<nav class="culture-navigation">
<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">
<h2>À 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">
<h2>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>Les sections possèdent chacune un titre visible, de sorte qu’elles restent compréhensibles sans nommage ARIA supplémentaire. La navigation est identifiable par son élément nav et ne reçoit pas de libellé redondant puisqu’il n’y en a qu’une sur la page. Le dialogue, lui, est nommé par son titre. Les attributs command et commandfor utilisent les commandes HTML natives du contrat ; vérifiez leur prise en charge dans les navigateurs ciblés au moment du déploiement.
Contrôler le parcours complet
Parcourez le document avec la touche Tab et observez le focus à chaque étape. Vérifiez que le lien d’évitement apparaît en premier, qu’il rejoint bien le titre principal, puis que les liens et boutons se suivent dans l’ordre où ils sont présentés. Lorsque la fenêtre modale s’ouvre, contrôlez son parcours séparément ; la gestion du focus à son ouverture et à sa fermeture a été abordée dans la leçon consacrée au dialogue.
- Placez le lien d’évitement avant l’en-tête et faites-le pointer vers le contenu principal.
- Organisez le document selon les régions et les titres réellement présents dans la page.
- Gardez l’ordre du HTML cohérent avec l’ordre de lecture et de tabulation.
- Privilégiez les éléments natifs et n’ajoutez que l’ARIA nécessaire à leur nom accessible.
- Contrôlez au clavier le parcours global, puis celui du dialogue lorsqu’il est ouvert.
Dans la prochaine leçon, vous assemblerez les interactions natives de la newsletter et des informations repliables dans cette page complète.