Résolvez six des problèmes d'accessibilité courants au sein de votre système de conception pour des versions rapides, cohérentes et conviviales à chaque fois.

Les systèmes de conception fournissent les principes directeurs, les composants et les règles que nous utilisons pour créer et gérer des sites Web et des applications. Et bien qu'ils prennent un certain temps à mettre en place à l'avance, un système de conception bien documenté présente de grands avantages:

• Les nouveaux membres de l'équipe peuvent se familiariser avec un produit en un rien de temps
• Il est beaucoup plus facile de créer un marque avec une identité visuelle cristalline
• Les composants réutilisables permettent une conception et un développement plus rapides
• Des règles et des directives détaillées garantissent la cohérence à travers le produit
• Les mises à jour se déroulent sans heurts car vous pouvez universellement transférer les mises à jour vers les composants et les extraits de code [19659008] L’un des avantages que nous ne voyons pas toujours associés aux systèmes de conception cependant, est l’accessibilité.

  Bien que les systèmes de conception facilitent la vie des concepteurs, ils doivent également vous permettre de créer meilleurs produits et expériences utilisateur. Et qu'est-ce que l'accessibilité sinon l'assurance que tous les utilisateurs, quelles que soient leurs limitations, peuvent avoir la meilleure expérience et un accès égal à votre produit numérique et à ses fonctionnalités.

  Mais comment intégrez-vous exactement l'accessibilité dans un système de conception?

  Aujourd'hui, nous allons examiner certains des plus gros problèmes d'accessibilité du Web et comment ils peuvent être résolus avec vos systèmes de conception.

  Problèmes courants liés à l'accessibilité du Web et Comment nous pouvons les aborder avec les systèmes de conception

  Le WebAIM Million est une étude annuelle qui rend compte de l'état de l'accessibilité du Web. Plus précisément, il décompose les plus gros problèmes d'accessibilité trouvés dans les 1 000 000 principaux sites Web.

  Par exemple, il a détecté 60 909 278 erreurs d'accessibilité sur les pages d'accueil de ces principaux sites Web en 2020.

  Je vais utiliser le rapport de 2020. pour identifier les problèmes les plus courants et fournir des conseils ainsi que des exemples concrets de systèmes de conception publics pour vous montrer comment les résoudre.

  Problème 1: Texte à faible contraste

  Il s'agit du problème d'accessibilité le plus répandu. WebAIM observé.

  86,3% des pages d'accueil avaient des problèmes de texte à faible contraste. 85,4% des pages internes avaient le même problème.

  Ce n'était pas non plus un problème ponctuel. Les pages d'accueil, en moyenne, avaient 36 cas de problèmes de faible contraste, tandis que les pages intérieures en avaient 30,3. Même si la page contenait des milliers de mots, c'est encore beaucoup trop de zones de faible lisibilité.

  Ce que nous voulons voir en termes de contraste entre la couleur du texte et l'arrière-plan est un rapport de au moins 4,5: 1 pour le corps du texte et 3: 1 pour les en-têtes. Cela rendrait votre site Web ou votre application conforme au niveau AA.

  Le système de conception d'Atlassian résout ce problème de plusieurs manières.

  La première consiste à exiger une conformité de niveau AA au contraste des couleurs pour tout le texte. , à l'exception des états désactivés et des images décoratives.

  

  Bien qu'il soit certainement utile pour les systèmes de conception et les directives de marque d'avoir des palettes de couleurs qui ont intrinsèquement un contraste intégré, il n'y a aucune garantie que les concepteurs les utiliseront correctement. [19659009] Pour garantir que chaque appariement a le bon contraste – que ce soit du texte, un graphique, un bouton ou un bloc coloré sur un arrière-plan de couleur différente – votre système de conception doit épeler ce point et fournir des exemples clairs comme le fait Atlassian.

  Problème 2: Texte alternatif manquant

  Selon le rapport de WebAIM:

  66% des images de la page d'accueil manquaient de texte alternatif, tandis que 61,9% des pages internes présentaient ce problème.

  Pour les images contenant texte alternatif, 9,3% d'entre eux avaient des descripteurs inutiles, comme «[file name]», «image» et «blank».

  Maintenant, à moins que vous n'ayez un tas d'images décoratives qui n'ajoutent rien à la compréhension d'un utilisateur de ce qui est page, il devrait y avoir un texte alternatif inclus pour chaque ima ge. Et il devrait être plein de détails descriptifs pour que tout le monde – même s’ils ne peuvent pas voir les images – comprenne ce qui est à l’écran.

  Comme Material Design le fait remarquer aux concepteurs, le texte alternatif manquant laisse les lecteurs d'écran et leurs utilisateurs avec rien de plus que le mot «image»:

  

  Pensez à ce qui se passerait si un site de voyage manquait alt text.

  Des sites Web comme ceux-ci dépendent fortement des images pour vendre leurs expériences – tout comme celui du bateau qui traverse les eaux bleu-vert ci-dessus. Si vos images n'incluent pas une description visuelle complète sous forme de texte alternatif, les visiteurs malvoyants manqueront ces détails importants de conversion.

  Si votre système de conception ne comporte pas de section sur images (ou tout autre contenu visuel comme des vidéos), assurez-vous d’en inclure une avec des instructions sur le texte alternatif.

  Problème 3: mauvaise hiérarchie visuelle dans le texte

  Les pages Web ne fonctionnent pas correctement lorsqu'elles arrive à la hiérarchie visuelle:

  Trop de H1.
  20,5% des pages d'accueil consultées par WebAIM avaient plusieurs balises

  .

  C'est un problème car il ne devrait y en avoir qu'un

  balise par page – et ce devrait être le titre de la page. Si vous avez plusieurs de ces balises, des lecteurs d'écran, vos utilisateurs et vos robots de recherche auront du mal à comprendre de quoi parle réellement la page.

  En-têtes mal utilisés.
  39,1% des pages avaient en-têtes ignorés.

  Les balises d'en-tête ne sont pas strictement utilisées pour faire ressortir une chaîne de texte d'une autre. Si tel est votre seul objectif, les caractères gras suffiront.

  Nous utilisons des balises d'en-tête pour donner une impression de hiérarchie dans le contenu. Nous les utilisons également pour améliorer la scannabilité d'une page.

  Donc, si

  est notre balise de titre, alors toutes les balises

  indiquent où se trouvent les principaux arguments de la page. Toutes les sous-sections liées à

  sont alors stylisées avec

  . Et ainsi de suite.

  Lorsqu'une page n'utilise pas les balises d'en-tête dans le bon ordre, l'organisation et la compréhension du contenu de la page peuvent être compromises.

  Aucune balise d'en-tête présente. [19659039] 12,4% des pages n'avaient aucune balise d'en-tête.

  À moins que votre page ne contienne littéralement 50 mots de texte et aucun autre contenu, il n'y a aucune excuse pour avoir une page sans balise d'en-tête. Même dans ce cas, vous devrez toujours utiliser un

  pour communiquer le titre de la page.

  J'aime beaucoup la façon dont le système de conception de Shopify explique cela. Non seulement il définit le style et la taille de chaque élément d'en-tête sur son site, mais il indique littéralement aux concepteurs où les utiliser pour une application cohérente:

  

  En expliquant le quand et pourquoi de ces choix de style typographique, les concepteurs ne se contenteront pas de lire un système de conception. Ils comprendront comment établir correctement une hiérarchie visuelle pour la lisibilité et l'accessibilité grâce à l'utilisation d'en-têtes.

  Problème 4: Liens et boutons vides

  L'étude WebAIM s'est beaucoup concentrée sur la question des liens et des boutons vides, c'est-à-dire. celles sans texte.

  Voici ce que les données ont révélé à propos de ce problème:

  • 59,9% des pages d'accueil contenaient des liens vides et 28,7% avaient des boutons vides.
  • 63,4% des pages internes étaient vides liens et 36,7% avaient des boutons vides.
  • 10,8% des pages avaient des liens «Skip Navigation» présents, mais 11,1% d'entre eux étaient cassés.

  Je pense que le problème global est le même pour chacun. En ne fournissant pas le bon texte de support, vous réduisez la capacité d'un utilisateur à naviguer sur votre site ou votre application.

  Il existe un certain nombre de façons dont vous pourriez vous retrouver avec un lien vide.

  Une façon est d'utiliser une icône (comme une pointe de flèche) au lieu du texte sur un bouton.

  Une autre façon est de décider de lier une chaîne de texte ainsi qu'une image correspondante à la même page. Tant que le lien hypertexte textuel apparaît avant l'image et indique clairement que l'image suivante appartient à la référence, vous n'avez pas besoin d'ajouter un lien vers l'image.

  Cela ne signifie pas que les images autonomes peuvent ne soyez pas lié. Cependant, si vous souhaitez le faire, vous devez disposer d'un texte alternatif qui explique aux utilisateurs ce qui se passe après avoir cliqué sur le lien. Cela résoudra le problème des liens vides, alors assurez-vous de le résoudre dans votre système de conception si c'est une pratique courante. Assurez-vous toujours que vos liens d'ancrage contiennent un texte descriptif afin que les utilisateurs sachent exactement où ils sont dirigés sur la page.

  Ce n'est pas quelque chose que j'ai souvent trouvé dans les systèmes de conception. Cependant, ce n'est pas une mauvaise idée de fournir la syntaxe correcte des liens et des boutons dans votre système pour vous assurer que les concepteurs fournissent les bonnes informations à chaque fois.

  Problème 5: Liens et boutons ambigus

  Sur une note connexe, l'étude a pris un regard sur la question des liens et des boutons peu clairs – c.-à-d. ceux dont le texte n'est pas descriptif.

  Selon le rapport, 24% des pages utilisaient un texte de lien ambigu.

  Bien que ce problème puisse certainement nuire à la navigabilité d'un site Web ou d'une application, le plus gros problème est celui de la confiance en un clic. Jetons un coup d'œil à quelques exemples de la façon dont cela se produit.

  En voici un du système de conception Atlassian:

  

  Comme vous pouvez le voir, l'exemple «Faire» explique clairement pourquoi l'utilisateur doit cliquer sur le lien et ce qu'il trouvera quand il fais. En revanche, le "Ne pas" nous montre comment une étiquette de texte vague ne dit rien à l'utilisateur.

  C'est un détail important pour tous les utilisateurs, pas seulement ceux qui utilisent des lecteurs d'écran et d'autres appareils d'assistance pour parcourir le Web. [19659009] Material Design nous donne un autre exemple de pourquoi cela devrait être expliqué dans un système de conception:

  

  Lorsqu'il se rapporte à quelque chose comme une image, le texte correspondant doit décrire ce que les utilisateurs «voient». Cependant, en ce qui concerne les boutons et autres composants cliquables, c'est une autre histoire.

  Les utilisateurs malvoyants peuvent ne pas savoir ce que signifie le lecteur d'écran lorsqu'il dit "icône de menu hamburger". Ils ont besoin que vous définissiez l'action afin qu'ils puissent se sentir confiants en suivant le lien ou en entreprenant l'action.

  Encore une fois, assurez-vous que votre système de conception renforce cette pratique afin que les concepteurs comprennent pourquoi le texte des boutons doit être écrit de cette façon.

  ] Problème 6: Étiquettes de saisie de formulaire manquantes

  Les formulaires de contact sont un élément essentiel de chaque site Web que vous créez. Sans cela, les utilisateurs sont obligés de trouver un autre moyen d'entrer en contact (ce qui nécessite des clics supplémentaires vers d'autres sites) ou de trouver quelqu'un d'autre qui offre facilement cette option.

  Mais ce n'est pas seulement la présence d'un formulaire qui apaise les visiteurs , en particulier celles qui ont des problèmes d'accessibilité.

  Selon WebAIM:

  53,8% des pages d'accueil ont des formulaires qui n'ont pas d'étiquettes d'entrée. Et 56,1% des pages internes souffrent du même problème.

  Ces étiquettes sont une partie importante de la conception de formulaires car elles indiquent aux utilisateurs ce dont ils ont besoin sur le terrain. Si ces étiquettes sont placées à la place dans les champs en tant que texte d'espace réservé, cela pourrait présenter un sérieux problème d'utilisation en général.

  Un codage incorrect des étiquettes peut également être problématique, comme l'explique ici le Carbon Design System :

  

  Ce système de conception décompose non seulement comment chacun de ses composants doit être conçu, mais il fournit les meilleures pratiques d'accessibilité pour chacun comme il le fait ici pour les étiquettes de formulaire .

  En vous assurant que les étiquettes de formulaire sont visibles à tout moment et que les lecteurs d'écran et autres technologies d'assistance peuvent trouver des étiquettes ainsi que d'autres textes d'aide, vous vous assurerez que chaque utilisateur peut remplir un formulaire avec e ase. Assurez-vous donc que votre système de conception définit les règles d'accessibilité pour la conception de formulaires.

  Récapitulation

  Ce n'est que la pointe de l'iceberg lorsqu'il s'agit de rendre vos sites Web et applications accessibles.

  Cela dit, basé sur les données que nous avons sur le million de sites Web les plus importants, les six problèmes ci-dessus ne sont que trop courants. Si votre système de conception peut les étouffer dans l'œuf, mettre à jour votre système de conception pour tenir compte d'autres composants accessibles et des choix de conception devrait être un jeu d'enfant.