Corriger les boutons sans intitulé

Le problème

Un bouton sans nom accessible — button vide autour d’une icône, input sans value — est annoncé « bouton » sans autre précision. L’utilisateur doit appuyer pour découvrir ce qui se passe : sur un bouton « Supprimer », c’est un problème (critère 11.9 du RGAA).

Les corrections

Bouton-icône :

<button type="submit" aria-label="Lancer la recherche">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Bouton-image :

<input type="image" src="loupe.png" alt="Lancer la recherche">

Bouton texte — le cas simple, mais pensez pertinence : « OK » et « Valider » répétés n’aident pas ; « Valider ma commande », « Envoyer le message » disent l’action.

Le faux bouton

Un div ou un span avec onclick n’est pas un bouton : ni focusable, ni activable au clavier, ni annoncé comme bouton. Remplacez-le par un vrai button — vous gagnez gratuitement le clavier, le focus et la sémantique, et vous économisez tout l’ARIA de compensation.

Vérifier la correction

Relancez l’analyse : chaque bouton muet est cité avec son code. Les formulaires concentrent l’essentiel — complétez avec les champs sans étiquette.

Autres erreurs fréquentes à corriger

• Corriger un code de langue invalide
• Corriger une hiérarchie de titres incohérente
• Corriger la langue de page non déclarée (attribut lang)
• Corriger les contrastes de texte insuffisants
• Corriger les liens non explicites (« cliquez ici », « en savoir plus »)
• Corriger une page sans titre principal h1

← Retour au guide RGAA complet