Accessibilité dans le design rose

Lors de la création de produits, l'accessibilité peut être une réflexion après coup. Naturellement, nous voulons expédier nos produits rapidement et offrir de la valeur à nos utilisateurs. Nous pourrions penser que l'accessibilité est nécessaire pour les cas extrêmes et donc ne pas la prioriser. Il est bon de se rappeler que l'Organisation mondiale de la santé (OMS) estime que 16 % de la population mondiale souffre d'une forme de handicap (décembre 2022).
Ignorer une partie aussi importante de votre base d'utilisateurs ne crée tout simplement pas une bonne expérience utilisateur.
Créer des produits accessibles est la responsabilité de chacun. Les concepteurs, les développeurs, les auteurs de contenu et toute autre personne impliquée dans la création de produits doivent faire leur part et s'efforcer d'offrir une meilleure expérience à tous.

Il n'est pas toujours facile de maintenir un haut niveau d'accessibilité, mais c'est certainement plus facile avec un système de conception. Les composants que nous avons créés dans Pink Design, la bibliothèque d'interface utilisateur entièrement open source d'Appwrite, ont un niveau d'accessibilité AA. Il s'agit du niveau d'accessibilité recommandé pour la plupart des produits.

Pour nous assurer que nos produits maintiendront un haut niveau d'accessibilité, nous avons fait ce qui suit :

Utiliser un contraste de couleurs élevé

Le contraste des couleurs est peut-être la première chose qui vient à l'esprit lorsqu'on pense à l'accessibilité. Un manque de contraste entre le texte et l'arrière-plan pourrait signifier que certaines personnes seraient incapables ou auraient des difficultés à lire le texte. De même, les couleurs vives à forte luminance ne sont pas lisibles pour les autres. Le W3C recommande un rapport de contraste entre le texte et l'arrière-plan de 4,5 pour 1 pour le niveau de conformité AA.

Ne pas compter sur la couleur

Le terme « daltonisme » est souvent utilisé pour décrire les personnes qui ont du mal à identifier et à distinguer certaines couleurs, mais le daltonisme, l'incapacité de voir n'importe quelle couleur, est extrêmement rare. Selon le National Health Service (NHS) du Royaume-Uni , le daltonisme rouge-vert touche 1 homme sur 12 et 1 femme sur 200. Les personnes atteintes de ce trouble de la vision des couleurs peuvent avoir des difficultés à différencier les rouges, les oranges, les jaunes, les bruns et les verts. Ils peuvent également avoir du mal à distinguer les nuances de violet et peuvent confondre le rouge avec le noir.
De même, les personnes ayant une déficience de la vision des couleurs "bleu-jaune" peuvent avoir des difficultés à différencier les bleus, les verts et les jaunes.

Nous utilisons quatre couleurs système dans Pink Design : rouge, orange, vert et bleu. Chacune de ces couleurs représente un état dans la console Appwrite — le rouge indique une erreur ou un danger, l'orange indique un avertissement, le vert indique le succès et le bleu indique une information. Connaissant les difficultés que nos utilisateurs peuvent rencontrer en voyant ces couleurs, nous ne comptons pas sur la couleur pour rendre les informations critiques compréhensibles.

Autoriser la navigation au clavier

Les personnes ayant des restrictions de motricité fine ou des mains ou des bras handicapés ne pourront pas utiliser une souris. Dans Pink Design, nous fournissons des états distincts pour les éléments interactifs. En concevant des états tels que focus, survol et actif, nous offrons la possibilité de naviguer dans tous les éléments interactifs avec un clavier. Ce n'est pas seulement une expérience accessible, mais aussi une meilleure expérience pour tous les utilisateurs qui préfèrent la navigation au clavier, y compris la communauté des développeurs d'Appwrite.

Il est également possible d'améliorer l'accessibilité par le développement. En collaboration avec notre équipe d'ingénieurs, nous avons décidé d'intégrer les éléments suivants dans Pink Design :

Définir la taille de la police dans REM

Les navigateurs ont une taille de police par défaut que les utilisateurs peuvent modifier via les paramètres du navigateur. Un pixel est une unité absolue pour des tailles et des espaces fixes qui ignore les paramètres du navigateur. Cela signifie que si nous utilisons des pixels et qu'un utilisateur (avec ou sans déficience visuelle) modifie la taille de la police dans les paramètres de son navigateur, ses paramètres n'affecteront pas notre produit. Cela étant dit, les pixels ne devraient pas poser de problèmes si l'utilisateur zoome, mais nous ne faisons aucune hypothèse sur les préférences des utilisateurs. C'est pourquoi nous avons décidé de définir la taille de la police en REM, qui est une unité relative.

Autoriser les utilisateurs à réduire les mouvements

Il ne fait aucun doute que les animations sont un ajout intéressant à chaque produit, mais les animations peuvent également distraire les gens. Dans certains cas, les animations peuvent provoquer des étourdissements, des vertiges ou des crises d'épilepsie. Les utilisateurs sensibles au mouvement peuvent choisir de réduire le mouvement dans les paramètres de leur système d'exploitation. Dans ce cas, nous devrions ignorer l'animation pour eux. Dans Pink Design, nous avons décidé de créer une grande animation pour montrer la fonctionnalité de la bibliothèque sur la page de destination. L'animation dure 10 secondes et est la première chose que vous voyez sur la page. Il démarre immédiatement lorsque la page est chargée, mais si "réduire le mouvement" est activé dans le système d'exploitation, l'animation saute à la fin.

Chez Appwrite, l'accessibilité est à coup sûr un travail d'équipe. Nous travaillons tous pour maintenir et améliorer l'expérience accessible dans nos produits, et c'est toujours dans nos esprits. L'utilisation de composants accessibles nous aide à améliorer notre niveau d'accessibilité, mais il est important de se rappeler qu'il existe de nombreux types de handicaps. Nous avons travaillé à l'amélioration de l'expérience des utilisateurs souffrant de troubles visuels, moteurs et cognitifs, et nous continuerons à travailler pour nous améliorer encore plus.

Si vous ne l'avez pas déjà fait, parcourez le référentiel GitHub Pink Design ou consultez notre Guide de démarrage pour utiliser Pink Design dans vos projets ou lorsque vous contribuez à Appwrite.