Qu'est-ce que l'accessibilité dans Timesquare ?

Tout d'abord, c'est quoi l'accessibilité ?

L'accessibilité fait référence à la conception et à la mise en œuvre de fonctionnalités qui permettent aux utilisateurs ayant divers types d'incapacités physiques ou cognitives d'accéder et d'utiliser la solution de manière efficace.

Voici quelques-uns des principaux objectifs et avantages de l'accessibilité telle que nous l'avons conçue dans Timesquare :

• Inclusion : L'accessibilité permet d'inclure un plus large éventail d'utilisateurs, y compris ceux qui ont des handicaps physiques, sensoriels ou cognitifs. Cela garantit que personne ne soit exclu de l'utilisation de Timesquare en raison de limitations spécifiques.
• Amélioration de l'expérience utilisateur : En rendant Timesquare plus accessible, Holy-Dis améliore l'expérience utilisateur pour tous les utilisateurs, pas seulement pour ceux qui ont des besoins spécifiques. Les fonctionnalités d'accessibilité telles que des interfaces plus simples, des contrôles plus clairs et des options de personnalisation rendent Timesquare plus convivial pour tout le monde.
• Respect et éthique : Investir dans l'accessibilité, c'est s'engager pour le respect de l'ensemble des utilisateurs, indépendamment de leurs capacités. 

Pour en savoir plus sur l'accessibilité et les réglementations existantes ou à venir :

https://ec.europa.eu/social/main.jsp?catId=1202&intPageId=5581&langId=en

https://accessibilite.numerique.gouv.fr/

https://www.w3.org/WAI/fundamentals/accessibility-intro/fr

Comment est assurée l'accessibilité dans Timesquare ?

Pour s'assurer de l'accessibilité de Timesquare, Holy-Dis s'appuie sur une étroite collaboration entre les équipes UI (profil de notre lead UI), produit et techniques, afin de mettre en place de bonnes pratiques.

Éducation et sensibilisation : sensibilisation de toute l'équipe à l'importance de l'accessibilité et aux besoins des utilisateurs ayant des handicaps, notamment au travers de sessions de formation sur les bonnes pratiques en matière d'accessibilité dans le monde du logiciel. A noter : Formation de notre lead QA en mars 2024 sur les questions d’accessibilité :

• Sensibilisation à l'accessibilité numérique, enjeux et règlementation
• Tester l'accessibilité de sites et d'applications (selon les référentiels d’accessibilité numérique WCAG ou RGAA*)

Conception inclusive : Intégration de l'accessibilité dès les premières étapes de conception des nouvelles fonctionnalités. Nos maquettes sont réalisées grâce à des outils de type Adobe XD.

Design system : implémentation d'un design system, Zeroheight, c'est-à-dire un ensemble cohérent de principes, de normes, de composants et de lignes directrices de conception utilisés pour créer une expérience utilisateur unifiée et cohérente à travers l'ensemble de la solution.  

Interface utilisateur accessible :

• Utilisation d'un contraste élevé entre le texte et l'arrière-plan pour faciliter la lisibilité. Pour répondre aux normes d'accessibilité, le niveau AA nécessite un contraste de couleur de 4,5: 1 entre le texte et l'arrière plan pour le texte normal et 3: 1 pour le grand texte. Nos tests de contraste s'appuient sur des outils tels que Adobe Color - Contrast Analyzer. Ecran En direct - tests autour du contraste :

• On évite les informations basées uniquement sur la couleur, car cela peut exclure les utilisateurs ayant une vision des couleurs altérée ou ceux qui utilisent des technologies d'assistance ne reconnaissant pas la couleur. Timesquare s'appuie sur des indicateurs supplémentaires tels que des icônes, des étiquettes ou des motifs pour renforcer les informations visuelles.
• Personnalisation des couleurs, permettant aux utilisateurs de choisir des combinaisons de couleurs qui correspondent le mieux à leurs préférences ou à leurs besoins spécifiques en matière de vision. Timesquare propose ainsi une palette contenant 7 nuances d'une même couleur afin de proposer plus de choix de couleurs sans pour autant saturer la charge cognitive. Par ailleurs, cette palette composée de pastels a pour objectif de limiter les aplats de couleurs qui augmentent le bruit visuel de l'interface.
• Les icônes / les boutons sont suffisamment grands pour être facilement cliquables ou tactiles dans le cadre de la vue mobile.
• Descriptions textuelles alternatives (texte alternatif) pour les icônes et les autres éléments visuels.
• Utilisation d'étiquettes explicites pour les formulaires et les champs de saisie.
• Navigation grâce au clavier en garantissant un ordre logique de tabulation.

Réduction du bruit : suppression des éléments superflus (popin ou messages intrusifs), inutiles ou distrayants de l'interface utilisateur (exemple avec les travaux réalisés en 2023 pour la réduction du bruit autour du header), avec une hiérarchie visuelle claire, afin de créer une expérience utilisateur plus limpide, plus concise et plus facile à comprendre pour tous les utilisateurs, y compris ceux ayant des handicaps ou des difficultés cognitives.

