Des boutons faits d'icônes — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 8)

Des boutons faits d'icônes

Accessibilité · niveau 1 (application)

Énoncé

La barre de recherche de la Librairie se termine par un bouton qui ne contient qu'une loupe dessinée en SVG ; chaque livre du catalogue a un bouton « cœur » (une image coeur.svg) pour l'ajouter aux favoris. Écrire ces deux boutons pour qu'ils aient un nom accessible, de deux façons différentes.

Corrigé

Première façon : aria-label sur le bouton, et aria-hidden="true" sur le dessin SVG, décoratif. Seconde façon : une image <img> dont le texte alternatif nomme l'action.


<form action="/recherche" method="get" role="search">
  <label for="q">Titre, auteur ou ISBN</label>
  <input id="q" name="q" type="search">
  <button type="submit" aria-label="Lancer la recherche">
    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
      <circle cx="7" cy="7" r="5" fill="none" stroke="black" stroke-width="2"/>
      <line x1="11" y1="11" x2="15" y2="15" stroke="black" stroke-width="2"/>
    </svg>
  </button>
</form>
<p>
  Programmation Java
  <button type="button"><img src="coeur.svg" alt="Ajouter Programmation Java aux favoris" width="16" height="16"></button>
</p>

Le formulaire porte role="search" : il devient un repère « recherche ». Le nom du bouton favori cite le livre, sans quoi la liste du catalogue contiendrait six boutons « Ajouter aux favoris » indistincts.