Créer un bouton accessible sans la balise button : role, tabindex et ARIA

Reconstruire un bouton quand la balise button n'est pas une option

Composant hérité, CMS verrouillé, framework contraignant : il arrive qu'on doive fabriquer un bouton à partir d'une simple div. Le problème, c'est que le navigateur cesse alors de travailler pour vous. Plus de rôle annoncé au lecteur d'écran, plus de focus au clavier, plus de validation à la touche Entrée ni à la barre d'espace, plus d'état désactivé natif.

Ce tuto de 1h04 démonte pièce par pièce ce que button fait automatiquement, puis le reconstruit à l'identique en HTML, CSS et JavaScript.
Vous ne repartez pas avec une recette à copier, mais avec la compréhension exacte de ce que vous devez recoder à la main, et pourquoi cette approche doit rester exceptionnelle.

Ce que vous allez mettre en place

• Le rôle : déclarer role="button" pour que l'arbre d'accessibilité annonce correctement le composant
• Le focus clavier : maîtriser tabindex="0" pour entrer dans le flux de tabulation, et tabindex="-1" pour la manipulation JavaScript seule
• Les interactions clavier : écouter l'événement keydown, intercepter Entrée et Espace, et neutraliser les comportements par défaut avec preventDefault
• L'état désactivé : poser aria-disabled et surtout vérifier cet état en JavaScript, puisque ARIA ne bloque rien tout seul
• Le bouton toggle : basculer aria-pressed avec getAttribute et setAttribute pour un bouton de notification à deux états
• L'habillage CSS : reproduire le curseur pointeur, le focus visible avec outline et outline-offset, et les styles conditionnels via les sélecteurs d'attribut
• L'annonce dynamique : utiliser role="status" pour qu'un changement de texte soit lu automatiquement, sans que l'utilisateur ait à naviguer jusqu'à la zone

Un exercice complet, pas une démonstration théorique

La seconde moitié du cours est un exercice d'application intégral : trois faux boutons (validation, fonctionnalité indisponible, notification toggle) plus une zone de statut, construits du HTML au JavaScript. Vous écrivez la structure, le CSS, la factorisation des fonctions, la ternaire qui choisit le message annoncé, et la temporisation qui vide la zone de statut. Les erreurs de frappe et les corrections sont montrées en direct, ce qui vous évite de les reproduire.

Le piège que ce tuto vous apprend surtout à éviter

À l'arrivée, vous saurez faire. Vous saurez aussi pourquoi vous ne devez pas le faire dans 99 % des cas. Reproduire un bouton en ARIA demande une dizaine d'attributs et d'écouteurs pour égaler une balise native gratuite, et chaque oubli devient un point de non-conformité RGAA. C'est précisément cette lucidité qui distingue un développeur front-end qui applique des règles d'un développeur qui les comprend.

Votre formateur

Carl Brison est Technicien Supérieur en Multimédia depuis le début des années 2000. Créateur de nombreux sites professionnels, dont deux imprimeries en ligne, il est également auteur de livres informatiques publiés aux Éditions Ellipses. Son approche pédagogique privilégie la démonstration commentée et la vérification systématique au clavier et dans les DevTools.

Prérequis et suite du parcours

Ce tuto clôt la série consacrée aux attributs ARIA. Pour en tirer le maximum, vous avez intérêt à maîtriser d'abord les fondamentaux des attributs ARIA et les ARIA essentiels comme aria-label et aria-expanded. La logique clavier vue ici se retrouve dans le guide des quatre composants interactifs accessibles, et s'applique directement aux formulaires conformes RGAA.
Retrouvez l'ensemble des tuto HTML et des tuto JavaScript pour compléter vos bases, ou allez plus loin avec le Parcours développeur web front-end éligible au CPF, dans lequel Carl Brison intervient en qualité de mentor.