Vous avez donc beaucoup entendu parler de ce qu'on appelle l'accessibilité. Peut-être avez-vous même entendu parler de personnes qui poursuivent de grandes entreprises pour avoir fourni des services inaccessibles. Mais savez-vous exactement ce que signifie l'accessibilité ?
Heureusement, l'accessibilité n'est pas trop difficile à comprendre ou à mettre en œuvre, une fois que vous vous y êtes engagé. Une fois que vous avez appris ce qu'est l'accessibilité, vous pouvez mettre cette théorie en pratique en écrivant des applications Vue.js accessibles.
Qu'est-ce que l'accessibilité ?
L'accessibilité est un mot à la mode populaire sur le Web, mais qu'est-ce que cela signifie exactement? Il s'avère que le nom est assez descriptif. L'accessibilité est simplement une mesure de la facilité d'utilisation d'une application Web pour tous les types de personnes.
Tout le monde ne vit pas le web de la même manière. Certaines personnes ont des déficiences qui peuvent affecter leur ouïe ou leur vue. Certains ne peuvent pas accéder au matériel moderne ou à Internet haut débit, et les gens ont souvent besoin d'utiliser le Web dans des conditions moins qu'idéales. L'accessibilité consiste à s'assurer que toutes ces personnes peuvent toujours utiliser une application Web de la manière la plus fluide possible.
Pourquoi l'accessibilité est-elle importante ?
L'accessibilité est importante car lorsqu'une application est hautement accessible, elle peut servir au plus grand nombre de personnes possible. Lorsqu'une personne fournit un service ou des informations sur un site Web, son objectif est que d'autres personnes utilisent ce service ou lisent ces informations.
L'optimisation de l'accessibilité garantit que le moins de personnes possible sont incapables d'utiliser l'application Web. De plus, les applications Web qui sont plus accessibles sont généralement mieux classées dans les résultats de recherche. Cela permet à encore plus de personnes de trouver et d'utiliser des applications Web plus accessibles.
Erreurs courantes des développeurs qui nuisent à l'accessibilité
De nombreuses applications Web sont moins accessibles qu'elles ne pourraient l'être. C'est généralement le résultat d'erreurs de la part de ceux qui les ont construits. Certaines erreurs d'accessibilité courantes commises par les développeurs lors de la création d'applications sont les suivantes :
Utiliser des bibliothèques inaccessibles
Vous pouvez compter sur des bibliothèques tierces pour économiser du temps et des efforts lorsque vous développez vos applications. Malheureusement, toutes les bibliothèques ne prennent pas l'accessibilité au sérieux et il peut être difficile d'identifier les bonnes. Il est facile de finir par réduire accidentellement l'accessibilité de vos applications de cette façon.
Négliger le HTML sémantique lors de la construction de composants
Le HTML sémantique est un HTML dont la signification ainsi que la structure sont correctes. Chaque balise HTML a un objectif inhérent, que la technologie d'assistance utilise pour déduire la signification de son contenu. Par exemple, la balise d'en-tête marque l'en-tête d'un site Web. Un lecteur d'écran devrait pouvoir annoncer que tout ce qui se trouve à l'intérieur d'une balise d'en-tête est un en-tête de site Web.
Malheureusement, rien ne vous empêche d'utiliser une balise dans un mauvais but. Un autre exemple courant est l'utilisation d'une balise de bouton pour agir comme un lien, ou vice versa.
Écrire du HTML de cette manière nuit à l'accessibilité, car la technologie d'assistance ne peut plus être sûre de l'objectif d'un élément HTML. Cela peut finir par produire des résultats déroutants ou frustrants pour les utilisateurs de la technologie. Pour une accessibilité maximale, vous devez toujours écrire du HTML sémantique, même si cela signifie un peu plus de travail.
Ne pas tester l'accessibilité
La création d'une application Web peut souvent être une tâche ardue avec des délais exigeants. Entre la hâte de terminer les fonctionnalités et la charge de tester d'autres aspects du logiciel, les tests d'accessibilité passent au second plan. Vous pourriez être tenté de déployer une application en production avant de l'avoir testée pour les problèmes d'accessibilité.
Pourquoi? Le test prend du temps et peut nécessiter des modifications importantes du code de l'application. Mais tester une application web est un élément indispensable du processus de développement. Vous devez tester l'accessibilité de votre application aussi rigoureusement que tout autre aspect.
Heureusement, des outils existent pour aider à résoudre ces problèmes. Les cinq outils suivants peuvent vous aider à écrire des applications Vue.js plus accessibles :
WAVE est une collection d'outils qui aide les développeurs à tester automatiquement leurs applications pour les problèmes d'accessibilité. Bien que WAVE ne remplace pas les tests de l'utilisateur final, il peut néanmoins vous aider à détecter de nombreux problèmes d'accessibilité.
WAVE fournit un outil de test en ligne sur son site Web. Il propose également des extensions de navigateur et plusieurs autres outils pour faciliter les tests d'accessibilité pour de nombreux types d'applications Web.
La plupart des signaux que les applications Web utilisent pour communiquer l'activité, comme les barres de progression et les indicateurs de chargement, sont purement visuels. Les personnes ayant une déficience visuelle ou celles qui utilisent des lecteurs d'écran ne peuvent pas les percevoir.
Vue-announcer est une bibliothèque qui vous permet d'annoncer les modifications apportées à vos applications Vue.js d'une manière accessible à tous.
Vue-skip-to est une bibliothèque créée pour permettre aux personnes utilisant un lecteur d'écran de passer directement au contenu principal d'une application Vue.js. Ceci est utile car de nombreuses applications Web ont des liens de navigation et d'autres éléments avant le contenu principal. Ceux-ci sont faciles à ignorer pour certains utilisateurs, mais peuvent être gênants et frustrants à utiliser avec un lecteur d'écran.
ESLint est un outil qui vous aide à mieux écrire du JavaScript en analysant votre code et en le vérifiant pour les erreurs.
Cet outil est un plugin ESLint qui vous aide à vous assurer que la structure de vos composants Vue.js est conforme aux règles d'accessibilité.
Une fois installé, ce plugin analyse tous les fichiers Vue.js et signale le code problématique. Vous pouvez ensuite maximiser l'accessibilité lors de l'écriture de vos applications, au lieu d'avoir à modifier le code après la phase de test.
Une grande source de problèmes d'accessibilité dans les applications est l'utilisation de bibliothèques de composants inaccessibles. Vuetensils est une bibliothèque de composants Vue.js.
Ces composants sont optimisés pour une taille minimale, une accessibilité maximale, une facilité d'utilisation et une facilité de style. Vous pouvez gagner du temps et utiliser ces composants pré-construits sans nuire à l'accessibilité de vos applications.
L'accessibilité dans Vue.js est facile
L'accessibilité consiste à s'assurer que tout le monde peut utiliser votre application dans n'importe quel contexte. Maximiser l'accessibilité est important pour s'assurer qu'une application peut être utilisée par le plus grand nombre de personnes possible.
Les développeurs commettent souvent des erreurs d'accessibilité courantes mais évitables lors de la création de leurs applications. Les problèmes courants incluent le non-test et l'écriture de code HTML non sémantique. Mais avec l'aide de quelques outils, il est plus facile d'écrire des applications Vue.js hautement accessibles.