Créer une galerie photo accessible est un projet pratique destiné aux personnes qui connaissent les bases de HTML, CSS et JavaScript et souhaitent en faire une expérience de navigation complète. Vous créerez une exposition locale dans laquelle les miniatures, les images en grand format, les titres et les descriptions restent correctement associés pendant la navigation.
Les laboratoires guidés construisent progressivement la mise en page de la galerie et la visionneuse détaillée. Un défi indépendant vous propose d’appliquer les mêmes techniques à une autre exposition, avec des photographies aux titres identiques, des titres longs et des proportions différentes. Chaque laboratoire commence avec ses propres fichiers préparés.
Ce que vous apprendrez
À la fin du cours, vous saurez :
- associer chaque identifiant stable de photographie à la bonne miniature, à la bonne image en grand format, au texte alternatif et à la légende correspondants ;
- créer une galerie adaptative avec du HTML sémantique et un indicateur de focus clavier visible ;
- utiliser l’élément natif
dialogpour afficher une photographie et synchroniser son image, son titre et sa description pendant la navigation ; - indiquer clairement les limites de navigation à la première et à la dernière photographie, fermer la visionneuse avec
Escet rendre le focus à la carte qui l’a ouverte ; - afficher un message compréhensible lorsqu’une image ne se charge pas, sans la remplacer discrètement par une autre photographie, et corriger un chemin de fichier erroné.
À qui s’adresse ce cours
Ce cours s’adresse aux personnes prêtes à réunir des exercices web individuels pour créer une exposition photo utilisable.
Prérequis : Connaître les éléments HTML, les bases de la mise en page CSS, ainsi que les objets, fonctions, manipulations du DOM et événements JavaScript. Vous devez savoir ouvrir et enregistrer les fichiers du projet. Les laboratoires guidés présentent la sémantique propre à la galerie, le comportement du dialogue natif et la gestion du focus. React n’est pas nécessaire.
Environnement d’apprentissage : LabEx fournit les entrées préparées WebIDE, Terminal et Gallery, ainsi que les images locales. Dans WebIDE, vous lirez le HTML, le CSS et le JavaScript existants, prévoirez leur comportement et enregistrerez des modifications ciblées. Dans Gallery, vous observerez le site réel et testerez les interactions au clavier. Les libellés de la galerie restent en anglais.
Questions fréquentes
Vais-je écrire le code de la galerie ?
Oui. Vous complétez la mise en page et le comportement dans le navigateur au sein du projet préparé, puis vous utilisez la galerie à la souris et au clavier.
Dois-je importer des photographies ou installer un framework ?
Non. Les images locales et l’environnement d’apprentissage sont préparés. Le projet utilise HTML, CSS et le JavaScript du navigateur, sans React ni service d’envoi d’images.
La réussite du cours certifie-t-elle l’accessibilité ?
Non. Vous pratiquez des comportements précis concernant les images, le clavier et le focus. Une évaluation complète de l’accessibilité dépasse le cadre de ces exercices.
