Générateur de Notifications Accessibles
Créez des zones de notification accessibles avec role="status" et role="alert" pour les messages dynamiques (RGAA 7.5).
Guide RGAA 7.5
Messages de statut et technologies d'assistance
Configuration
Prévisualisation
Status (poli)
Produit ajouté au panier.
Comportement :
Succès, info - lu après l'action en cours
HTML - Zone de notification
<!-- Zone de notification avec role="status" --> <div id="notifications" role="status" aria-atomic="true" > <!-- Le contenu sera injecté dynamiquement --> </div>
JavaScript - Injection du message
// Exemple d'utilisation
function showNotification(message) {
const container = document.getElementById('notifications');
container.textContent = message;
}
// Utilisation
showNotification('Produit ajouté au panier.');Quand utiliser quel role ?
- status : Succès, info, panier mis à jour
- alert : Erreur critique, session expirée
- log : Chat, historique de messages
Bonnes pratiques
- • Placez la zone dans le DOM avant qu'elle ne soit remplie
- • Utilisez
aria-atomic="true"pour lire tout le contenu - • N'abusez pas de
role="alert" - • Testez avec un lecteur d'écran (NVDA, VoiceOver)