Cours HTML avancé : accessibilité et métadonnées

Un audit Lighthouse ne signale aucun problème d’accessibilité sur la page de l’association. Quelle conclusion est justifiée ?

Le résultat est un point de départ ; il faut aussi vérifier manuellement les parcours et les interactions dans le navigateur. La page est conforme, car Lighthouse vérifie tous les usages au clavier et au lecteur d’écran. Il faut uniquement refaire l’audit avec un autre navigateur pour confirmer la conformité. Les constats manuels sont inutiles si le score d’accessibilité est élevé.

Dans une page d’événement, quelle organisation des titres favorise une navigation compréhensible ?

Utiliser uniquement des titres de niveau 1 pour que chaque section soit facilement repérable. Donner à chaque section importante un intitulé pertinent et suivre une hiérarchie cohérente de niveaux. Choisir le niveau de titre en fonction de la taille visuelle souhaitée, sans tenir compte de la structure. Éviter les titres dans les sections afin de ne pas alourdir la navigation assistée.

Le parcours de tabulation d’une page saute vers un bouton situé en bas du document avant de revenir aux liens précédents. Quelle correction privilégier ?

Attribuer une valeur positive de tabindex au bouton pour fixer sa place dans le parcours. Ajouter tabindex="-1" à tous les liens qui précèdent le bouton. Réorganiser l’ordre source des éléments interactifs et éviter les valeurs positives de tabindex. Masquer le bouton au clavier et le rendre accessible uniquement à la souris.

Quelle mise en œuvre permet à une personne au clavier d’atteindre rapidement le contenu principal tout en repérant l’élément actif ?

Placer le contenu principal en premier dans le parcours de tabulation et supprimer les contours de focus. Ajouter un attribut ARIA à chaque lien et utiliser le survol de la souris comme indicateur de focus. Masquer le lien d’évitement et retirer le focus visible afin de préserver la mise en page. Proposer un lien d’évitement vers le contenu principal et conserver un indicateur de focus visible.

Quelle méthode ouvre une fenêtre HTML `` de manière modale ?

Appeler showModal() sur l’élément dialog ; la touche Échap peut ensuite le fermer. Ajouter l’attribut open au dialog, ce qui le rend automatiquement modal et désactive Échap. Appeler close() sur le dialog, puis ajouter tabindex="0" pour l’afficher en modal. Utiliser show() ; cette méthode rend le dialog modal et empêche l’interaction avec le reste de la page.

Après la fermeture de la fenêtre de newsletter, où le focus doit-il normalement revenir ?

Au titre principal de la page, quelle que soit la façon dont le dialogue a été ouvert. Au bouton qui a déclenché l’ouverture de la fenêtre. Au premier lien de navigation du document. Au dernier champ du formulaire de newsletter.

Quel balisage natif convient à une réponse de FAQ repliable dont le titre reste visible ?

Un élément `` associé à un script qui masque et affiche son contenu. Un élément `` placé seul, sans élément parent de divulgation. Un élément ` contenant un ` qui décrit le contenu à afficher. Un élément `` ouvert au chargement et fermé par un bouton de bascule.

Sur la page de l’association, quelle commande doit être représentée par un lien HTML ?

Ouvrir la fenêtre de newsletter sans changer de destination. Afficher ou masquer les réponses d’une FAQ. Envoyer les informations saisies dans un formulaire. Naviguer vers la page de l’événement.

Quelle balise définit l’URL canonique de la page d’événement ?

`` `` `` https://exemple.org/evenements/soiree

Quelle valeur convient à la métadonnée Open Graph og:image d’une page partagée ?

Le chemin local du fichier image sur l’ordinateur de la personne qui publie la page. Une URL absolue vers une image publiée et accessible aux robots des réseaux sociaux. Le nom du fichier image, sans domaine ni chemin. L’URL de la page canonique, même si elle ne correspond pas à une image.

Quel exemple est une structure JSON-LD syntaxiquement correcte pour le nom d’un événement ?

`` `` `` ``

Laquelle de ces déclarations précharge correctement une image critique de l’événement ?

`` `` `` ``