De nombreuses personnes utilisent le développement basé sur les composants à l'aide de guides de style de modèles, de bibliothèques de composants ou de systèmes de conception complets dans leur processus de workflow de développement. Même si vous n'avez pas utilisé ces outils de manière formelle, il est probable que vous utilisiez un processus similaire pour diviser une grande conception pour un site Web, une application ou un autre produit numérique en éléments gérables.
Comme pour la construction d'une structure physique, il est important de créer chaque élément à la fois. Tout d'abord, les fondations, la structure, les murs, les fenêtres, le toit et tout ce qui se trouve entre les deux. Les outils de développement basés sur les composants nous permettent de le faire pour les sites Web, les applications et d'autres produits numériques.
Le développement basé sur les composants présente certains avantages, comme la décomposition des éléments en éléments gérables, ce qui réduit le temps de développement avec ces composants réutilisables. Il permet aux concepteurs, aux développeurs front-end et back-end, ainsi qu'au contrôle qualité de travailler simultanément. Les clients, les concepteurs, les responsables de projet et d'autres personnes l'apprécient, car ils peuvent prévisualiser le processus de création et utiliser un guide de style évolutif comme référence après le lancement du site Web.
Toutefois, lorsque nous examinons les modèles, les composants et les systèmes de conception en tenant compte de l'accessibilité, certaines questions se posent. Comment savoir quels modèles sont les meilleurs en termes d'accessibilité ? Faut-il utiliser un modèle ou une bibliothèque existants, ou en créer ? Comment savoir si ces modèles aideront réellement vos utilisateurs ?
Face à la multitude de choix disponibles, il est facile de se perdre entre les tendances, les composants et les systèmes de conception. Ce module vise à vous fournir des informations générales sur l'évaluation de l'accessibilité des modèles, des composants et des systèmes de conception. Il vous sert de point de départ pour vous aider à faire des choix plus accessibles.
Faites preuve d'esprit critique
Choisir un modèle, un composant ou un système de conception accessible n'est pas de la haute technologie, mais cela demande du temps et de la réflexion critique. En réalité, il n'existe pas de "modèle parfait", mais de nombreuses options peuvent fonctionner. Il s'agit d'apprendre à choisir la meilleure option pour votre situation unique.
Dans les modules de test suivants, vous en apprendrez davantage sur les techniques et les méthodes permettant d'évaluer l'accessibilité des modèles, des composants et des systèmes de conception. Avant d'en arriver là, vous devez vous poser quelques questions fondamentales, par exemple:
- Existe-t-il déjà un modèle, un composant ou un système de conception accessible établi ?
- Quels navigateurs et technologies d'assistance (AT) sont compatibles avec mon application ?
- Existe-t-il des limites de code ou de framework ? Y a-t-il d'autres intégrations, facteurs ou besoins des utilisateurs que je devrais prendre en compte ?
En fonction de votre environnement de développement et des besoins des utilisateurs, vous pouvez avoir des questions supplémentaires ou différentes de celles-ci. Considérez ces questions comme votre point de départ pour votre évaluation de l'accessibilité.
Ressources établies
Avant de créer quelque chose de nouveau, faites preuve de diligence et examinez ce qui existe déjà en termes de modèles, de composants et de systèmes de conception accessibles. Avec un peu de recherche, vous pourriez être surpris de trouver une solution (ou plusieurs) qui répond à vos besoins.
Voici quelques excellentes ressources sur les modèles, composants et systèmes de conception accessibles:
- Composants accessibles
- Bibliothèque ARIA de l'université Deque
- Système de conception Gov.UK
- Composants inclusifs
- MagentaA11y
- USWDS (U.S. Web Design System), créé pour le gouvernement fédéral des États-Unis
- Liste des modèles accessibles de Smashing Magazine
Pour les frameworks JavaScript, les ressources suivantes sont assez accessibles par défaut ou personnalisables pour l'accessibilité:
- Quand le CSS ne suffit pas: exigences JavaScript pour les composants accessibles
- React
- Angular: bibliothèque Material
- Vue: Vuetensils
Toutefois, et cela ne peut être souligné à suffisance, vous ne devez jamais simplement copier/coller du code et supposer qu'il s'adaptera à votre environnement et répondra automatiquement aux besoins de vos utilisateurs. Cela est vrai pour tous les modèles, composants et systèmes de conception, même s'ils sont considérés comme entièrement accessibles.
Toutes les ressources doivent être considérées comme un point de départ. Veillez à tout tester.
Compatibilité avec les navigateurs et les technologies d'assistance (TA)
Après avoir recherché quelques modèles de base, composants ou systèmes de conception complets qui pourraient fonctionner pour votre environnement de développement, vous pouvez passer à la prise en charge des technologies d'assistance. Les lecteurs d'écran sont un type d'AT majeur sur lequel vous devez vous concentrer lorsque vous évaluez les modèles, les composants et les systèmes de conception.
Les lecteurs d'écran ont été conçus pour des navigateurs spécifiques et fonctionnent de manière optimale avec ces navigateurs. Nous aborderons ce sujet plus en détail dans le module sur les tests AT, mais à des fins d'évaluation des tendances, il est utile de comprendre que ces combinaisons existent afin de savoir ce dont vous avez besoin en termes d'assistance.
| Lecteur d'écran | OS | Compatibilité du navigateur | Coût |
|---|---|---|---|
| Job Access with Speech (JAWS) | Windows | Chrome, Firefox, Edge | Licence requise (une version sans frais de 40 minutes est disponible) |
| NonVisual Desktop Access (NVDA) | Windows | Chrome et Firefox | Sans frais (nécessite un téléchargement) |
| Narrateur | Windows | Edge | Sans frais (intégré aux machines Windows) |
| VoiceOver | macOS | Safari | Sans frais (intégré aux ordinateurs macOS) |
| Orca | Linux | Firefox | Sans frais (intégré aux distributions basées sur Gnome) |
| TalkBack | Android | Chrome et Firefox | Sans frais (intégré à certaines versions du système d'exploitation Android) |
| VoiceOver | iOS | Safari | Sans frais (intégré aux appareils iOS) |
La compatibilité avec les navigateurs est généralement complexe, et la situation est encore plus délicate lorsque vous ajoutez des appareils d'AT et des spécifications ARIA.
Mais ce n'est pas tout. Heureusement, de bonnes ressources telles que la accessibilité HTML5, l'assistance pour l'accessibilité et la checklist de développement accessible pour les commandes personnalisées des WCAG nous aident à mieux comprendre la compatibilité actuelle des navigateurs et des appareils d'AT, et même à savoir quand utiliser ARIA.
Ces ressources décrivent les différents sous-éléments de modèle HTML et ARIA disponibles, y compris les tests de la communauté Open Source. Vous pouvez également consulter des exemples de modèles pour les ordinateurs, les navigateurs mobiles et les appareils d'AT. Par conséquent, ces ressources peuvent vous aider à prendre une décision plus accessible concernant les modèles, les composants et les systèmes de conception que vous souhaitez utiliser.
Autres points à noter
Une fois que vous avez choisi quelques modèles ou composants de base accessibles, et pris en compte la compatibilité avec les navigateurs et les appareils d'AT, vous pouvez passer à des questions contextuelles plus spécifiques sur le modèle, le composant, le système de conception et l'environnement de développement.
Par exemple, si vous travaillez dans un système de gestion (CMS) ou si vous disposez d'un ancien code, les modèles que vous pouvez utiliser peuvent être limités. Après examen, plusieurs choix de modèles peuvent rapidement être réduits à une ou deux options.
De nombreux frameworks JavaScript permettent aux développeurs d'utiliser presque tous les modèles de leur choix. Dans ce cas, vous pouvez avoir moins de restrictions et choisir l'option de modèle la plus accessible.
D'autres considérations doivent être prises en compte lors du choix d'un modèle, d'un composant ou d'un système de conception, par exemple:
- Performances
- Sécurité
- Référencement naturel
- Compatibilité avec les langues
- Intégrations tierces
Ces facteurs auront sans aucun doute un impact sur votre choix de modèle, mais vous devez également tenir compte des personnes qui créent le contenu et le code. Le modèle que vous choisissez doit être suffisamment robuste pour gérer les limites potentielles liées aux contenus générés par l'éditeur ou par les utilisateurs, et être conçu de manière à pouvoir être utilisé par les développeurs de tous niveaux de connaissances en matière d'accessibilité.
Vérifier vos connaissances
Tester vos connaissances sur les tendances
Les composants accessibles restent-ils toujours accessibles aux utilisateurs ?