Quiz récap'

Quiz récap' sur les liens et les boutons.

Je dois proposer le téléchargement d'un fichier avec l'élément HTML a.

  1. Vrai
  2. Faux

Réponse a - Vrai
Dans le cas d'un téléchargement de fichier une bonne pratique consiste aussi à indiquer le format du fichier (pdf, jpg...) ainsi que son poids.

Dans le cas d'une collection de liens « Lire la suite », quelle est la bonne syntaxe ?

  1. <a href="navigation.html">Lire la suite</a>
  2. <a href="navigation.html" title="La recette du gâteau à l'orange">Lire la suite</a>
  3. <a href="navigation.html" title="Lire la suite - La recette du gâteau à l'orange">Lire la suite</a>
  4. <a href="navigation.html" title="La recette du gâteau à l'orange - Lire la suite">Lire la suite</a>

Réponse c - <a href="navigation.html" title="Lire la suite - La recette du gâteau à l'orange">Lire la suite</a>
Le libellé du lien n’est pas suffisamment explicite, on rajoute donc l’attribut title sur le lien. L'attribut title doit toujours reprendre en premier le libellé du lien.

Dans le cas d'un logo de site qui sert de lien vers la page d'accueil, quelle est la bonne syntaxe ?

  1. <a href="index.html" title="Mon Site Web - Accueil du site"><img src="images/logo.png" alt=""></a>
  2. <a href="index.html"><img src="images/logo.png" alt="Mon Site Web - Accueil du site"></a>
  3. <a href="index.html" title="Mon Site Web - Accueil du site"><img src="images/logo.png" alt="Mon Site Web - Accueil du site"></a>

Réponse b - <a href="index.html"><img src="images/logo.png" alt="Mon Site Web - Accueil du site"></a>
Lorsque le lien est posé sur une image seule, c'est l’attribut alt de l’image qui sert d'intitulé au lien.

Dans le cas d'un lien posé sur une icône (exemple, un petit maison pour symboliser le retour à l'accueil), quelle est la bonne syntaxe ?

La classe de style maison implémente une icône en forme de maison.
La classe sr-only rend le texte invisible à l’oeil nu et vocalisable par un logiciel de synthèse vocale.

  1. <a href="#" class="maison"><span class="sr-only">Accueil</span></a>
  2. <a href="#" class="maison" title="Accueil"></a>

Réponse a - <a href="#" class="maison"><span class="sr-only">Accueil</span></a>
Le deuxième exemple n'est pas conforme car le lien est considéré comme vide.

Dans un menu déroulant, un bouton doit être utilisé sur la rubrique parente (celle qui permet d'afficher le sous-menu).

  1. Vrai
  2. Faux

Réponse a - Vrai
Le bouton affiche un sous-menu. Il s'agit donc d'un composant interactif qui ne pointe pas vers une autre page.

Pour afficher l’élément suivant ou précédent dans un carrousel, on utilise :

  1. un lien
  2. un bouton

Réponse b - un bouton
Le bouton est composant interactif qui ne pointe pas vers une autre page.

Pour ouvrir un lien par défaut dans un nouvel onglet du navigateur, quelle est la bonne syntaxe ?

  1. <a href="https://sofeve-concept.github.io" target="_blank">sofeve-concept.github.io</a>
  2. <a href="https://sofeve-concept.github.io" target="_blank" rel="noopener noreferrer" title="Ouvrir dans une nouvelle fenêtre">sofeve-concept.github.io</a>
  3. <a href="https://sofeve-concept.github.io" target="_blank rel="noopener noreferrer" title="Ouvrir dans une nouvelle fenêtre - sofeve-concept.github.io">sofeve-concept.github.io</a>
  4. <a href="https://sofeve-concept.github.io" target="_blank" rel="noopener noreferrer" title="sofeve-concept.github.io (nouvelle fenêtre)">sofeve-concept.github.io</a>

Réponse d - <a href="https://sofeve-concept.github.io" target="_blank" rel="noopener noreferrer" title="sofeve-concept.github.io (nouvelle fenêtre)">sofeve-concept.github.io<;/a>
Comme le lien ouvre par défaut dans une nouvelle fenêtre, il est considéré comme non explicite. Il faut donc lui rajouter l'attribut title.
L'attribut title doit toujours reprendre en premier le libellé du lien.
Enfin, l'attribut rel="noopener noreferrer" sert à sécuriser le lien notamment contre des attaques de phishing.

Pour valider une inscription via un formulaire, on utilise

  1. un lien
  2. un bouton

Réponse b - un bouton
La soumission du formulaire est un composant interactif ; en effet, un traitement des informations renseignées est réalisé.

Quel est le bon libellé pour identifier une action permettant de s'incrire via un formulaire ?

  1. OK
  2. Valider
  3. Confirmer l’inscription

Réponse c - Confirmer l’inscription
Il s'agit d'être le plus précis possible dans l'action qui est réalisée.

Dans le cas d'un lien composite (image et texte), quelle est la bonne syntaxe ?

  1. <a href="#"><img src="img/home.png" alt="" />Accueil</a>
  2. <a href="#"><img src="img/home.png" alt="Accueil" />Accueil</a>
  3. <a href="#" title="Accueil"><img src="img/home.png" alt="Accueil" />Accueil</a>

Réponse a - <a href="#"><img src="img/home.png" alt="" />Accueil
L'intitulé du lien sera vocalisé. Il n'y a donc pas besoin de rajouter de l'information.
Dans le cas b, « Accueil » sera vocalisé 2 fois avec un synthèse vocale ; dans le cas c, 3 fois !