L'influence de Microsoft Inclusive Design dans Visual Studio Code

Universel, ou conception inclusive est une nouvelle philosophie de conception que Microsoft semble prendre assez au sérieux dans le développement logiciel récemment. Conception inclusive amène la conception accessible au niveau supérieur, car elle envisage l’accessibilité dans une perspective beaucoup plus large. Lorsque je testais le nouvel éditeur de code source de Microsoft, Visual Studio Code, la question de comment ils ont mis en pratique la théorie est apparu naturellement dans mon esprit.

Ce billet ne prétend pas être uniquement une description des fonctionnalités d’accessibilité de Visual Studio Code, car dans la documentation officielle, vous pouvez en faire un récapitulatif intéressant, mais vise plutôt à être une étude de cas sur ce à quoi faire attention lorsque vous le souhaitez. concevoir une application inclusive A l'avenir.

Parce que nous pouvons être sûrs que l'inclusivité sera bientôt une exigence à la fois dans les logiciels et dans la conception Web, non seulement pour des raisons altruistes, mais aussi parce qu'elle attirera de nombreux nouveaux utilisateurs à la table..

Les 4 principes de la conception inclusive de Microsoft

Windows Dev Center met la conception de logiciels accessibles dans la catégorie convivialité, et ils ont également publié de nombreux excellents articles sur le sujet. De Microsoft quatre principes de design inclusif (énumérés brièvement ci-dessous) sont discutés dans cet article.

1. Pense universel.
2. Fais-le personnel.
3. Garde le simple.
4. Créer délice.

Si vous avez lu l'article original, vous verrez que les principes sont expliqués d'une manière pas toujours facile à tester, en utilisant des expressions telles que "lien émotionnel", "évoquer merveille", et "magique". Donc, je préfère rester terre-à-terre, supprimer ces connotations subjectives et transformer les principes en critères objectifs.

Lorsque j'analyse leur implémentation dans Visual Studio Code, je les utilise dans le sens suivant:

1. Pense universel: Accessibilité
2. Fais-le personnel: Personnalisabilité, extensibilité
3. Garde le simple: Interface utilisateur logique sans distraction
4. Créer délice: Découvrabilité des fonctionnalités

Bien entendu, il ne s’agit que d’une catégorisation possible, et il existe beaucoup de chevauchements, par exemple, la personnalisation peut également faire partie de la “Créer du plaisir” principe, mais comme nous avons besoin de quelque chose de tangible, restons-en à cette interprétation pour le moment.

Bien que le Centre de développement Windows recommande d'appliquer ces principes de conception inclusifs aux applications Windows 10, Microsoft a également dédié son site Microsoft Design à la conception inclusive..

Bien que Visual Studio Code ne s’applique pas uniquement à Windows 10, il est destiné à logiciel multiplateforme, nous pouvons toujours tester ses fonctionnalités en toute sécurité par rapport aux principes susmentionnés, car Microsoft considère clairement la conception inclusive comme le chemin de conception du logiciel qu'elle souhaite suivre à l'avenir.

Pensez universel

Sous le “Pensez universel” principe, nous allons examiner comment le code Visual Studio est accessible pour divers groupes d'utilisateurs, tels que les utilisateurs de technologies d'assistance (qu'ils l'utilisent pour un handicap ou de préférence), les personnes disposant de technologies limitées, les locuteurs non anglophones, etc..

1. Zoom

Le zoom peut être facilement réalisé en appuyant sur les touches Ctrl + = / Cmd + = (Mac) raccourci clavier pour Agrandir, et le Ctrl + - / Cmd + - (Mac) raccourci pour Dézoomer, et nous pouvons également accéder à la fonctionnalité de zoom via la barre de menus supérieure.

Notez qu'à partir de la version 1.1.1, sur les claviers Windows, les signes + et - ne fonctionnent pas sur le clavier numérique de droite, mais uniquement sur le clavier de saisie (alphanumérique) - ce qui n'est probablement pas le meilleur choix pour l'inclusivité..

La fonction Niveau de zoom persistant compense quelque peu cela, car elle nous permet de configurer facilement une Niveau de zoom persistant dans les paramètres de l'utilisateur (lisez mon post précédent sur la façon de le faire).

2. Thème de contraste élevé

Les thèmes à contraste élevé facilitent traitement de l'information visuelle pour les utilisateurs malvoyants, et par conséquent, ils constituent un élément important de l'accessibilité.

Il y a un thème de contraste élevé par défaut dans Visual Studio Code, que vous pouvez définir en cliquant sur le bouton Fichier> Préférences> Thème de couleur menu, mais vous pouvez également télécharger d’autres utilisateurs à partir de Visual Studio Code Marketplace..

