Interface utilisateur Kendo pour Vue DropDowns

Dans un monde là où l’accessibilité est devenue un incontournable, le rendu adaptatif est la prochaine étape vers une UX optimisée. Découvrez comment notre personnage principal fait face à ce dilemme avec Kendo UI pour les composants Vue DropDown.

Prudence: Cet article a pour objectif de vous inciter à vous poser, à vous-même, à votre collègue, à votre manager ou à votre équipe, quelques questions liées à l’accessibilité qui pourraient être cruciales pour votre projet. Cet article souhaite vous amener à regarder vos sites Web et vos applications sous un angle différent et à agir avant qu’il ne soit trop tard.

Pour le rendre plus intéressant, regardons l’article suivant comme s’il s’agissait d’un film. Ce genre particulier de films où l’on passe d’une scène à l’autre et où il n’y a pas de relation évidente entre chaque situation, mais d’une manière ou d’une autre, vous savez qu’il y en a une. Habituellement, dans ces films, nous recevons des indications sur le développement ultérieur du film sous forme de questions. Parfois, la clé se trouve dans le texte que nous voyons. Une chose est sûre ici : tout est révélé à la fin du film et nous pouvons prendre une décision véritablement éclairée qui changera notre vie.

Alors ici commence notre histoire.

Introduction

Aujourd’hui, tout le monde se concentre sur l’alignement de ses sites Web/applications avec le Article 508 et ARIA-EAU règles d’accessibilité. Les tests d’accessibilité sont déjà indispensables dans presque toutes les entreprises, qu’elles soient commerciales ou non. De nombreuses personnes testent leurs produits sur différents lecteurs d’écran. Il existe même des entreprises qui testent leurs applications sur tous les lecteurs d’écran jamais sortis sur le marché.

Le narrateur: « Rencontrez George, qui a pour mission de rendre l’application sur laquelle il travaille entièrement accessible. Il sait que tout ce qui précède est exact à 100 %, mais il y a quand même quelque chose qui le dérange.

Et c’est ici que commence « l’action montante » de notre histoire.

Première partie : « Le dilemme de l’accessibilité »

Imperceptiblement, la première question qui change la vie du film apparaît et le personnage principal se demande :

« Ma candidature est-elle accessible si je couvre les règles de l’article 508 et du WAI-ARIA ? »

La narration continue…

Pour certaines personnes, l’histoire de l’accessibilité se termine lorsque votre produit répond aux règles d’accessibilité mentionnées ci-dessus. Pour l’autre partie des entreprises ou des développeurs, pour dire qu’un projet donné est accessible, il doit également fonctionner sur différentes tailles d’écran et types d’appareils. Bien que ce ne soit pas une fonctionnalité indispensable,

« L’adaptabilité des composants est déjà en train de devenir une norme de l’industrie en matière d’accessibilité, de convivialité et d’expérience utilisateur générale sur tous les appareils. »

Pour ceux d’entre vous qui ne pensent toujours pas qu’une conception adaptative doit être implémentée dans une application, prenez votre téléphone, ouvrez un lien contenant un formulaire complexe en mode « bureau » et essayez de remplir le formulaire. Maintenant, ouvrez le même lien en mode « mobile » et répétez l’action précédente. Ne nous dites pas quelle a été votre expérience. Nous connaissons la réponse.

Deuxième partie : « Je peux tout faire moi-même »

Nous sommes déjà proches du point culminant de l’histoire et notre personnage pose la prochaine question fondamentale :

« OK, nous avons besoin d’un rendu adaptatif. Je commence la mise en œuvre !

Pour rendre la scène plus intrigante, George se retrouve soudain dans le passé, en se souvenant d’une conversation avec un ancien collègue qui partage ses idées, les étapes et les efforts qu’il a dû faire pour implémenter le rendu adaptatif dans cette application à l’époque.

Une « courte » liste de tâches préalables et de tâches de mise en œuvre apparaît à l’écran :

1. Briefez un designer et créez un design que les clients verront sur un téléphone mobile.
2. Briefez un designer et créez un design que les clients verront sur une tablette.
3. Décidez des détails sur le comportement de chacun des composants lorsqu’il est utilisé en mode adaptatif.
4. Gérez les exigences d’accessibilité WAI-ARIA/Section 508 pour chaque conception adaptative.
5. Prendre les mesures nécessaires pour mettre en œuvre.
6. Testez les fonctionnalités de rendu adaptatif et assurez-vous que tout fonctionne comme prévu.

Pour faire monter la tension, le narrateur poursuit :

« La liste ci-dessus peut sûrement être améliorée, mais pensez au temps de gestion du projet, aux heures de conception, au temps de développement et, enfin, au coût financier de l’ensemble du processus de mise en œuvre. »

Troisième partie : « La décision »

Nous sommes sur le point de vivre le tournant de notre histoire. Cette partie est très courte mais très importante. Notre personnage se sent confus. Il commence à se demander si la décision concernant le rendu adaptatif est correcte et en vaut la peine.

1. Dois-je implémenter le rendu adaptatif dans mon prochain projet ?
2. Est-ce que cela vaut la peine de mettre en œuvre le rendu adaptatif tout seul ?

La scène se termine.

Quatrième partie : « L’alternative révélée »

