Accessibilité sur logiciel SIRH - UX design
Analyse et test des contrastes des couleurs de la charte existante
Démarche du projet & méthodologie
Auditer avant tout la charte du logiciel de SIRH pour identifier les points à reprendre pour répondre à la norme. Établir un rapport complet avec les préconisations gouvernementales en matière d’accessibilité, conseiller sur les évolutions à prévoir, chiffrer sur plusieurs sprints le développement de cette charte accessible.
Implémenter les contrastes d'accessibilité avec prise en compte de la navigation au clavier sur une charte existante.
Contraintes techniques
Prendre en compte une nouvelle charte qui a été mise en place depuis peu chez les clients qui commencent à être dans des habitudes de travail. Apporter du changement et du conseil pour mettre en place facilement la charte avec une personnalisation aux chartes clients. Il faut aussi sensibiliser les parties prenantes (consultants, utilisateurs...) à l'inclusivité de tous à l'accès de services numériques et supports applicatifs. Fournir des exemples de contrastes testés et répondant à une notation minimum au AA.
Travailler avec une équipe de développeurs et les conseillers sur les contraintes RGAA. Etre en support des consultants et leurs fournir des avantages et arguments à délivrer à leurs clients.
Tests d'observations et retours clients sur la robustesse de l'interface
Attention particulière pour un client très impliqué dans la démarche : Handicap international via des tests sur lecteurs d'écrans en interne. Retours permettant d'ajuster les évolutions de l'interface. Identifications de Title images manquants, non pertinents, messages d'aide à endroits à ajouter...
Avant / Après - Choix des couleurs plus adaptées aux contrastes selon une déclinaison similaire à l'existant.
Documentation d'aide à la personnalisation d'une nouvelle charte accessible
Accompagner et informer sur la mise en place de la charte accessible, avec des bonnes pratiques et un mode d'emploi pour sa déclinaison. Créer une interface de création du contraste intuitive et fluide tout en documentant sur la norme WCAG-RGAA. Documentation dédiée à répondre à un branding avant tout mais qui doit comporter la possibilité d'en savoir plus pour des utilisateurs sensibilisés à l'accessibilité. Fournir des liens vers de documentation officielle et des liens vers des contrôleurs de contrastes.
Travail apporté sur les points suivants
- Assurer un ratio de contraste de 4.5:1 entre l’arrière-plan et le texte
- Augmenter la taille de vos polices (> 14px) et des interlignes
- Utiliser des effets de texte (italique, gras ou soulignement) pour mettre en avant les informations importantes
- Rédiger correctement le texte alt des images, avec une vraie description du visuel
- Inclure des libellés clairs pour les liens hypertextes ou les boutons d’action
- Libellé : Graisse typo et contours icônes
- Taille : Grossir les boutons trop petits et peu facilement saisissables avec la souris
- Interactions doivent être visibles (survol = cliquables)
- La couleur ne doit pas être le seul moyen d’apporter une information (ajout de texte et d’icônes si information importante, ce
sera différent si il s’agit d’un bouton actionnable ou juste du graphisme).
- Opter pour plus de simplicité et sobriété (contenu, typo, couleurs)
- Augmenter la taille de vos polices (> 14px) et des interlignes
- Utiliser des effets de texte (italique, gras ou soulignement) pour mettre en avant les informations importantes
- Rédiger correctement le texte alt des images, avec une vraie description du visuel
- Inclure des libellés clairs pour les liens hypertextes ou les boutons d’action
- Libellé : Graisse typo et contours icônes
- Taille : Grossir les boutons trop petits et peu facilement saisissables avec la souris
- Interactions doivent être visibles (survol = cliquables)
- La couleur ne doit pas être le seul moyen d’apporter une information (ajout de texte et d’icônes si information importante, ce
sera différent si il s’agit d’un bouton actionnable ou juste du graphisme).
- Opter pour plus de simplicité et sobriété (contenu, typo, couleurs)
