Conception, code, conforme: accessibilité dans l’apprentissage de la main-d’œuvre

Découvrez comment Resolute a aidé un client à créer une expérience Web plus fonctionnelle, accessible et évolutive en instituant des pratiques d’accessibilité et en tirant parti des outils de progression.

Dans un monde où la plupart de nos vies se déroulent en ligne, l’accessibilité sur le Web ne doit pas être traitée comme une réflexion après coup. La conception avec l’inclusivité n’est plus facultative; c’est essentiel. Tout comme une chaise a besoin de quatre jambes robustes pour être sûres pour tout le monde, les expériences numériques doivent être construites en pensant à tous les utilisateurs.

Mais lorsque la plate-forme en question est éducative, les enjeux sont encore plus élevés. Ces plates-formes servent un éventail diversifié d’apprenants, certains avec des déficiences visuelles, auditives, moteurs ou cognitives et font face à des exigences d’accessibilité plus strictes que les sites Web généraux.

C’est pourquoi Résolu était fier de s’associer à une entreprise américaine offrant des outils de formation en ligne pour les employés de première ligne. La plate-forme avait récemment été acquise par un principal fournisseur de conformité en ligne et de formation de la main-d’œuvre, ce qui augmente davantage la barre des performances, de l’accessibilité et de l’évolutivité. L’objectif: construire une expérience Web plus fonctionnelle, accessible et évolutive.

Lorsque le design vous ralentit

Le projet a commencé avec un point de douleur familier: la fragmentation. L’écosystème de conception du client a été réparti sur plusieurs sources:

• Une bibliothèque Figma interne en forme par des années de modifications de marque
• Un thème partiellement personnalisé à l’intérieur Progress Themedbuilder
• Un site en direct avec des composants de progrès Kendo UI qui ne s’alignaient pas toujours avec les conceptions

Cela a entraîné la confusion, les retards et les incohérences, en particulier autour de l’accessibilité. Les développeurs ont eu du mal à cartographier les conceptions à des composants réels. Le thème était cassant. Et certains modèles d’interface utilisateur n’étaient pas utilisables pour les personnes qui comptent sur la navigation par clavier ou les technologies d’assistance.

Resolute a été amené pour le nettoyer, rationaliser le workflow et aider le client à se diriger vers une solution plus conforme et évolutive.

Fixation de la fondation: themebuilder en action

Notre équipe UX / UI a commencé par auditer le système de conception existant du client. Ils ont travaillé en étroite collaboration avec leur équipe interne pour unifier le langage visuel et la migrer dans le Builder de Thème de progrès, qui a servi de source centrale de vérité pour le style et le thème à l’avenir.

Themebuilder n’était pas seulement une commodité; il a aidé à appliquer la cohérence dans jetons de conception Comme les couleurs, les frontières et l’espacement, tout en aidant à s’aligner sur les meilleures pratiques de l’accessibilité.

Le travail de l’équipe UX / UI comprenait:

• Consolider le bouton redondant et les variations de forme
• Correction des problèmes visuels avec le contraste, l’espacement et la typographie
• Aider l’équipe de conception à comprendre comment utiliser le constructeur de thème efficacement pour prendre en charge l’accessibilité à long terme

Des visuels au code: accessibilité dans la construction

Une fois que la fondation design a été solide, notre équipe frontale a commencé à implémenter la nouvelle interface utilisateur dans le code. Au cours de plusieurs mois, le frontend de la plate-forme a été reconstruit avec l’accessibilité comme une exigence de base, en se concentrant non seulement sur son apparence, mais aussi à son fonctionnement pour chaque utilisateur.

Ce n’était pas seulement une bonne UX; Il s’agissait également de répondre aux besoins de conformité réels. Étant donné que la plate-forme dessert une large base d’utilisateurs aux États-Unis, y compris les organisations éducatives et affiliées au gouvernement, plusieurs normes juridiques s’appliquent, notamment:

• ADA (Americans with Disabilities Act): En particulier le titre III, qui s’applique aux établissements d’enseignement et aux sites Web commerciaux
• L’article 508 de la loi de réadaptation: Pour les plateformes qui reçoivent un financement fédéral ou travaillant avec des entités gouvernementales

Pour répondre à ces exigences, nous avons aligné la construction avec Niveau WCAG 2.1 AA Lignes directrices élaborées par le W3C (World Wide Web Consortium), actuellement la référence la plus utilisée pour l’accessibilité Web aux États-Unis