Microsoft a introduit les thèmes Contraste élevé dans Windows 7, il est agréable de voir qu'ils suivent cette fonctionnalité..

3. Navigation au clavier

La navigation au clavier est essentielle pour les personnes qui ne peuvent pas utiliser la souris en raison de handicaps visuels ou de mobilité. Une navigation au clavier efficace implique que les utilisateurs peut contrôler toutes les fonctionnalités d'un logiciel en n'utilisant que le clavier.

Le code de Visual Studio implémente bien cette fonctionnalité, et bien qu’il ait beaucoup raccourcis clavier (voir la liste complète), les utilisateurs peuvent également personnaliser les raccourcis clavier à l’aide d’un fichier de configuration au format JSON..

4. Navigation par tabulation

La navigation par onglet permet de sauter partout dans les différents domaines de code Visual Studio.

Actuellement, à compter de la version 1.1.1, VS Code ne prend pas en charge la navigation par onglets pour toutes les zones. Par exemple, la barre de menus supérieure n'est pas disponible de cette manière. La bonne nouvelle est que Microsoft reconnaît l’absence de cette fonctionnalité dans les problèmes connus de la documentation..

Au cours des tests, j’ai constaté que le Éditeur, la Barre latérale, la Voir la barre (voir la dénomination des zones de VS Code), et toutes leurs actions et tous leurs éléments sont accessibles avec la touche Tab. Bien que les utilisateurs de Tab ne puissent pas accéder aux fonctionnalités de la barre de menus supérieure avec leur clavier. La palette de commandes F1 peut quelque peu remplacer cela, car toutes les commandes qui se trouvent dans le menu du haut sont également accessibles à partir de là..

La fonctionnalité de navigation par tabulation est un élément important de la navigation par tabulation, qui permet aux utilisateurs de basculer entre les deux fonctionnalités de la touche Tab. La touche de tabulation piégée permet de déplacer à travers les différentes parties de VS Code, tandis que normalement la touche Tab ajoute un caractère de tabulation au fichier texte ouvrir dans la zone de l'éditeur. Les utilisateurs peuvent basculer entre les deux capacités en appuyant sur la touche de raccourci Ctrl + M.

5. Lecteurs d'écran

Bien entendu, un logiciel accessible doit également être entièrement disponible pour les utilisateurs de lecteurs d'écran. La documentation mentionne que l'équipe de développement de VS Code a testé la disponibilité des lecteurs d'écran avec le lecteur d'écran NVDA.

Pour tester, j'ai utilisé deux autres lecteurs d'écran, JAWS, l'une des applications de lecture d'écran les plus utilisées, et Microsoft Narrator, lecteur d'écran intégré à Windows 10..

MÂCHOIRES lire à haute voix toutes les zones, commandes et menus avec diligence, cependant, Narrator avait quelques problèmes mineurs avec la tâche. Par exemple, il ne lit correctement les éléments du menu supérieur que lorsque je les ai déplacés avec la souris, mais pas lorsque j'ai utilisé la flèche vers le bas de mon clavier. Cependant, il s’agit plutôt d’un défaut de Narrator, et non de Visual Studio Code. Nous pouvons donc supposer en toute sécurité que les utilisateurs malvoyants peuvent accéder à toutes les fonctionnalités de VS Code en utilisant une application de lecteur d’écran plus avancée..

6. Accessibilité du débogueur

Pour rendre une application entièrement accessible et inclusive, nous devons également prendre soin des éléments qui ne nous viennent probablement pas à l'esprit. Dans le cas du code Visual Studio, le débogueur en est un bon exemple. L’équipe de développement a également veillé à ce qu’elle soit inclusive, par conséquent, elle prend également en charge la navigation par clavier et onglet, et son lecteur d’écran est accessible..

7. Localisation

Nous sommes maintenant prêts à discuter des fonctionnalités d’accessibilité avec les listes de codes VS dans la documentation, mais nous devons également mentionner d’autres éléments importants. “Pensez universel” principe de conception inclusif. Un de ceux-ci est la localisation, ou avec d'autres mots support pour les langues étrangères comme langue d'affichage, beaucoup de personnes dans le monde ne parlent pas anglais.

Le code Visual Studio est actuellement localisé pour 10 langues d'affichage différentes (Anglais, chinois simplifié, chinois traditionnel, français, allemand, italien, japonais, coréen, russe, espagnol).

Les utilisateurs provenant de ces langues n'ont même pas à configurer leur langue d'affichage, car VS Code sélectionne la langue d'affichage du système d'exploitation par défaut. S'ils veulent définir une autre langue comme langue d'affichage, ils peuvent facilement configurer leur locale.json fichier.

