RGAA & accessibilité avec Lagoon

Le RGAA, référentiel général d'amélioration de l'accessibilité, donne le cadre de vérification de l'accessibilité numérique. Lagoon fournit des composants Blazor WebAssembly qui portent une partie de ces exigences : libellés, focus, navigation clavier, rôles et attributs ARIA, annonces lecteur d'écran, états de chargement et variables de thème.

L'engagement Lagoon est de fournir des composants réutilisables qui facilitent la conformité, sans remplacer la responsabilité applicative : chaque écran doit conserver une structure lisible, des textes traduits, une navigation clavier cohérente et des contrastes adaptés au thème retenu.

Responsabilité projet

Un composant accessible peut devenir non conforme si son libellé est absent, si l'ordre de lecture est modifié, si l'information n'est portée que par une couleur ou si un thème réduit les contrastes. Vérifiez toujours l'écran final avec les règles RGAA applicables.

Source historique reprise

L'ancienne documentation indiquait les règles suivantes pour les composants Lagoon :

Sur l'ensemble des composants de Lagoon il est possible d'ajouter les deux balises Aria suivantes :

• AriaLabel : permet d'ajouter l'attribut aria-label sur les composants.
• AriaLabelledBy : permet d'ajouter l'attribut aria-labelledby sur le composant

Attention si le composant est un conteneur d'autres éléments (LgFrame, LgListView, ...) l'attribut est ajouter sur celui-ci et non sur tous les enfants.

Un mécanisme permet de signaler au lecteur d'écran une information. Le comportement

La suite de ce guide explicite ces points avec les usages vérifiés dans la documentation actuelle des composants.

Bonnes pratiques par thème

Libellés accessibles

• Donnez un libellé visible aux champs et actions dès que possible : Label, Text, Title ou contenu textuel selon le composant documenté.
• Utilisez des clés de traduction pour les textes utilisateur, par exemple #Save, #OrderNumber ou #OrdersGridAria.
• Pour un bouton ou une action principalement identifiée par une icône, ajoutez un libellé accessible avec AriaLabel ou reliez l'action à un texte existant avec AriaLabelledBy.
• Pour les champs de formulaire, préférez le Label du composant Lagoon au HTML natif. Le thème peut afficher les libellés hors du champ via la variable SCSS $custom-label-outside.

Label hors champ

Le mode $custom-label-outside positionne les labels au-dessus ou hors des champs dans les thèmes qui le prennent en charge. Il améliore la persistance du libellé visible et évite de dépendre d'un placeholder comme seul nom accessible.

Navigation clavier

• Utilisez les composants Lagoon plutôt que les éléments HTML natifs lorsqu'un équivalent existe : LgButton, LgEditForm, LgGridView, LgModal, LgSelect, etc.
• Vérifiez que chaque action est atteignable au clavier et que l'ordre de tabulation suit l'ordre visuel et métier de la page.
• Les raccourcis configurés sur LgButton avec ShortcutKey sont documentés dans sa bulle d'aide ; évitez les raccourcis ambigus ou incompatibles avec ceux du navigateur.
• Dans une grille, évitez les regroupements ou déplacements de colonnes lorsque l'ordre de lecture par lecteur d'écran est prioritaire.

Focus visible

• Ne supprimez jamais l'indicateur de focus sans fournir une alternative au moins aussi visible.
• Les thèmes exposent des variables de focus, par exemple pour le header ou la GridView. Le module GridView définit notamment $gridview-rgaa-indicator et $gridview-rgaa-indicator-offset.
• Utilisez AutoFocus avec parcimonie : il est utile pour une action principale ou un retour après chargement, mais il ne doit pas surprendre l'utilisateur.

Contrastes et thèmes

• Activez ou adaptez les options de thème prévues pour les contrastes renforcés, notamment $custom-rgaa dans les thèmes qui la déclarent.
• Vérifiez les couples texte/fond après personnalisation de $primary, $secondary, des couleurs de toolbar, de GridView, de notifications et des états hover/focus.
• Ne transmettez jamais une information uniquement par la couleur : ajoutez un texte, un libellé, un état, une icône nommée ou une annonce adaptée.

Attributs ARIA

AriaLabel et AriaLabelledBy permettent de nommer un composant pour les technologies d'assistance. Pour les composants conteneurs, l'attribut est appliqué au conteneur lui-même ; il ne nomme pas automatiquement chaque élément enfant. Les enfants interactifs doivent donc conserver leurs propres libellés lorsqu'ils portent une action distincte.

Utilisez AriaLabel pour fournir un nom textuel direct et AriaLabelledBy lorsque le nom accessible doit reprendre le texte d'un élément déjà visible. Ne dupliquez pas inutilement un libellé visible clair.

Alternatives textuelles et icônes

• Une icône décorative ne doit pas être la seule porteuse d'information.
• Une icône interactive doit être portée par un composant actionnable avec un libellé accessible, par exemple un LgButton avec Text ou AriaLabel.
• Les messages vides, bannières, notifications et loaders doivent fournir un texte compréhensible, traduit et cohérent avec l'état affiché.

Annonces lecteur d'écran

Lagoon fournit un mécanisme d'annonce aux lecteurs d'écran via ShowScreenReaderInformation. LgLoaderView l'utilise pour annoncer les changements d'état avec RgaaTextLoading et RgaaTextLoaded, dont les valeurs par défaut sont des clés de traduction.

Utilisez ce mécanisme pour les changements dynamiques importants qui ne déplacent pas forcément le focus : fin de chargement, actualisation de résultats, changement de langue ou information globale non visible immédiatement.

Tableau récapitulatif

Composant	Point d'attention accessibilité
LgButton	Prévoir Text, AriaLabel ou AriaLabelledBy pour les boutons à icône ; vérifier les raccourcis clavier et l'usage de AutoFocus.
LgGridView<TItem>	Nommer la grille avec Title, AriaLabel ou AriaLabelledBy ; préserver un ordre de lecture cohérent ; vérifier filtres, tri, pagination et regroupements.
LgLoaderView	Personnaliser si besoin les textes RgaaTextLoading et RgaaTextLoaded avec des clés traduites.
LgListView<TItem>	Nommer le groupe racine ; vérifier que chaque item et les actions de sélection restent compréhensibles sans couleur seule.
LgHyperlink	Fournir un contenu qui décrit clairement la destination ou l'action déclenchée.
LgFrame	Si le panneau structure une zone importante, fournir un titre clair ou un nom accessible sur le conteneur.

Renvois vers les composants

Les pages composants détaillent leurs paramètres et leur section « Accessibilité ». Consultez notamment :

• LgButton pour les boutons, raccourcis clavier, focus et libellés ARIA.
• LgGridView<TItem> pour les grilles, l'ordre de lecture et les libellés de tableau.
• LgLoaderView pour les annonces RGAA de chargement.
• LgListView<TItem> pour les listes et groupes nommés.
• LgHyperlink pour les liens explicites.
• LgFrame pour les conteneurs nommés.

Checklist de revue RGAA

• Les textes visibles et les libellés accessibles utilisent des clés #....
• Chaque action iconifiée possède un nom accessible.
• La navigation clavier atteint toutes les actions dans un ordre logique.
• Le focus reste visible dans le thème applicatif.
• Les contrastes sont vérifiés après personnalisation SCSS, en particulier avec $custom-rgaa et $custom-label-outside.
• Les messages dynamiques importants sont visibles ou annoncés aux lecteurs d'écran.
• Les tableaux, listes et conteneurs ont un titre ou un nom accessible lorsque leur contexte n'est pas évident.
• Les informations ne reposent pas uniquement sur une couleur, une position ou une icône.