Accessibilité RGAA avec Ember.js : le guide
Ember.js est le framework JavaScript « opinionated » utilisé par LinkedIn, Apple Music et de nombreuses applications enterprise. Son modèle de composants Glimmer et son router robuste offrent une base solide, mais l'accessibilité demande une attention particulière à la navigation SPA et aux composants custom. Ce guide couvre Ember Octane, les add-ons d'accessibilité (ember-a11y, ember-focus-trap) et les patterns pour applications Ember conformes RGAA.
Ember.js et l'enterprise
Ember reste présent dans de grandes applications enterprise, portails métier et SaaS B2B. La communauté Ember porte historiquement une attention forte à l'accessibilité via des add-ons dédiés comme ember-a11y-landmarks, ember-focus-trap et ember-cli-a11y-testing.
100k+
Sites Ember en production
15+
Add-ons a11y disponibles
Ember-based
En Bref : L'essentiel à retenir
- Framework : Ember.js nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : ember-a11y-landmarks.
- Critères RGAA clés : 7.1, 7.3, 8.2.
Erreurs Fréquentes avec Ember.js
Navigation sans focus management
Ember Router ne déplace pas automatiquement le focus après une transition de route. L'add-on ember-a11y-refocus corrige ce problème.
action sur éléments non-interactifs
L'usage de {{action ...}} sur div ou span casse l'accessibilité clavier. Ember Octane encourage les button ou link-to.
<div {{on "click" this.save}}>Save</div><button type="button" {{on "click" this.save}}>Save</button>link-to sans contenu textuel
Un <LinkTo @route="..."><Icon /></LinkTo> sans aria-label est invisible aux lecteurs d'écran.
Modales sans focus trap
Les modales créées en Glimmer sans ember-focus-trap permettent au focus de sortir, cassant l'UX et la conformité RGAA.
Templates HBS sans landmarks
Le layout application.hbs doit utiliser main, nav, footer, souvent oubliés dans les projets Ember anciens.
Packages à éviter
Ces packages sont connus pour causer des problèmes d'accessibilité. Évitez-les ou configurez-les correctement.
ember-bootstrap < v5
Anciennes versions avec a11y limitée
Alternative : ember-bootstrap v5+ ou Tailwind
Add-ons de modal non maintenus
Pas de focus trap correct
Alternative : ember-focus-trap + HTML dialog natif
Bonnes Pratiques Ember.js
ember-a11y-landmarks
Add-on qui fournit des helpers <HeaderLandmark>, <MainLandmark> pour garantir la sémantique HTML5.
ember-a11y-refocus
Gère automatiquement le déplacement du focus après chaque transition de route, un must pour les SPA Ember.
ember-focus-trap
Piège le focus dans les modales et overlays, indispensable pour les composants Glimmer dialog.
ember-cli-a11y-testing
Add-on qui injecte axe-core dans vos tests acceptance Ember, détectant les régressions automatiquement.
LinkTo avec aria-label
Pour les LinkTo sans texte visible, ajoutez aria-label ou un span sr-only contenant la description.
Critères RGAA clés pour Ember.js
Ces critères du référentiel RGAA sont particulièrement importants pour les sites Ember.js.
Scripts
Ember Router avec refocus add-on
Composants interactifs
Button et LinkTo privilégiés sur action div
Titre
ember-page-title pour titres dynamiques
Landmarks
ember-a11y-landmarks ou HTML5 natif
Focus visible
CSS app.css avec focus-visible
Checklist accessibilité Ember.js
Vérifiez ces points essentiels avant de mettre votre site Ember.js en production.
- application.hbs avec landmarks HTML5
- ember-a11y-refocus installé
- ember-focus-trap sur modales
- LinkTo avec texte ou aria-label
- Pas d'action sur div/span
- ember-page-title configuré
- ember-cli-a11y-testing dans les tests
- ESLint ember template-lint a11y activé
- Focus visible dans app.css
- Skip link en début de application.hbs
Questions Fréquentes sur Ember.js et l'accessibilité
Ember.js est-il un bon choix pour une application accessible ?
Oui. La communauté Ember a un fort focus sur l'accessibilité avec des add-ons dédiés et des patterns éprouvés. Combiné à Ember Octane et Glimmer, Ember permet de construire des applications conformes RGAA avec discipline.
Faut-il migrer un projet Ember vers React ou Vue pour l'a11y ?
Pas nécessairement. Ember offre un écosystème a11y mature. La décision de migration doit se baser sur d'autres critères (équipe, écosystème, évolutivité). Un Ember bien maintenu peut rester conforme longtemps.
Comment tester l'accessibilité dans Ember ?
Installez ember-cli-a11y-testing qui injecte axe-core dans vos tests acceptance. Ajoutez des assertions a11yAudit() dans les tests critiques. Complétez par des audits manuels avec NVDA/VoiceOver.
Outils Recommandés pour Ember.js
ember-a11y-landmarks
Add-on officiel pour gérer les landmarks HTML5 dans les templates Glimmer.
ember-a11y-refocus
Add-on qui gère le focus après les transitions de route Ember Router.
ember-cli-a11y-testing
Intégration d'axe-core dans les tests acceptance Ember pour détecter les erreurs a11y.
Scanner RGAA Checker
Auditez votre application Ember en production contre les 106 critères RGAA 4.1.
Auditez votre site Ember.js gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit