Trouver les erreurs — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 4)

Trouver les erreurs

Images et médias · niveau 2

Énoncé

Corriger cette page. Pour chaque correction, dire si le validateur l'aurait signalée.


<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Images fautives</title>
  </head>
  <body>
    <h1>Images fautives</h1>
    <img src="../images/couverture-java.svg">
    <img src="../images/couverture-java.svg" alt="image">
    <video src="../medias/presentation.mp4"></video>
  </body>
</html>

Corrigé

Le validateur signale une seule erreur :


  9:6  error  <img> is missing required "alt" attribute  wcag/h37

Les autres défauts, il ne les voit pas :

première image : alt absent (signalé) ;
seconde image : alt="image" n'apprend rien (non signalé) ;
les deux images n'ont pas width et height : la page sautera au chargement (non signalé) ;
la vidéo n'a pas controls : impossible de la lancer, ni de l'arrêter (non signalé) ; elle n'a ni sous-titres ni contenu de repli (non signalé).


<img src="../images/couverture-java.svg" alt="Couverture de Programmation Java"
     width="200" height="300">
<video controls width="640" height="360">
  <source src="../medias/presentation.mp4" type="video/mp4">
  <track kind="captions" src="../medias/presentation-fr.vtt" srclang="fr" label="Français">
  <a href="../medias/presentation.mp4">Télécharger la vidéo (MP4)</a>
</video>

La seconde image, identique à la première, est supprimée. Moralité : une page valide n'est pas forcément une page accessible.