Responsivité : capacité de la solution à s'adapter à différents appareils et tailles d'écran. Cette spécificité est d'autant plus importante pour My Timesquare. En effet, l'interface utilisateur de My Timesquare est conçue de manière à ce qu'elle soit utilisable aussi bien sur un ordinateur de bureau que sur une tablette ou un smartphone. Cela implique l'utilisation du responsive design, où les mises en page et les éléments d'interface utilisateur se redimensionnent et se réorganisent automatiquement en fonction de la taille de l'écran.

Tests d'accessibilité : Intégration de tests d'accessibilité liés à l'utilisation de la couleur ou du contraste, dans le processus de développement.

Rétroaction et amélioration continue : Recueil régulier de retours des utilisateurs sur l'accessibilité de Timesquare et mesures pour améliorer l'expérience des utilisateurs ayant des handicaps.

* Note : la réglementation relative au RGAA n'est pas applicable à la société Holy-Dis ni à ses produits Timesquare et My Timesquare du fait des contenus et services concernés. Néanmoins, certains de nos clients peuvent être soumis à des contraintes légales de mise en conformité compte tenu de leur taille et chiffre d’affaires. De ce fait, Holy-Dis a mis en place un plan d'action sur la question de l'accessibilité de ses produits.

Et pour la suite ?

Il est important de souligner que concevoir et maintenir un produit accessible est un objectif sur le long terme, et qu'il est difficile de modifier tous les éléments de l'interface en prenant en compte tous les critères d'accessibilité.

Au lancement du projet Timesquare V2, nous avons travaillé avec l'assistance de l'agence Usabilis à la refonte de l'UX et UI dans une démarche qui a intégré les utilisateurs : enquête terrain, tri par carte, observation, shadowing..., le tout ayant abouti à une révision de l'architecture de l'information, des spécifications ergonomiques et une refonte du design des écrans.

Actuellement, nous nous concentrons sur la livraison de fonctionnalités respectant les exigences suivantes :

• Contrastes des couleurs conformes aux normes WCAG
• Tailles des cibles tactiles et du pointeur adaptées aux personnes ayant des difficultés motrices
• Espacement des cibles suffisant pour une utilisation facile
• Ordre spatial et regroupement des informations pour une meilleure compréhension

Au deuxième trimestre 2024, nous avons acté de privilégier dans un premier temps la mise en place d’un plan d’action pour My Timesquare, la solution dédiée à l’ensemble des collaborateurs et qui concerne donc le plus grand nombre d’utilisateurs.

• De juin à juillet 2024 : Etat des lieux grâce des tests manuels et automatiques.
• Août 2024 : Priorisation et planification des ajustements selon leurs criticités.
• T4 de 2024 à T1 de 2025 : Développement des ajustements My Timesquare (sur 3 à 4 versions)
• Début T2 de 2025 : Audit par un cabinet tiers
• T2 de 2025 : Correction des problèmes d'accessibilité identifiés lors de l'audit puis audit de contrôle
• Fin S1 de 2025 : Déclaration de conformité
• Début T3 de 2025 : Mise en place d'un schéma pluriannuel de mise en accessibilité en fonction des résultats de l'audit
• En continu : poursuite de la sensibilisation transverse et formation des équipes à la conception et la QA

Important ! Le rétroplanning a été ajusté le 21/07/2024. Il est susceptible d'évoluer dans les semaines à venir.

Dans le futur, nous prévoyons d'aller toujours plus loin en intégrant :

• Textes d'accessibilité pour les lecteurs d'écran
• Textes alternatifs pour les images
• Balisage et code nécessaires pour un fonctionnement optimal avec les technologies d'assistance
• Raccourci clavier
• Redimensionnement du texte

Premiers résultats de l’état des lieux interne

Voici un aperçu des premiers résultats de l’état des lieux interne mené depuis début juin 2024 sur My Timesquare :

Tests manuels

1. Cible #1 : Page Synthèse (portail RH-Vue Responsable) qui regroupe une variété importante de composants
2. Biais : c’est un écran relativement récent et qui a été pensé accessible. En extrapolant ces valeurs à l’ensemble des pages représentatives de My Timesquare les valeurs obtenues pourraient être sensiblement plus basses.
3. Outils : extension Assistant RGAA
4. Norme : RGAA 4.1.2
5. Résultats : 53 % de conformité

Tests semi-automatiques

1. Cible : Totalité des pages (Profil Responsable)
2. Outils : Browserstack – Extension Accessibility
3. Norme : WCAG 2.1 AA
4. Résultats : 508 problèmes dans 88 composants différents (trier du plus dur au plus simple à résoudre)

• • 342 de couleur (dont 162 déjà résolus)
  • 8 de keyboard (lié à la navigation au clavier)
  • 80 de zone type forum (lié au screen reader)
  • 39 de label (lié au screen reader)
  • 29 de alt-area (lié au screen reader)
  • 4 liés au zoom
  • 4 de langage (résolus depuis)

Note : de nombreux composants étant partagés avec Timesquare, les travaux engagés sur My Timesquare seront profitables à Timesquare. Un état des lieux et un plan d’action dédié à Timesquare seront établis en parallèle et en fonction des avancées des travaux effectués sur My Timesquare.