Quiz récap'

Quiz récap' sur les images.

Pour implémenter une image purement décorative avec l'élément HTML img, on écrira :

  1. <img src="mon_image_decorative.png">
  2. <img src="mon_image_decorative.png" alt="">
  3. <img src="mon_image_decorative.png" alt="Image décorative">

Réponse b - <img src="mon_image_decorative.png" alt="">
L'attribut alt doit être présent et vide.

Pour implémenter une image purement décorative avec l'élément HTML svg, on écrira :

  1. <svg role="presentation" ...>
  2. <svg title="" role="presentation" ...>
  3. <svg aria-hidden="true" focusable="false" role="presentation" ...>

Réponse c - <svg aria-hidden="true" focusable="false" role="presentation">
On pourrait aussi n'utiliser que aria-hidden="true".

Dans le cas d'une image informative simple, implémentée avec l'élément HTML img, on écrira :

  1. <img src="pictogramme_handicap_visuel.png" alt="pictogramme_handicap_visuel.png">
  2. <img src="pictogramme_handicap_visuel.png" alt="Pictogramme pour le handicap visuel.">

Réponse b - <img src="pictogramme_handicap_visuel.png" alt="Pictogramme pour le handicap visuel.">
Dans l'attribut alt, on écrit du texte. Pensez à finir la phrase avec un point « . » pour favoriser la fluidité de lecture par les logiciels de synthèse vocale.

Une implémentation 100% compatible avec les synthétiseurs vocaux d'une image complexe consiste à :

  1. Utiliser l’attribut aria aria-describedby faisant référence à un id posé sur l’élément qui décrira l’image.
  2. Utiliser l’attribut longdesc avec tout le contenu descriptif de l’image.
  3. Proposer le texte descriptif à côté de l’image, quitte à le masquer via CSS au départ et à proposer un mécanise dynamique pour le rendre apparent.

Réponse c
Le mieux est de rajouter un bouton proche de l'image intitulé par exemple "Description de l'image" qui fera apparâitre la description détaillée de l'image.
Voir un exemple de panneau dépliant dans la rubrique Motifs de conception - Composants javascript - Panneau dépliant.

Pour implémenter une image informative avec l'élément svg, on écrira

  1. <svg title="Libellé de mon image" role="img" ...>[...]</svg>
  2. <svg aria-describedby="libelleImage" role="img" ...><title id="libelleImage">[...]</svg>
  3. <svg aria-labelledby="libelleImage" role="img" ...><title id="libelleImage">[...]</svg>

Réponse c - <svg aria-labelledby="libelleImage" role="img" ...><title id="libelleImage">[...]</svg>
On utilisera l’attribut aria-labelledby (et non pas aria-describedby) et l'élément HTML <title>...</title> (à ne pas confondre avec l'attribut title.)

Dans le cas d'une image implémentée avec l'élément svg, utilisée avec du texte et servant de lien, quelle est la bonne syntaxe ?

  1. <a href="/"><svg aria-label="Accueil">[...]</svg><span>Accueil</span></a>
  2. <a href="/"><svg aria-hidden="true" focusable="false" role="presentation">[...]</svg><span>Accueil</span></a>
  3. <a href="/" title="Accueil"><svg aria-hidden="true" focusable="false" role="presentation">[...]</svg><span>Accueil</span></a>

Réponse b - <a href="/" title="Accueil"><svg aria-hidden="true" focusable="false" role="presentation">[...]</svg><span>Accueil</span></a>
On cache l'image SVG aux synthèses vocales, l'intitulé du lien est bien situé entre les balises a ; il n'y a donc pas besoin de rajouter un attribut title="Accueil" sur le lien.

Pour une image légendée implémentée avec figure, l'élément HTML figcaption est obligatoire.

  1. Vrai
  2. Faux

Réponse b - Faux
L'élément figcaption est facultatif.

Pour implémenter un symbole purement décoratif via une classe de style (comme pour les polices symboliques), on utilisera :

  1. <i class="fas fa-gift" aria-hidden="true"></i>
  2. <i class="fas fa-gift" class="invisible">, où la classe invisible correspond en CSS à .invisible {visibility: hidden}

Réponse a - <i class="fas fa-gift" aria-hidden="true"></i>
Pour cacher l'icône aux synthèses vocales, on utilisera l'attribut aria aria-hidden="true".

Pour implémenter un symbole porteur d'information via une police de caractère et compatble avec toutes les technologies d'assistance, on utilisera :

  1. <p><span class="fas fa-search" aria-hidden="true"></span><span class="sr-only">Rechercher</span></p> , où la classe de style « visuellement-masque » masque le contenu via CSS.
  2. <p><span class="fas fa-search" aria-label="Rechercher"></span></p>

Réponse a- <p><span class="fas fa-search" aria-hidden="true"></span><span class="visuellement-masque">Rechercher</span></p>
Dans le cas b, on se retrouve avec une non conformité HTML puisque le paragraphe est vide (aucun texte n'est écrit.).

Pour implémenter un symbole via un caractère unicode, on utilisera :

  1. Une classe de style du type .fleche-droite::after {content: "→ ";}
  2. Du code HTML <span aria-hidden="true"> →</span>

Réponse b - <span aria-hidden="true"> →</span>
Les caractères unicode sont interprétés par les logiciels de synthèse vocale comme des caractères mathématiques ; mieux vaut donc éviter leur vocalisation.
De plus, tout ce qui est contenu dans une déclaration CSS dans la propriété content est vocalisé.