Quiz récap'

Quiz récap' sur les images.

N°	Question
1	Pour implémenter une image `img` purement décorative, on écrira : `<img src="mon_image_decorative.png">` `<img src="mon_image_decorative.png" alt="">` `<img src="mon_image_decorative.png" alt="mon_image_decorative.png">`	Réponse bL'attribut `alt` doit être présent ET vide.
2	Pour implémenter une image `svg` purement décorative, on écrira : `<svg aria-hidden="true" focusable="false" role="presentation">` `<svg title="" role="presentation">` `<svg hidden="true">`	Réponse a
3	Dans le cas d'une image informative simple, on écrira : `<img src="pictogramme_handicap_visuel.png" alt="pictogramme_handicap_visuel">` `<img src="pictogramme_handicap_visuel.png" alt="Pictogramme pour le handicap visuel.">`	Réponse b Dans l'attribut alt, on écrit normalement en français. Veillez notamment à finir la phrase avec un point « . » pour favoriser la fluidité de lecture par les logiciels de synthèse vocale.
4	Une implémentation 100% compatible avec les synthétiseurs vocaux d'une image complexe consiste : À utiliser l'attribut aria `aria-describedby` faisant référence à un id posé sur l’élément qui décrira l’image. À utiliser l'attribut `longdesc` avec tout le contenu descriptif de l'image. À 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 Les attributs `aria-describedby` et `longdesc`
5	Pour implémenter une image svg informative dans le code HTML, on écrira : `<svg aria-describedby="libelleImage" role="img"><title id="libelleImage">[...]<` `<svg aria-labelledby="libelleImage" role="img"><title id="libelleImage">[...]<` `<svg title="Libellé de mon image" role="img">` `<svg hidden="true">`	Réponse b on utilisera l’attribut `aria-labelledby` (et non pas `aria-describedby`) et l'élément HTML `<title>[...]</title>` et non pas l'attribut `title`.
6	Dans le cas d'une image SVG utilisée avec du texte et servant de lien, quell est la bonne syntaxe ? `<a href="/" title="Accueil"><svg aria-hidden="true" focusable="false" role="presentation">[...]</svg><span>Accueil</span></a>` `<a href="/"><svg aria-label="Accueil">[...]</svg><span>Accueil</span></a>` `<a href="/"><svg aria-hidden="true" focusable="false" role="presentation">[...]</svg><span>Accueil</span></a>`	Réponse c L'image SVG est considérée comme décorative ; elle sera donc implémentée comme telle. Le libellé du lien étant visible et explicite, il n'y a pas besoin de rajouter un attribut `title` sur le lien.
7	Pour une image légendée implémentée avec `<figure role="figure">` l'élément HTML `<figcaption>` est facultatif. Vrai Faux	Réponse a `<figcaption>` est facultatif.
8	Pour implémenter un symbole purement décoratif via une police de caractère, on utilisera : `<i class="fas fa-gift" class="invisible">`, avec en CSS `.invisible { visibility: hidden }` `<i class="fas fa-gift" aria-hidden="true"></i>`	Réponse b
9	Pour implémenter un symbole porteur d'information via une police de caractère et compatble avec toutes les technologies d'assistance, on utilisera : `<p><span class="fas fa-search" aria-hidden="true"></span><span class="visuellement-masque">Rechercher</span></p>`, où la classe de style « visuellement-masque » masque le contenu via CSS. `<p><span class="fas fa-search" aria-label="Rechercher"></span></p>`	Réponse a Cette implémentation est compatble avec toutes les technologies d'assistance.
10	Pour implémenter un symbole via un caractère unicode, on utilisera : Une classe de style du type `.fleche-droite::after {content: "→ ";}`. Un symbole masqué dans le code HTML `<a href="..." title="En savoir plus sur....">En savoir plus<span aria-hidden="true"> →</span></a>`.	Réponse b 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 la propriété `content` en CSS est vocalisé.