Naviguer jusqu'au contenu principal

L'avenir des design systems est dans l'accessibilité

blog beige avec des lignes horizontales noires en forme d'étagères, chacune présentant un ensemble de taches multicolores sur chaque « étagère »blog beige avec des lignes horizontales noires en forme d'étagères, chacune présentant un ensemble de taches multicolores sur chaque « étagère »

Dans la troisième partie de notre série, nous nous entretenons avec des experts en design systems et en accessibilité sur la nécessité de faire des systèmes inclusifs une priorité absolue. Précédemment, nous avons abordé les thèmes de la complexité et de l'automatisation.

Illustration principale par Andreas Samuelsson.

En 2022, seuls 3 % des contenus Internet étaient accessibles aux personnes handicapées ; les design systems sont apparemment la meilleure solution pour faire avancer les choses. Si tout le monde utilise les mêmes outils et suit les mêmes règles, il devrait être assez facile d'intégrer des impératifs en matière d'accessibilité, n'est-ce pas ? (N'est-ce pas ?)

Diagramme à barres présentant les raisons de créer un design system interneDiagramme à barres présentant les raisons de créer un design system interne
1. Pour quelles raisons crée-t-on des design systems internes ?

Pourcentage de réponses indiquant les raisons de créer des design systems en interne, d'après l'enquête State of Design de Material Design (2020).

Il y a des raisons de croire que cet avenir tant espéré est plus proche que jamais. Davantage d'entreprises investissent dans des design systems internes : la demande était en hausse de 22 % en 20201, selon l'enquête State of Design de Material Design, et est probablement encore plus élevée trois ans plus tard. L'une des principales raisons de cette hausse est la capacité de ces systèmes à déployer des efforts d'accessibilité à grande échelle. Dans cette même enquête, 47 % des personnes interrogées2 déclarent que leur design system comporte des fonctions d'accessibilité, ce qui représente à nouveau une augmentation considérable par rapport à l'année précédente où l'accessibilité était classée dans la catégorie « Autres » (8,4 %). Maintenant qu'il y a plus d'outils, des normes bien établies telles que les directives pour l'accessibilité des contenus Web (Web Content Accessibility Guidelines - WCAG) et des ramifications juridiques de plus en plus contraignantes, nous allons enfin être en mesure de faire bouger les choses en profondeur.

Diagramme à barres montrant les artefacts du design system : bibliothèque d'icônes (84 %), kit UI (83 %), guide de style (75 %). La plupart des personnes interrogées (74 %) ont également indiqué que leur design system disposait d'une bibliothèque de codes de composants.Diagramme à barres montrant les artefacts du design system : bibliothèque d'icônes (84 %), kit UI (83 %), guide de style (75 %). La plupart des personnes interrogées (74 %) ont également indiqué que leur design system disposait d'une bibliothèque de codes de composants.
2. Que contient un design system ?

Pourcentage de réponses pour un artefact spécifique inclus dans le design system de leur entreprise, également tiré de l'enquête State of Design de Material Design (2020).

Design systems et accessibilité : un duo de rêve

Avec un milliard de personnes vivant avec un handicap dans le monde et un revenu annuel disponible de 1,2 billion de dollars, la problématique de l'accessibilité devient de plus en plus difficile à ignorer pour les entreprises. Nombre d'entre elles commencent à comprendre l'importance de rendre leurs produits accessibles à tous, ce que Forrester appelle « l'opportunité que représente l'accessibilité numérique ». La création de produits accessibles est plus qu'une simple case à cocher : c'est l'occasion d'ouvrir la voie à la croissance, d'asseoir sa crédibilité et d'instaurer une relation de confiance avec les consommateurs.

« Les design systems sont parfaitement compatibles avec les impératifs d'accessibilité », déclare Anna Zaremba, responsable design senior chez eBay. « L'accessibilité peut être intégrée dans chaque partie d'un design system, depuis les couleurs d'avant-plan et d'arrière-plan soigneusement testées jusqu'aux composants individuels. » Via la documentation complète mise à disposition et un feedback continu, les design systems assurent une grande cohérence des workflows et constituent le tremplin idéal pour mettre en œuvre les meilleures pratiques en matière d'accessibilité dans l'ensemble de l'écosystème d'un produit. Ils facilitent également le déploiement des changements à grande échelle en appliquant les ajustements effectués au niveau du système à toutes les instances.

example of outlined ui with accessibility annotationsexample of outlined ui with accessibility annotations

Un recours responsable à l'IA pour l'accessibilité