Probablement 10 langues d'affichage ne sont pas si nombreuses, mais ce n'est pas mal non plus si nous prenons en compte le fait que VS Code est un nouveau logiciel, et que Microsoft en prendra probablement en charge davantage à l'avenir. Pour l'instant, les utilisateurs dont la langue ne fait pas partie des langues prises en charge obtiennent leur code VS installé en anglais..

8. Taille accessible

Les éditeurs de code source modernes ne sont pas très volumineux et Microsoft a également rejoint cette tendance, car Visual Studio Code est un moins de 100 MB téléchargement et son encombrement sur le disque dur est inférieur à 200 Mo.

9. Développement multiplateforme

Si nous voulons un logiciel inclusif, il doit bien sûr également être multi-plateforme, ce qui signifie qu'il doit fonctionner sur différents systèmes d'exploitation. VS Code répond à cette exigence, car il prend en charge Windows, OS X et Linux ainsi que.

Le rendre personnel

“Le rendre personnel” est le deuxième principe de Microsoft de conception inclusive, et nous allons jeter un oeil à personnalisabilité et extensibilité sous ce critère, comme je l'avais promis auparavant. Visual Studio Code répond si bien aux deux exigences que j'ai même écrit des articles séparés sur les deux, ici sur la personnalisation et ici sur l'extensibilité..

En bref, la personnalisation est implémentée avec thèmes personnalisés et Paramètres de configuration au format JSON modularisés, tandis que l'extensibilité est réalisée par extensions personnalisées que les utilisateurs peuvent télécharger à partir de Visual Studio Code Marketplace ou créer leur propre contenu en TypeScript ou JavaScript.

Pour en savoir plus sur le contexte technique de l'approche d'extensibilité de Visual Studio Code, cliquez ici..

La personnalisation est résolue de manière idéale pour les personnes férues de technologie qui sont les utilisateurs typiques des éditeurs de code source, car une partie importante de celle-ci est implémentée via fichiers de configuration au format JSON modularisés.

C'est une excellente solution, car les options de configuration ne sont pas cachées derrière une énorme hiérarchie de menus difficile à voir. Les utilisateurs, même s’ils ne sont pas des experts en codage, peuvent éditez facilement leur coutume .JSON des dossiers, en tant que Visual Studio Code ouvre les paramètres par défaut et personnalisés dans deux volets d’éditeur adjacents, ce qui permet aux utilisateurs de les expérimenter facilement..

Les fichiers de configuration sont modularisés, ils se présentent comme une hiérarchie logiquement structurée .JSON fichiers, voici une liste des plus importants:

