7 façons de rendre votre application angulaire plus accessible

Angular est un framework populaire permettant de créer rapidement de puissantes applications JavaScript. Cependant, il ne crée pas toujours les applications les plus accessibles. Dans cet article, nous examinons des moyens que tout le monde peut mettre en œuvre pour rendre les applications basées sur Angular utilisables par tous.

Le développeur et le reste de leur équipe ont la responsabilité commune de veiller à ce que tout le monde puisse accéder à une page Web sur un pied d'égalité. Tim Berners-Lee créateur du World Wide Web et directeur du World Wide Web Consortium (W3C), a déclaré: “Le pouvoir du Web réside dans son universalité.” Les applications construites sans accessibilité dans mind aliéner jusqu'à 20% de la totalité des internautes

Les progrès ont pris au sérieux l'accessibilité lors de la création du Kendo UI ce qui facilite la création de composants. fournir une expérience accessible dans vos applications angulaires. Fournissant des widgets adaptés aux sites Web professionnels et aux applications d’entreprise, le Kendo UI de Progress est un robuste framework HTML5 permettant de créer des sites Web et des applications interactifs à hautes performances. Il est facile de créer des applications accessibles, car il contient une bibliothèque de plus de 70 widgets d’interface utilisateur et gadgets de visualisation de données accessibles. Il est facile de commencer avec Kendo UI et Angular ainsi que d’intégrer Bootstrap. Il existe différentes unités de produits parmi lesquelles choisir, en fonction des exigences de votre projet.

A propos de l'accessibilité

Que signifie accessibilité? Le W3C indique que lorsqu'une application est correctement conçue, tout utilisateur peut la comprendre, la percevoir, la naviguer et interagir avec elle. L'accessibilité devrait couvrir tout handicap qui affecte l'accès de l'utilisateur au Web, y compris:

• Physique – par exemple, l'impossibilité d'utiliser une souris ou un clavier
• Cognitive, d'apprentissage et neurologique – comme problèmes de mémoire ou problèmes de concentration ( l gagnent davantage sur les types de déficiences cognitives)
• Auditifs – malentendants et sourds
• Visuels – par exemple, la couleur cécité ou basse vision
• Discours – mutisme ou bégaiement

Lisez ce guide pour en savoir plus sur les types de handicap pouvant affecter l'expérience des utilisateurs du Web.

WAI-ARIA

La principale initiative du W3C en matière d'accessibilité est la WAI-ARIA ou la Web Accessibility Initiative – Suite d'applications pour Internet riche et accessible. En bref, il décrit les moyens de rendre le contenu et les applications plus accessibles aux personnes handicapées. Il assiste également le contenu dynamique et les contrôles d'interface utilisateur avancés, tels que ceux fournis par Kendo UI.

Les sept éléments

Il existe de nombreuses façons d'améliorer l'accessibilité de vos applications. Dans cet article, nous nous concentrons sur sept d'entre eux. Tous les principes que nous traitons ici s'appliquent aussi bien lors de l'utilisation que lors de l'utilisation de Kendo UI.

Prise en charge de WAI-ARIA dans vos éléments frontaux

Les personnes ayant une déficience visuelle utilisent les lecteurs d'écran pour comprendre les applications et les sites Web. Lorsque vous implémentez des éléments sans prendre en compte l’accessibilité, il peut arriver que le lecteur ne comprenne pas ce qu’il contient et que l’application soit mal perçue.

WAI-ARIA jette un pont entre les applications riches et les utilisateurs handicapés. Ceci est accompli en utilisant des métadonnées supplémentaires, que vous introduisez par le biais d'attributs d'élément HTML. Le lecteur d'écran utilise ensuite ces métadonnées pour raisonner sur un contrôle ou un élément DOM. Ces attributs, tels que role, aria-haspopup, aria-selected et autres, fournissent tous des informations vitales aux lecteurs de l'écran. Ces métadonnées sont ensuite utilisées pour offrir une interaction plus riche avec les utilisateurs handicapés.

Ces attributs sont automatiquement ajoutés lors de l’utilisation de Angular à partir des versions 2.x et supérieures. Il est toujours nécessaire de faire le travail pour fournir le texte de remplacement pour vos images, pour vous assurer que vous n'utilisez pas d'éléments non sémantiques comme boutons, etc. Si vous utilisez AngularJS version 1.x, vous devez installer ngAria .

Kendo UI est le premier framework HTML5 à fournir un support complet pour ARIA pour ses widgets.

Voici une démonstration du fonctionnement de WAI-ARIA boutons. Si vous examinez le code avec votre navigateur, vous pouvez voir quels attributs le navigateur ajoute automatiquement.

Contraste des couleurs

Nous savons tous que le vert a la connotation de "être juste" et le rouge au contraire. Cependant, les deux semblent bruns à une personne atteinte de daltonisme rouge-vert, qui est le type le plus courant . Il concerne plus de 8% des personnes d'ascendance européenne. D'autres problèmes surviennent lorsque vous utilisez uniquement la couleur pour indiquer les prix de vente et les champs obligatoires.

Les couleurs doivent être spécifiquement étiquetées, notamment lors du développement de sites de vente en ligne. Vous devez étiqueter les échantillons de couleur avec le nom de la couleur, afin de faciliter le choix des produits par tout le monde.

Le contraste entre la couleur du texte et son arrière-plan doit être suffisant. Ce concept est connu sous le nom de rapport de contraste de luminosité et s'applique également au texte contenu sur des boutons, des icônes et des images.

