Tester la conformité aux standards du W3C

Les validateurs HTML et CSS du W3C et la lecture de leurs messages, les outils d'audit automatique d'accessibilité (axe, WAVE, Lighthouse) et ce qu'ils ne voient pas.

22 cartes
3 thèmes
Gratuit

Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

Notions
Questions
Ranger et relier

Quelques cartes du deck

Validateur HTML du W3C : de quoi s'agit-il ?
Voir la réponse
Outil en ligne qui lit un document et signale chaque endroit où le balisage s'écarte des règles de la spécification HTML.
Son moteur s'appelle le Nu Html Checker. Il vérifie la grammaire du balisage : balises mal fermées, éléments mal placés, attributs manquants. Il ne dit rien sur l'usage réel de la page.
Le validateur répond : « Element “li” not allowed as child of element “div” in this context. » Quelle correction ?

```html
<div>
<li>Accueil</li>
<li>Contact</li>
</div>
`
- Remplacer le div par un ul
- Remplacer le div par un nav
- Ajouter role="list" au div
- Ajouter un id unique à chaque li
Voir la réponse
Remplacer le div par un ul
Un li n'a de sens que dans une liste : ul, ol ou menu. Le message dit exactement cela : le parent div n'est pas permis. Un nav n'est pas une liste (on y met un ul), un rôle ARIA ne rend pas le balisage valide et un id n'a aucun rapport.
Le Nu Html Checker du W3C valide la … du balisage HTML, mais pas l'… réelle de la page.
Voir la réponse
Le Nu Html Checker du W3C valide la grammaire du balisage HTML, mais pas l'accessibilité réelle de la page.
Une page peut être valide et inutilisable au clavier, ou accessible avec quelques erreurs de balisage : les deux contrôles sont complémentaires.
Validateur CSS du W3C : de quoi s'agit-il ?
Voir la réponse
Outil qui lit une feuille de style et signale les propriétés inconnues, les valeurs invalides et les erreurs de syntaxe.
Le navigateur ignore sans bruit une déclaration invalide : le validateur est l'un des rares moyens de savoir qu'une règle a été jetée.
Le validateur signale « No “p” element in scope but a “p” end tag seen. » sur la dernière ligne. Quelle est la cause ?

```html
<p>Bonjour
<div>monde</div>
</p>
`
- Il manque un </div> juste avant le </p> final de la dernière ligne
- Le div a déjà refermé le p, </p> est en trop
- Le p est ouvert deux fois, une fois avant et une fois après le div
- Le texte « Bonjour » doit être dans une balise, pas posé à nu dans le p
Voir la réponse
Le div a déjà refermé le p, </p> est en trop
Un p ne peut contenir que du contenu de phrasé : à l'ouverture du div, le navigateur ferme le p de lui-même. Le </p> final ne ferme alors plus rien, aucun p n'est ouvert. On réécrit avec un div autour des deux, ou un span à la place du div.

Réviser ce deck