1. settings.json pour paramètres utilisateur personnalisés, accessible via le Fichier> Préférences> Paramètres utilisateur menu
2. .vscode / settings.json pour Paramètres personnalisés de l'espace de travail, accessible via le Fichier> Préférences> Paramètres des espaces de travail menu
3. keybindings.json pour Attaches personnalisées, accessible via le Fichier> Préférences> Raccourcis clavier menu
4. javascript.json, php.json, css.json, c.json, et un tas d'autres .JSON fichiers pour différents langages de programmation pour la mise en place Extraits utilisateur personnalisés, accessible via le Fichier> Préférences> Extraits utilisateur menu
5. launch.json pour Paramètres de débogueur personnalisés, accessible en cliquant sur l'icône en forme d'engrenage dans la barre supérieure de la vue Debug (à gauche de l'éditeur)
6. .vscode / locale.json pour paramètres d'affichage personnalisés, accessible en tapant le Configurer la langue commande dans la palette de commandes (F1)
7. .vscode / tasks.json pour Paramètres personnalisés du gestionnaire de tâches, accessible en tapant le Configurer le coureur de tâches commande dans la palette de commandes (F1)

Je pense que les utilisateurs de VS Code peuvent difficilement se plaindre de la personnalisation, car même énumérer les options était une tâche exhaustive..

Les options de configuration étant modulaires, les utilisateurs ne doivent s’occuper que de celles-ci. ils ont vraiment besoin, ce qui les aide à rester concentrés sur les tâches qu'ils souhaitent effectuer. Ainsi, ils se retrouveront avec un flux de travail plus intuitif.

Rester simple

Nous pouvons rencontrer Microsoft Rester simple principe de conception inclusif dans de nombreux autres lieux de programmation et de conception, il suffit de penser au principe de conception KISS (Keep It Simple, Stupid) et au principe de développement logiciel DRY (Don't Repeat Yourself). Pour ce contexte de fonctionnement, nous allons rester concentrés sur la simplicité de l'interface utilisateur.

En termes d'accessibilité, une interface utilisateur simple à utiliser est généralement recommandée en raison de la déficience cognitive et intellectuelle de l'utilisateur. Etant donné que Visual Studio Code est un éditeur de code source, ce n'est probablement pas un logiciel fréquemment utilisé par les personnes présentant ce type de déficience, bien qu'il puisse également y avoir des zones d'ombre..

La simplicité est non seulement importante à cause d’eux mais, en tant qu’interface logique bien conçue, elle peut abaisser la courbe d'apprentissage, et augmenter la vitesse de travail, rendre un logiciel plus attrayant pour la population en général ainsi.

Code Visual Studio également exploite le phénomène psychologique bien connu, l'effet de simple exposition (ou phénomène de familiarité), car il adopte une présentation de base similaire à celle d’autres éditeurs de code source bien connus, tels que Atom, utilise.

Docs de la documentation nous permet de savoir que c’est un effort que Microsoft a mis un énorme impact sur:

VS Code fournit également aux utilisateurs la fonctionnalité d'édition côte à côte que l'on trouve également dans d'autres éditeurs de code source. Ce n'est pas une coïncidence, car cela simplifie beaucoup le processus de codage, et bien sûr contribue à la “Rester simple” principe de conception inclusif.

En plus de l'interface utilisateur de base, Visual Studio Code possède des fonctionnalités intéressantes qu'il convient de mentionner dans un article sur la conception inclusive, telles que:

• Intellisense qui fournit aux utilisateurs des suggestions basées sur le contexte (la partie principale utilisant l'intelligence artificielle est également une solution intéressante)
• Peek (Maj + F12) qui affiche les définitions complètes des fonctions dans une fenêtre en ligne
• Palette de commande (F1) qui rend toutes les commandes accessibles au même endroit.

Créer du plaisir

Il n’est pas particulièrement facile de trouver des critères concrets permettant d’examiner les “Créer du plaisir” principe de conception inclusif, j’ai donc finalement retenu le critère de découverte de fonctionnalité, Microsoft a défini ce principe de la manière suivante:

Ce phrasé peut vous rappeler de nombreux micro-moments, l'un des derniers grands projets de Google, et montre donc comment les grandes entreprises de technologie peuvent aboutir à des conclusions similaires lorsqu'elles réfléchissent à la manière de faire progresser l'industrie..

Dans la conception inclusive, il est très important de engager les utilisateurs, et éveiller leur curiosité, que nous pouvons réaliser probablement le meilleur si nous les aider à avancer quand ils ont atteint un certain point dans leur parcours utilisateur. Juste au bon moment, pas avant, pas après.

Quand on parle de découverte de fonctionnalité, La manifestation la plus mondaine de la création de délices peut être renforcée par des éléments tels qu'une navigation utilitaire bien conçue, une documentation intelligente et des informations de support qui apparaissent uniquement au bon moment..

Nous pouvons trouver des exemples de toutes ces fonctionnalités dans Visual Studio Code, il suffit de penser à ce qui précède. IntelliSense et Palette de commande, mais mise en évidence de la syntaxe et extraits de code personnalisé peut également aider les utilisateurs à tirer le meilleur parti du logiciel. Vous devez juger par vous-même si l'utilisation de Visual Studio Code vous procure un sentiment de joie.

Pour ma part, j'ai plus ou moins aimé l'expérience: le documentation en ligne bien structurée, la marché de code Visual Studio facile à naviguer, et le thèmes de couleur personnalisés qui peut être prévisualisé en temps réel tout en faisant défiler une liste déroulante (y accéder via le Fichier> Préférences> Thème de couleur menu).

Mots finaux

La conception inclusive étant un nouveau domaine, l'industrie des technologies en est encore à la phase d'expérimentation. Je pense que Microsoft a franchi une étape importante en définir les quatre principes du design inclusif.

Comme on aurait pu le voir, ils ont réussi à mettre en pratique la théorie dans leur nouvel éditeur de code source, Visual Studio Code, bien qu'il reste encore quelques champs à améliorer, tels que la prise en charge complète des onglets et une fonctionnalité globale de recherche et remplacement..

Comme l’accessibilité et l’inclusivité sont essentielles parties de l'expérience utilisateur, il peut être judicieux d'en apprendre plus à leur sujet si vous souhaitez suivre les dernières tendances du secteur. Voici des ressources qui peuvent aider:

• Articles sur l'accessibilité du Centre de développement Windows
• Manuel de la trousse à outils de conception inclusive de Microsoft Design (PDF) (téléchargeable)
• Balise d'accessibilité Hongkiat.com