La couleur est également utilisée pour véhiculer des informations sur des cartes et des diagrammes. Vous devez également vérifier ces contrastes avec le plus facilement possible.

Vous pouvez vérifier le contraste avec le vérificateur de contraste de WebAIM .

Lorsque vous utilisez Kendo UI, vous pouvez facilement ajouter des couleurs par défaut à l'aide de Kendo UI . Générateur de thèmes.

Raccourcis clavier et navigation

Parfois, les utilisateurs ne peuvent pas utiliser la souris ou ne savent parfois pas où cliquer. Il est donc important de fournir des raccourcis clavier et des capacités de navigation.

Pour une vue d'ensemble de haut niveau de l'accessibilité au clavier, lisez le présent document fourni par le Bureau of Internet Accessibility.

Si vous décidez de le mettre en œuvre raccourcis clavier pour votre application Angular, des bibliothèques telles que angular2-hotkeys et ng-keyboard-raccourcuts vous permettent de spécifier un grand nombre de raccourcis et de les gérer efficacement.

Kendo UI prend en charge le clavier. raccourcis pour presque tous ses composants. Apprenez-en plus sur la façon dont Kendo UI le fait ici:

Sous-titres sur vidéos

Les sous-titres sur vidéos (également appelés légendes) sont d'une valeur inestimable pour les personnes souffrant de troubles auditifs ou cognitifs.

Fournir des sous-titres aux vidéos est une tâche difficile. un développeur de logiciel car il nécessite plus que de l'ingénierie. Il faut beaucoup de travail pour créer des sous-titres pour chaque vidéo que vous produisez.

Si vous utilisez des vidéos dans votre documentation ou si vous intégrez des vidéos dans votre application Angular (peut-être à des fins d'intégration), faites de votre mieux pour choisir. vidéos déjà sous-titrées. Si vous produisez ces vidéos en interne, préconisez les sous-titres dès le début du projet.

Si vous avez déjà les sous-titres mais vous ne savez pas comment les ajouter à votre vidéo, le fichier hls.js La ​​bibliothèque de lecteurs prend en charge l’intégration des sous-titres WebVTT . Son utilisation avec Angular est facile.

Sémantique en HTML

Écrire des applications angulaires signifie créer un balisage HTML. Lorsque vous codez le code HTML lu par un lecteur d'écran, utilisez vos éléments HTML pour exécuter le rôle pour lequel ils ont été créés, tels que les en-têtes des en-têtes, etc.

Si vous recherchez davantage de ressources sur ce sujet créé par Mozilla. un guide détaillé sur la rédaction de HTML accessible, comprenant une section sur la bonne sémantique .

Services externes

Si vous utilisez Stripe.js pour accepter les paiements par carte de crédit, Auth0 pour authentifier les utilisateurs ou un autre service externe, assurez-vous que les boîtes de dialogue ou autres fenêtres utilisées par ces services répondent également à vos normes d'accessibilité. Choisissez les options accessibles par rapport aux options non accessibles.

Si les éléments d'interface utilisateur accessibles ne sont pas disponibles auprès de vos fournisseurs, envisagez de créer les vôtres à l'aide de leur API et de les partager avec le monde entier. Vous faciliterez la tâche des autres développeurs Angular pour créer une application accessible.

Équivalents texte

Comme vous ne pouvez pas présumer que chaque utilisateur de votre application verra les images que vous incluez, utilisez les balises alt pour les images. Il suffit d’ajouter «Chat drôle» et non «Image d’un chat drôle». Les outils d’accessibilité comprennent déjà le fait qu’il s’agit d’une photo. De même, lorsque vous utilisez des éléments SVG, incluez un titre et une description.

Lisez cet article pour en savoir plus sur la création d'images accessibles à tous.

En conclusion

Dans cet article, nous avons examiné comment rendre les applications angulaires plus accessibles. Grâce à ces mesures, vos applications et vos sites sont un travail accessible à tous.

Nous avons abordé les éléments frontaux, la couleur et le contraste, les raccourcis clavier et la navigation, les sous-titres dans les vidéos, la sémantique HTML, les services externes et les équivalents textuels. Lorsque vous développez des applications angulaires, il est préférable de répondre à chacune de ces préoccupations dès le départ et de ne pas les ajouter après coup.

Le meilleur moment pour penser à l'accessibilité est avant de commencer un projet. Lorsque vous effectuez une recherche auprès des utilisateurs, tenez compte du fait que les personnes ont toutes sortes d'exigences et de capacités d'accessibilité différentes. Augmenter la notoriété de votre équipe de développement est le meilleur moyen de promouvoir l'accessibilité pour tous.

En savoir plus sur l'accessibilité

Nous avons créé un livre blanc complet sur l'accessibilité pour les développeurs, qui couvre tout, des lois au codage en passant par les tests. Téléchargez le livre blanc: Accessibilité pour les développeurs

Ajout de l'accessibilité à vos applications

Pour vous assurer que vous créez des applications Web accessibles, commencez par utiliser des composants des bibliothèques de Kendo UI. Nos composants sont tous conformes à la plainte WCAG et vous offrent une grande fonctionnalité, des grilles et graphiques aux programmateurs et aux sélecteurs. Prenez une longueur d'avance sur l'interface utilisateur de votre application et sur la conformité en matière d'accessibilité en même temps.

En savoir plus sur: Kendo UI