Étant donné l'omniprésence croissante de l'intelligence artificielle (IA), de nombreuses équipes chargées des design systems utilisent cette technologie pour améliorer l'accessibilité de l'outil pour les utilisateurs. Il en résulte une nouvelle génération d'outils pilotés par l'IA qui prétendent détecter et résoudre les problèmes d'accessibilité du Web avec une seule ligne de code : description automatique des images, attribution automatique d'un nom aux boutons non marqués et introduction d'une structure sémantique avec des en-têtes.

Surcouche d'accessibilité

Une surcouche d'accessibilité est un code JavaScript écrit dans le but d'aider à résoudre les problèmes d'accessibilité d'un site Web ou d'une application Web. Le code de surcouche est appliqué après le traitement du site ou de l'application Web par le navigateur afin de le modifier.

L'IA peut être un outil utile pour automatiser certaines fonctions mais, comme nous l'avons vu dans d'autres cas d'utilisation, elle est souvent insuffisante lorsqu'il s'agit de tâches nécessitant une compréhension et un jugement humains. De nombreux widgets et surcouches d'accessibilité « prêts à l'emploi » ont un impact négatif sur l'accessibilité, ce qui a conduit à des poursuites judiciaires pour plus de 400 entreprises qui les utilisaient. Dans beaucoup de ces cas, la simple mise en œuvre d'une structure de navigation claire et d'un code sémantique aurait permis de créer un produit plus inclusif que le résultat chaotique engendré par ces solutions.

VoiceOver

VoiceOver est un lecteur d'écran intégré aux systèmes d'exploitation macOS, iOS, tvOS, watchOS et iPod d'Apple Inc. Avec VoiceOver, l'utilisateur peut accéder à son Macintosh ou à son appareil iOS via des descriptions vocales et, dans le cas du Mac, au clavier.

Chancey Fleet, enseignante en informatique non-voyante travaillant dans une bibliothèque de New York, affirme qu'il existe des outils informatiques qui font avancer l'accessibilité. Elle cite la reconnaissance d'écran d'Apple, qui fonctionne en tandem avec VoiceOver pour détecter la disposition des éléments dans l'interface utilisateur, y compris les applications qui n'ont pas été optimisées pour l'outil. « Apple souhaite vraiment que les développeurs adoptent des pratiques de design et de développement plus accessibles. La reconnaissance d'écran est quelque chose qui est laissé à la discrétion de l'utilisateur. Il peut l'activer et voir si elle résout un problème », explique Chancey. « Il ne s'agit pas d'une tentative de détourner l'argent du marché des véritables efforts d'accessibilité. C'est un moyen de fournir aux utilisateurs un outil supplémentaire. »

Les outils d'accessibilité facilitent la vie et réduisent les frictions, mais ils peuvent aussi créer de nouvelles dépendances et de nouvelles barrières.
Chancey Fleet

La reconnaissance d'images étant un domaine en progrès continu, Chancey est optimiste quant au potentiel de l'IA pour traiter les images non étiquetées et générer des descriptions pour les personnes aveugles ou malvoyantes. « Je ne pense pas que l'IA sera capable de gérer les contenus subjectifs ou à forte charge émotionnelle de sitôt, mais je pense qu'elle pourra aider à interpréter des éléments avec un vocabulaire visuel relativement contrôlé, comme les infographies et les diagrammes à barres », précise-t-elle. « Les outils d'accessibilité facilitent la vie et réduisent les frictions, mais ils peuvent aussi créer de nouvelles dépendances et de nouvelles barrières. J'ai bon espoir que, dans un avenir proche, l'IA et le machine learning continueront à gérer davantage de choses qui, à l'heure actuelle, nécessitent une intervention humaine pour garantir que le produit est inclusif. »

abstract illustration showing checkerboard, a hazard sign, gear, switches, and other ui elementsabstract illustration showing checkerboard, a hazard sign, gear, switches, and other ui elements

Les meilleurs produits ont vocation à être accessibles

Intégrer l'accessibilité dès le premier jour signifie démarrer avec un design system accessible par défaut. En s'assurant que chaque composant de design et chaque élément de code est aligné sur les normes d'accessibilité dès le départ, les entreprises peuvent prévenir les problèmes d'accès plus tard. Lucy Greco, spécialiste des technologies accessibles à l'université de Berkeley et responsable de l'initiative de l'université de Californie en matière d'accessibilité, explique que les équipes doivent prendre en compte tous les aspects de l'accessibilité lorsqu'elles font de l'inclusivité le fondement d'un design system. « Une personne handicapée peut-elle utiliser votre design system sans souris ? Les composants sont-ils de type "glisser-déposer" ? Si c'est le cas, peut-elle utiliser une émulation clavier et souris pour réaliser cette action ? »

