De nombreuses personnes utilisent le développement axé sur les composants à l'aide de guides de style de modèle, 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 conception volumineuse 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 construire un élément à la fois. Tout d'abord, les fondations, la structure, les murs, les fenêtres, le toit et tout le reste. Les outils de développement axé sur les composants nous permettent de le faire pour les sites Web, les applications et d'autres produits numériques.
Le développement axé sur les composants présente plusieurs avantages, notamment la division 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 frontend et backend, ainsi qu'aux équipes d'assurance qualité de travailler simultanément. Les clients, les concepteurs, les chefs de projet et d'autres personnes l'apprécient, car ils peuvent prévisualiser le processus de compilation et utiliser un guide de style dynamique comme référence une fois le site Web lancé.
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 plus adaptés en termes d'accessibilité ? Faut-il utiliser un modèle ou une bibliothèque établis, ou en créer de nouveaux ? Comment savoir si ces modèles aideront réellement vos utilisateurs ?
Avec la myriade de choix disponibles, vous pouvez être confus quant aux modèles, aux composants et aux systèmes de conception. Ce module vise à vous fournir des informations générales sur l'évaluation des modèles, des composants et des systèmes de conception en termes d'accessibilité, et vous donne un point de départ pour vous aider à faire des choix plus accessibles.
Faire preuve d'esprit critique
Choisir un modèle, un composant ou un système de conception accessible n'est pas une science exacte, mais cela demande du temps et un esprit critique. En fait, il n'existe pas de "modèle parfait", mais il peut y avoir de nombreuses options qui pourraient 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 d'évaluation des modèles, des composants et des systèmes de conception en termes d'accessibilité. Avant d'en arriver là, vous devez vous poser quelques questions fondamentales, telles que :
- Existe-t-il déjà un modèle, un composant ou un système de conception accessible établi ?
- Quels navigateurs et technologies d'assistance (TA) dois-je prendre en charge ?
- Existe-t-il des limites de code ou de framework ? Existe-t-il d'autres intégrations, facteurs ou besoins des utilisateurs que je dois 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 dans votre évaluation de l'accessibilité.
Ressources établies
Avant de créer quelque chose de nouveau, faites preuve de diligence raisonnable 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 serez peut-être surpris de trouver une ou plusieurs solutions qui répondent à vos besoins.
Voici quelques excellentes ressources pour les modèles, les composants et les systèmes de conception accessibles :
- Composants accessibles
- Bibliothèque ARIA de Deque University
- Système de conception Gov.UK
- Composants inclusifs
- MagentaA11y
- Système de conception Web des États-Unis (USWDS), 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
- Réagir
- Angular : bibliothèque Material
- Vue: Vuetensils
Toutefois, et cela ne peut être souligné suffisamment, 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 vaut pour tous les modèles, composants et systèmes de conception, même s'ils sont étiquetés comme étant entièrement accessibles.
Toutes les ressources doivent être considérées comme un point de départ. Veillez à tout tester !
Navigateurs et technologies d'assistance (TA) compatibles
Après avoir recherché quelques modèles de base, composants ou un système de conception complet qui pourrait fonctionner pour votre environnement de développement, vous pouvez passer à la prise en charge des technologies d'assistance. L'un des principaux types de TA sur lequel vous devez vous concentrer lors de l'évaluation des modèles, des composants et des systèmes de conception est celui des lecteurs d'écran.
Les lecteurs d'écran ont été conçus pour des navigateurs spécifiques et fonctionnent de manière optimale lorsqu'ils sont associés à ces navigateurs. Nous aborderons ce sujet plus en détail dans le module sur les tests de TA, mais à des fins d'évaluation des modèles, il est utile de comprendre que ces combinaisons existent, afin de savoir ce dont vous avez besoin en termes de prise en charge.
| 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 existe) |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome et Firefox | Sans frais (téléchargement requis) |
| Narrateur | Windows | Edge | Sans frais (intégré aux machines Windows) |
| VoiceOver | macOS | Safari | Sans frais (intégré aux machines 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 de l'OS Android) |
| VoiceOver | iOS | Safari | Sans frais (intégré aux appareils iOS) |
La prise en charge des navigateurs est généralement complexe, et les choses se compliquent encore lorsque vous ajoutez des appareils de TA et des spécifications ARIA.
Mais tout n'est pas perdu. Heureusement, d'excellentes ressources telles que HTML5 Accessibility, Accessibility Support, et la liste de contrôle du développement accessible des commandes personnalisées de WCAG nous aident à mieux comprendre la prise en charge actuelle des navigateurs et des appareils de TA, et même quand utiliser ARIA en premier lieu.
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 quelques exemples de modèles pour les navigateurs de bureau et mobiles, ainsi que les appareils de TA. 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 que vous avez pris en compte la prise en charge des navigateurs et des appareils de TA, 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 de contenu (CMS) ou si vous disposez d'un code hérité, il peut y avoir des limites quant aux modèles que vous pouvez utiliser. 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 n'importe quel modèle de leur choix. Dans ce cas, vous pouvez avoir moins de restrictions et choisir l'option de modèle la plus accessible.
D'autres éléments doivent être pris en compte lors du choix d'un modèle, d'un composant ou d'un système de conception, tels que :
- Performances
- Sécurité
- Référencement naturel
- Prise en charge de la traduction linguistique
- Intégrations tierces
Ces facteurs joueront sans aucun doute un rôle dans votre choix de modèle, mais vous devez également tenir compte des personnes qui créent le contenu et le code eux-mêmes. Le modèle que vous choisissez doit être suffisamment robuste pour gérer toutes les limites potentielles liées au contenu généré par l'éditeur ou au contenu généré par l'utilisateur, et être conçu de manière à ce que les développeurs de tous les niveaux de connaissances en matière d'accessibilité puissent l'utiliser.