Qu'est-ce que le HTML sémantique vous apporte qu'une div avec des attributs ARIA n'apporte pas ?

Les éléments natifs viennent avec du comportement en plus de la sémantique : un button est focalisable, se déclenche sur Entrée et Espace, participe aux formulaires et expose gratuitement le bon rôle et le bon état. Une div avec role button récupère l'étiquette mais aucun comportement, donc vous ajoutez vous-même tabindex, la gestion clavier et l'état désactivé, et chacun peut mal tourner. La première règle d'ARIA, c'est de ne pas utiliser ARIA quand le HTML fait déjà le travail.

ARIA ne change que ce qui est exposé à l'arbre d'accessibilité. Ça ne rend rien focalisable, ça n'ajoute pas de gestion des touches, et ça ne gère pas le focus. Donc dès que j'écris une div avec role button, je me suis engagé sur tabindex zéro, un gestionnaire pour Entrée et Espace, un état aria disabled que je dois aussi faire respecter dans le gestionnaire, et je n'ai toujours pas la soumission de formulaire. Un vrai button me donne tout ça et reste correct quand le navigateur évolue. Donc mon réflexe est le natif d'abord : button, a avec un vrai href, input avec un label associé, dialog pour les modales, details pour un simple dépliage. Je vais chercher ARIA quand il n'y a vraiment pas d'équivalent natif, comme un jeu d'onglets ou une combobox, et là je suis le motif des authoring practices plutôt que d'improviser des rôles. Le bug que je vois le plus souvent, c'est une div cliquable dans une ligne de tableau qu'un utilisateur au clavier ne peut tout simplement pas atteindre, et ça passe tous les contrôles automatiques parce que rien dans le balisage n'est techniquement faux.