C'est ce concept qui a conduit Anna Zaremba d'eBay et plusieurs de ses coéquipiers à créer Include, un plugin qui facilite l'intégration des normes d'accessibilité dès le départ. L'outil se concentre sur l'annotation des contenus accessibles, permettant aux designers de les spécifier plus facilement et aux développeurs de comprendre les exigences. « Nous voulions savoir comment faire en sorte que le design inclusif fasse partie de notre processus de design », explique Anna. « Nous avons constaté que l'accessibilité peut être une tâche ardue, en particulier pour les nouveaux designers qui viennent de rejoindre eBay et qui ne connaissent pas forcément les meilleures pratiques du secteur. »

Include est un outil conçu pour faciliter l'annotation des contenus accessibles (a11y), plus facile à spécifier pour les designers et plus facile à comprendre pour les développeurs. L'objectif est d'inclure les considérations d'accessibilité dans la phase de design de tout projet et de faciliter la collaboration entre designers et développeurs. En fin de compte, il s'agit de créer des expériences numériques que tout le monde peut utiliser !

L'équipe a donné la priorité à l'efficacité en choisissant de construire un plugin qui pourrait s'intégrer dans les workflows existants des designers et des développeurs. L'outil permet de sélectionner un cadre de premier niveau dans Figma et de lancer le vérificateur. Une liste d'actions à entreprendre apparaît alors, avec leur justification (par exemple, une recommandation d'ajout de texte alt à une image marquée comme informative). Ces recommandations s'appuient sur les problèmes et les bugs les plus courants ainsi que sur les priorités en matière d'accessibilité définies par les différentes disciplines d'eBay. « Tout le monde doit commencer quelque part et j'espère que le plugin contribuera à faciliter les choses », déclare Anna.

Anna et son équipe ont décidé d'ouvrir le plugin, de le rendre gratuit pour tous via la communauté Figma et de publier le code sur GitHub. « eBay a une forte culture de partage de ses outils comme moyen de rendre à la communauté ce qu'elle lui a donné », explique Anna. « Nous savions que le fait de rendre cet outil open source pourrait avoir un impact plus large en aidant les autres à améliorer leurs produits et à créer de meilleures expériences numériques. » L'open source présente également d'autres avantages : non seulement l'équipe reçoit des feedbacks utiles, mais elle ouvre également la voie à de futures contributions. N'importe qui peut s'approprier le code, le développer et le remettre à disposition de la communauté. « Je suis très reconnaissante à tous ceux qui ont passé du temps dessus, l'ont essayé et ont pris le temps de nous écrire », déclare Anna. « Plus il y aura de gens qui s'engageront, plus il s'améliorera. »

L'accessibilité est une priorité absolue

Comment les entreprises peuvent-elles donner la priorité à l'accessibilité ? Tout comme le plugin d'eBay permet de sensibiliser les collègues, il est important de créer une culture dans laquelle tout le monde a une bonne compréhension de l'accessibilité. Pour ce faire, les personnes handicapées doivent faire partie du pipeline de développement et de design, à la fois en tant que collaborateurs et testeurs. « Lorsque vous avez une personne handicapée dans votre équipe, vous avez plus de chances d'avoir un produit inaccessible », affirme Lucy. Elle ajoute que ces coéquipiers devraient être impliqués dans tous les aspects du processus de création, au-delà des tests finaux, citant un dicton bien connu de la communauté des personnes handicapées : « Rien ne se fera pour nous sans nous ». Chancey recommande qu'en plus d'un solide programme de tests rémunérés auprès des utilisateurs, les équipes internes aient le pouvoir d'imposer des pratiques accessibles et de bloquer les versions qui compromettent l'accessibilité.

four colorful puzzle pieces on top of a black backgroundfour colorful puzzle pieces on top of a black background

Bien qu'il s'agisse d'avancées dans la bonne direction, il reste encore un long chemin à parcourir pour rendre la technologie plus inclusive. Lucy confie : « Mon espoir pour l'avenir est que davantage de design systems veillent à ce que leurs bibliothèques de composants soient conçues pour être accessibles dès le premier jour et qu'elles soient testées par des personnes et pas seulement par des machines. »

Pour lire d'autres articles sur les design systems, rendez-vous sur le site DesignSystems.com.

Créez et collaborez avec Figma

Lancez-vous gratuitement