---
title: "ARIA : pourquoi nous commençons toujours par le HTML natif"
description: "Rubrique parente : L'accessibilité numérique. Ce qu’ARIA apporte, et ce qu’il n’apporte pas ARIA regroupe une série d’attributs destinés aux technologies d’assistance. Ils servent à exposer le rôle d’un composant, son état du moment et ses propriétés, dans les situations où le balisage HTML standard ne dispose d’aucun moyen de les exprimer. Retenez surtout ceci […]"
url: "https://www.newp.fr/accessibilite-numerique/aria/"
author: ""
date: "2026-09-20T09:27:36+00:00"
modified: "2026-09-21T18:34:07+00:00"
lang: "fr_FR"
---

# ARIA : pourquoi nous commençons toujours par le HTML natif

 Rubrique parente : [L'accessibilité numérique](/accessibilite-numerique/).

 

## Ce qu’ARIA apporte, et ce qu’il n’apporte pas

 ARIA regroupe une série d’attributs destinés aux technologies d’assistance. Ils servent à exposer le **rôle** d’un composant, son **état** du moment et ses **propriétés**, dans les situations où le balisage HTML standard ne dispose d’aucun moyen de les exprimer.

 Retenez surtout ceci : ces attributs **n’ajoutent aucun comportement**. Sans script de votre part, l’élément ne reçoit pas le focus et ne réagit pas au clavier. ARIA modifie uniquement ce que le lecteur d’écran annonce.

 Notre règle de départ **Tant qu’une balise HTML native répond au besoin, nous n’écrivons pas d’ARIA.** L’élément natif fournit sans effort son rôle, la prise de focus, l’activation clavier et une annonce fiable, quel que soit le lecteur d’écran utilisé.

 Comparez un `<button>` et un `<div role="button" tabindex="0">` : le second essaie de reconstruire à la main ce que le premier offre déjà, avec des bugs et de la maintenance en prime.

 

## Un ARIA mal posé fait plus de dégâts que son absence

 Lorsqu’un attribut `role` est présent, il **remplace** la sémantique d’origine de l’élément. Placez `role="button"` sur un lien : le lecteur d’écran dira « bouton », la personne appuiera sur la barre d’espace comme pour un bouton, et le lien ne réagira pas. On lui a donné une information inexacte, et elle s’y fie.

 Autre piège courant : un `aria-label` ajouté sur un élément qui affiche déjà un libellé. Le nom accessible devient alors celui de l’attribut, et non le texte à l’écran. Un internaute qui pilote son ordinateur à la voix prononce le mot qu’il lit, et sa commande échoue.

## Quand ARIA devient nécessaire

- **Distinguer des zones de même nature.** Si une page contient plusieurs blocs de navigation, un `aria-label` permet de les différencier, par exemple « Navigation principale » et « Fil d’Ariane ». Ce site applique ce principe.
- **Signaler une mise à jour sans rechargement** : liste de résultats filtrée, article ajouté au panier, confirmation d’envoi. Attention, la zone qui porte le message de statut doit être présente dans la page *avant* que le texte n’y soit injecté.
- **Exposer un état** qu’aucune balise native ne transporte : accordéon déplié ou replié, onglet actif, champ invalide.
- **Associer un champ de formulaire** à son aide ou à son message d’erreur.
- **Indiquer la page en cours** dans un menu, afin que l’information soit annoncée (« page courante ») au lieu de reposer sur un simple changement de couleur.
 
## Quatre erreurs que nous relevons en audit

1. **Répéter le rôle natif**, comme `role="button"` ajouté sur un `<button>`. Cela ne sert à rien et révèle souvent une mauvaise compréhension de l’outil.
2. **Oublier de mettre l’état à jour.** Un accordéon qui s’ouvre mais reste annoncé « replié » induit davantage en erreur qu’un accordéon sans aucun état déclaré.
3. **Masquer avec `aria-hidden` un élément qui peut recevoir le focus** : il n’est plus annoncé, mais la tabulation continue de s’y arrêter. L’utilisateur se retrouve sur un élément muet.
4. **Donner un `aria-label` qui ne correspond pas au texte affiché.**
 
## Le réflexe à adopter

 Avant d’écrire le moindre attribut ARIA, demandez-vous quelle balise HTML vous êtes en train de recréer. Très souvent, elle existe déjà. La correction la plus efficace consiste alors à *retirer* du code plutôt qu’à en empiler.

  [ Rubrique précédente La structure des titres ](/accessibilite-numerique/structure-des-titres/) [ Rubrique suivante Les formulaires accessibles ](/accessibilite-numerique/formulaires-accessibles/)

---

*Source : [www.newp.fr](https://www.newp.fr/accessibilite-numerique/aria/)*