Nous voyons George, qui teste la convivialité d’un projet avec quelques collègues tout en discutant de la bonne décision d’utiliser Progress. Interface utilisateur Kendo pour Vue. D’après la conversation, nous comprenons qu’il n’y avait pas d’exigences très spécifiques pour leur application, et c’est ainsi qu’ils ont décidé d’utiliser l’interface utilisateur de Kendo pour Vue. Listes déroulantes pour leurs scénarios adaptatifs.

L’histoire se poursuit avec une scène où George est récompensé pour sa décision et présente les fonctionnalités de l’interface utilisateur Kendo pour les composants Vue DropDown à d’autres collègues développeurs :

«Le mode adaptatif du Boîte combo, La liste déroulante, Sélection multiple, Arbre déroulant et Arbre à sélection multiple Les composants sont faciles à configurer en utilisant le adaptatif et Titre adaptatif propriétés de chaque composant.

La présentation continue…

Le adaptatif la propriété accepte vrai ou FAUX en tant que valeurs et en fonction de cette configuration, les composants activeront ou non automatiquement leur conception adaptative sur différents écrans. Le Titre adaptatif La propriété définit le texte qui sera rendu dans l’en-tête du composant lorsqu’il fonctionne en mode adaptatif.

Lorsque le mode adaptatif est actif, chacun des composants répertoriés ci-dessus a trois états de rendu :

• Par défaut (non adaptatif) – Il s’agit du rendu par défaut des composants. Ce mode est activé lorsque la taille de l’écran sur lequel le composant est utilisé a une largeur supérieure à 768 pixels.
• Taille d’écran moyenne – Cet état de rendu des composants est activé lorsque la taille d’affichage est comprise entre 500 et 768 pixels.
• Petite taille d’écran – Ceci est activé lorsque la taille d’affichage est inférieure à 500 pixels.

«Voici une démo du rendu adaptatif de DropDownList. Nous pouvons voir chaque état de rendu du composant.

Pour plus de détails sur le rendu adaptatif de DropDownList et comment il peut être configuré pour fonctionner également avec des données groupées, consultez cet article de documentation.

Et c’est ainsi que la présentation continue…

… Entrer dans le ComboBox, voici à quoi ressemble son mode adaptatif. Le composant fonctionne à la fois avec des données régulières et groupées dans tous ses modes de rendu.

Le Documentation de rendu adaptatif de la ComboBox fournit des détails supplémentaires liés à sa configuration.

… Voici la Mode adaptatif MultiSelect. Voici à quoi ressemble son rendu en taille d’écran moyenne :

Des détails sur le rendu adaptatif du MultiSelect et sa configuration peuvent être trouvés ici.

… En parlant de composants qui gèrent une structure de données arborescente, le Arbre déroulant et MultiSelectTree a ses options de mode adaptatif. Voici à quoi ressemble le DropDownTree en mode adaptatif :

… Et voici le MultiSelectTree dans les écrans de taille moyenne :

La documentation des composants révèle plus de détails sur chacun d’eux. Vérifie ça ici pour le DropDownTree et ici pour le MultiSelectTree.

La présentation se termine par une standing ovation.

Cinquième partie : « La conclusion »

Nous entrons dans la scène finale. Tout le monde est heureux et le personnage récapitule les luttes et les douleurs qu’il a traversées. Les conclusions qu’il résume sont les suivantes :

1. Oui, nos sites Web et nos applications doivent être accessibles.
2. Ouiun site ou une application plus accessible est celui dont le rendu s’adapte à la taille de l’écran sur lequel il est rendu.
3. Ouil’expérience utilisateur et la convivialité d’un site ou d’une application seront améliorées, et le rendu adaptatif guidera les utilisateurs finaux sur la manière de réaliser les actions souhaitées en douceur.
4. Oui, nous pouvons implémenter le rendu adaptatif nous-mêmes, mais est-ce que cela en vaut la peine ?

« Non. Nous n’avons pas besoin de mettre en œuvre des solutions personnalisées.

… apparaît à l’écran et c’est ainsi que se termine notre histoire.

Quelqu’un demandera ici : « Et qu’en est-il du dilemme évoqué dans le sujet ?« Eh bien, la morale de l’histoire est que le dilemme adaptatif n’est pas un dilemme si vous utilisez l’interface utilisateur Kendo pour Vue Native DropDowns dans vos applications. Le personnage a économisé des heures de gestion de projet, de conception, de développement et de test simplement en utilisant les composants Vue DropDown.

En guise de dernière remarque, j’ajouterais ici que la prochaine fois que vous démarrez un projet, mettez-vous à la place de notre personnage. Si vous souhaitez que votre projet soit entièrement accessible et prenne en charge plusieurs appareils, posez-vous les questions qu’il a posées. Si vous êtes honnête avec vous-même et n’avez pas d’exigences particulières en matière de projet, utilisez l’interface utilisateur Kendo pour Vue DropDowns et économisez du temps, des efforts et de l’argent, à la fois pour vous et votre entreprise.

L’article ci-dessus est le résultat de nos efforts continus pour maintenir le haut niveau d’accessibilité et de convivialité dans les différents composants de Kendo UI pour Vue. D’autres améliorations d’accessibilité et fonctionnalités de convivialité sont à venir. Restez à l’écoute!

Essayez-le par vous-même

Soyez le héros de votre propre histoire : Essayez Kendo UI pour Vue gratuit pendant 30 jours !