Accessibilité ♿
téo s'engage à rendre son interface accessible au plus grand nombre. L'application intègre des fonctionnalités conformes aux standards WCAG 2.1 niveau AA et aux bonnes pratiques d'accessibilité web.
Navigation au clavier
Accès rapide au contenu
Au chargement de chaque page, un lien "Aller au contenu principal" apparaît lorsque vous appuyez sur Tab. Ce lien permet de sauter directement au contenu sans parcourir tout le menu de navigation.
Raccourcis clavier par composant
| Composant | Touches | Action |
|---|---|---|
| Boutons et actions | Enter, Espace | Activer le bouton |
| Menu latéral | Enter, Espace | Ouvrir/fermer les catégories |
| Filtres avancés | Enter, Espace | Afficher/masquer les filtres |
| Sélecteur multi-choix | Flèches ↑↓, Enter, Échap | Naviguer, sélectionner, fermer |
| Recherche SIRENE | Flèches ↑↓, Enter, Échap | Parcourir les résultats, sélectionner |
| Calendrier | Enter, Espace | Mois précédent/suivant, sélectionner une date |
| Volets latéraux | Enter, Espace | Fermer le panneau |
| Agenda | Enter, Espace | Ouvrir une séance |
| Info-bulles | Focus (Tab) | L'info-bulle s'affiche au survol clavier |
Vous pouvez naviguer dans téo entièrement au clavier en utilisant Tab (élément suivant), Shift+Tab (élément précédent), Enter/Espace (activer) et Échap (fermer/annuler).
Lecteurs d'écran
téo utilise les attributs ARIA (Accessible Rich Internet Applications) pour communiquer avec les lecteurs d'écran :
Éléments pris en charge
| Fonctionnalité | Support |
|---|---|
| Labels des boutons | Chaque bouton icône a un libellé textuel (aria-label) lisible par le lecteur d'écran |
| Icônes décoratives | Masquées pour les lecteurs d'écran (aria-hidden) pour ne pas polluer la lecture |
| État des éléments | Filtres, menus et panneaux indiquent leur état ouvert/fermé (aria-expanded) |
| Zones d'annonce | Les changements importants (agenda, signature) sont annoncés automatiquement (aria-live) |
| Textes masqués | Des informations contextuelles invisibles à l'écran sont lues par le lecteur d'écran (confidentialité, distanciel, nombre de filtres actifs...) |
| Rôles sémantiques | Les dialogues, menus, listes déroulantes et zones de contenu ont des rôles explicites (role="dialog", role="main", etc.) |
Lecteurs d'écran compatibles
téo a été testé et optimisé pour les lecteurs d'écran les plus courants :
- NVDA (Windows, gratuit)
- JAWS (Windows)
- VoiceOver (macOS, iOS)
Contraste et lisibilité
Conformité WCAG AA
Les couleurs de téo respectent les ratios de contraste WCAG AA :
- Texte normal : ratio minimum de 4.5:1
- Texte grand : ratio minimum de 3:1
- Éléments interactifs : ratio minimum de 3:1
Focus visible
Lorsque vous naviguez au clavier, l'élément actif est mis en évidence par un contour visuel clair, afin de toujours savoir où vous vous trouvez dans la page.
Réduction du mouvement
Si vous avez activé l'option "Réduire les animations" dans les préférences de votre système d'exploitation, téo respecte ce choix et désactive les transitions et animations.
| Système | Où activer |
|---|---|
| Windows | Paramètres > Accessibilité > Effets visuels > Effets d'animation |
| macOS | Préférences Système > Accessibilité > Affichage > Réduire les animations |
| iOS | Réglages > Accessibilité > Mouvement > Réduire les animations |
| Android | Paramètres > Accessibilité > Supprimer les animations |
Bonnes pratiques pour les utilisateurs
Vous pouvez agrandir l'interface avec le zoom de votre navigateur (Ctrl + / Cmd +) sans perte de fonctionnalité. téo s'adapte automatiquement.
téo utilise les couleurs définies par votre structure. Si le contraste vous semble insuffisant, contactez votre administrateur.
Signaler un problème d'accessibilité
Si vous rencontrez une difficulté d'accessibilité dans téo :
- Notez le composant ou la page concernée
- Décrivez le problème (navigation clavier impossible, texte illisible, élément non annoncé par le lecteur d'écran...)
- Contactez le support téo
Nous nous engageons à traiter les signalements d'accessibilité en priorité.
Cet article vous a été utile ?