À quoi cela ressemblait dans le code:

• Chaque élément interactif était accessible via Navigation du clavier (onglet, flèches, etc.).
• Clair, visible États de concentration ont été implémentés pour tous les boutons, liens et formulaires.
• Nous avons structuré l’application en utilisant HTML sémantique et appliqué Rôles aria pour la technologie d’assistance (par exemple, <button>, <nav>, <form>). Pourtant, nous avons appliqué des rôles ARIA uniquement lorsque cela est nécessaire pour les composants personnalisés ou les éléments non sémantiques, en évitant de trop répartir sur ARIA. Il est crucial d’utiliser ARIA uniquement lorsque les éléments HTML natifs ne peuvent pas fournir les fonctionnalités requises.
• Pour les cas d’utilisation au-delà des configurations par défaut de l’interface utilisateur de Kendo ou de themebuilder, nous avons écrit Remplacements HTML personnalisés.
• Les étiquettes en double ou la confusion du lecteur d’écran ont été évitées à l’aide d’attributs comme aria-hidden="true" si nécessaire.

Les tests étaient à la fois automatisés et manuels. Des outils comme Ash Devtools, VAGUE Et Chromevox a aidé à signaler les problèmes de contraste, d’étiqueter la duplication et les pièges de navigation. Mais les tests humains comptaient autant. Par conséquent, un ordinateur portable à écran tactile a été utilisé pour simuler des scénarios utilisateur réels, vérifier la réactivité et valider comment les éléments se sont comportés entre les tailles d’écran et les types d’entrée.

Lorsque la personnalisation ajoute de la complexité

Telerik Themebuilder et Kendo UI offrent des fonctionnalités d’accessibilité solides, mais lorsque les composants sont fortement personnalisés, des problèmes inattendus peuvent apparaître. Resolute a aidé le client à dépanner plusieurs cas de bord:

• Les boutons construits sans le composant de base ne rendent pas correctement
• Certaines formulaires affichent des étiquettes deux fois pour sélectionner les lecteurs (par exemple, «nom d’utilisateur d’utilisateur»)
• Les composants du blazor manquaient de liaisons en texte alt, nécessitant une solution de contournement

Aucun de ces problèmes n’était des briseurs, mais ils ont montré à quel point l’expertise est importante. Sans développeurs de frontend qui comprennent à la fois les conditions de cadre et d’accessibilité, ces problèmes auraient pu passer inaperçus.

Accessibilité = structure + sémantique + référencement

Il y a un autre avantage à construire avec l’accessibilité à l’esprit: une meilleure optimisation des moteurs de recherche (SEO). Bon nombre des mêmes pratiques qui soutiennent les utilisateurs handicapés, comme utiliser HTML sémantiqueun DOM HTML bien structuré (modèle d’objet de document) et des titres significatifs, aident également les moteurs de recherche à comprendre et à classer votre contenu.

La mise en œuvre du frontend dans ce cas comprenait:

• Un <h1> par page, avec des hiérarchies d’en-tête propres pour une structure comme <h2> pour les sections et <h3> composants intérieurs
• Texte alt pour toutes les images significatives
• Texte du lien descriptif et navigation accessible

Le résultat? Une plate-forme plus facile à utiliser, plus découvrable et légalement conforme.

Mesure de transfert de connaissances

Le rôle de Résolute s’est étendu au-delà des travaux de conception et de développement. Nous avons formé l’équipe interne du client pour maintenir et construire sur le système en pensant à l’accessibilité. Qui comprenait:

• Documenter toutes les décisions et techniques d’accessibilité utilisées
• Fournir des modèles de conception réutilisables dans themebuilder
• Direction des séances de formation sur les bases du WCAG et les conseils de flux de travail de développement

L’accessibilité n’est pas quelque chose que vous faites une fois. C’est une pratique. Nous nous sommes donc assurés que l’équipe pouvait faire avancer cela.

Réflexions finales

L’accessibilité est une responsabilité partagée: la conception, le développement et le leadership de l’achat. Notre client a compris que, et, avec les bons outils et le bon soutien, a fait de sérieuses progrès vers une plate-forme qui fonctionne pour tout le monde.

Progress ThemeBuilder a aidé à rationaliser et à normaliser le processus de conception-code. Resolute a aidé à relier les points en alignant la conformité, la convivialité et l’évolutivité à long terme.

En savoir plus sur la façon dont Resolute peut aider à résoudre les problèmes d’utilisation, en commençant par le Évaluation UX.