Ajouter des attributs personnalisés

Les attributs personnalisés vous permettent d’ajouter des informations supplémentaires à vos éléments pour les rendre accessibles aux lecteurs d’écran et technologies d’assistance.

Qu’est-ce qu’un attribut personnalisé ?

Un attribut personnalisé est un couple clé/valeur HTML que vous pouvez ajouter à n’importe quel élément pour lui donner un sens ou un rôle supplémentaire. Exemple :

Aria Label = "Bouton pour accéder au menu principal"

Concrètement, cela permet d’ajouter des propriétés directement dans le HTML pour que les lecteurs d’écran comprennent au mieux la structure et la fonction de vos éléments.

Pourquoi utiliser les attributs ARIA ?

ARIA (Accessible Rich Internet Applications) est un ensemble d’attributs normalisés permettant de :

Décrire un élément (ex : Aria Label, Aria Describedby)
Masquer un élément (Aria Hidden=“true”)
Définir son rôle (Role=“button”, Role=“alert”, etc.)
Informer des changements dynamiques (Aria Live)

Ils permettent aux lecteurs d’écran de mieux comprendre la structure et les fonctions de vos contenus interactifs.

Ajouter un attribut personnalisé dans PandaSuite

Rendez-vous dans les propriétés du projet et activez l’option Accessibilité

Sélectionnez l’objet auquel vous souhaitez ajouter un attribut
Dans le panneau de droite, rendez-vous dans la section Accessibilité
Cliquez sur Ajouter un attribut personnalisé
Renseignez :
- Nom : par exemple Aria Label
- Valeur : par exemple “Menu principal”

Vous pouvez ajouter plusieurs attributs par élément.

Le bouton Magique permet d’ajouter automatiquement des propriétés d’accessibilité avec une valeur lorsque l’on peut en déduire quelque chose de logique. Par ex., lorsque il y a un trigger “click” sur un élément, cela va ajouter automatiquement le “role” à “button” :

Exemples d’attributs utiles

Attribut	Description	Exemple
`Aria Label`	Donne un nom à un élément	”Retour à l’accueil”
`Aria Hidden`	Cache un élément au lecteur d’écran	”true”
`Aria Describedby`	Associe une description à un élément	”description-id”
`Role`	Définit le rôle d’un élément	”button” ou navigation”
`Aria Live`	Informe qu’un contenu change dynamiquement	a”polite”

Attributs utiles à l’accessibilité

Alt : fournit un texte alternatif décrivant le contenu visuel, comme pour une image.
Title : spécifie un titre informatif complémentaire à l’élément.
Tabindex : définit l’ordre de navigation clavier de l’élément.
Role : indique le rôle sémantique de l’élément pour les technologies d’assistance.
Focusable : indique si l’élément peut recevoir le focus via le clavier.
Lang : déclare la langue du contenu de l’élément pour aider les technologies d’assistance.

Autres attributs ARIA courants

Voici une liste plus complète pour aller plus loin :

Aria Activedescendant : indique l’élément actif dans une liste gérée par un conteneur.
Aria Atomic : détermine si le contenu doit être traité comme une unité indivisible lors des mises à jour dynamiques.
Aria Autocomplete : active ou désactive l’auto-complétion pour anticiper l’entrée utilisateur.
Aria Busy : indique si un élément est occupé ou en cours de mise à jour.
Aria Checked : Précise l’état de sélection d’un élément : vrai, faux ou partiellement sélectionné.
Aria Colcount : Définit le nombre total de colonnes dans une grille ou un tableau.
Aria Colindex : Indique l’index de la colonne pour une cellule dans une grille.
Aria Colspan : Spécifie le nombre de colonnes qu’une cellule doit occuper dans une grille.
Aria Controls : Identifie un ou plusieurs éléments contrôlés par l’élément courant.
Aria Current : Indique si l’élément représente la position actuelle dans une navigation.
Aria Describedby : Référence les éléments fournissant une description complémentaire à l’élément.
Aria Details : associe l’élément à des informations détaillées complémentaires.
Aria Disabled : signale qu’un élément est désactivé et non interactif pour l’utilisateur.
Aria Dropeffect : spécifie l’effet visuel lors d’une opération de glisser-déposer.
Aria Errormessage : Fournit un message d’erreur lors d’une validation échouée.
Aria Expanded: Indique si une section ou un menu est développé ou réduit.
Aria Flowto : définit un ordre de navigation personnalisé entre les éléments.
Aria Grabbed : Indique si un élément est actuellement saisi pour une opération de glisser-déposer.
Aria Haspopup : Signale la présence d’un menu ou d’une fenêtre contextuelle associée.
Aria Hidden : définit si un élément est masqué aux technologies d’assistance.
Aria Invalid : indique que la valeur d’un élément ne respecte pas les contraintes attendues.
Aria Keyshortcuts : définit des raccourcis clavier pour activer ou focaliser l’élément.
Aria Label : attribue une étiquette textuelle descriptive à l’élément.
Aria Labelledby : référence les éléments servant d’étiquette à l’élément.
Aria Level : définit le niveau hiérarchique d’un élément dans une structure.
Aria Live : indique l’importance des mises à jour dynamiques pour les lecteurs d’écran.
Aria Modal : signale qu’une fenêtre modale capte toute l’attention de l’utilisateur.
Aria Multiline : indique qu’un champ de saisie accepte plusieurs lignes de texte.
Aria Multiselectable : spécifie si plusieurs éléments peuvent être sélectionnés simultanément.
Aria Orientation : détermine l’orientation (horizontale ou verticale) d’un élément.
Aria Owns : déclare une relation de propriété entre l’élément courant et d’autres éléments.
Aria Placeholder : fournit un indice textuel pour un champ de saisie.
Aria Posinset : indique la position d’un élément dans un ensemble ordonné.
Aria Pressed : représente l’état d’un bouton (enfoncé, relâché ou indéterminé).
Aria Readonly : signale qu’un élément est en lecture seule et non modifiable.
Aria Relevant : définit quels changements doivent être annoncés par les technologies d’assistance.
Aria Required : indique qu’un champ ou contrôle est obligatoire.
Aria Roledescription : fournit une description personnalisée du rôle de l’élément.
Aria Rowcount : définit le nombre total de lignes dans une grille ou un tableau.
Aria Rowindex : indique l’index de la ligne pour une cellule dans une grille.
Aria Rowspan : spécifie le nombre de lignes qu’une cellule doit occuper.
Aria Selected : signale si un élément est sélectionné dans un groupe ou une liste.
Aria Setsize : définit le nombre total d’éléments dans un ensemble.
Aria Sort : indique l’ordre de tri appliqué à une colonne dans un tableau.
Aria Valuemax : définit la valeur maximale pour un contrôle interactif.
Aria Valuemin : définit la valeur minimale pour un contrôle interactif.
Aria Valuenow : indique la valeur actuelle pour un contrôle de type curseur.
Aria Valuetext : fournit une description textuelle de la valeur actuelle d’un contrôle.