{"id":3142,"date":"2022-11-15T10:09:22","date_gmt":"2022-11-15T10:09:22","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/4-common-web-accessibility-issues-to-know\/"},"modified":"2026-03-09T13:10:53","modified_gmt":"2026-03-09T13:10:53","slug":"probleme-de-rapport-de-contraste","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fr\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 probl\u00e8mes courants d'accessibilit\u00e9 du Web \u00e0 conna\u00eetre"},"content":{"rendered":"

Probl\u00e8me de rapport de contraste<\/h2>\n\n\n\n

Le probl\u00e8me d'accessibilit\u00e9 le plus courant que j'ai constat\u00e9 au fil des ans est celui de la probl\u00e8me de contraste et d'accessibilit\u00e9 des couleurs<\/b>Un mauvais rapport de contraste rendra le contenu de votre page difficile \u00e0 voir, ce qui sera tr\u00e8s pr\u00e9judiciable \u00e0 vos utilisateurs, y compris \u00e0 ceux qui souffrent d'un handicap visuel. <\/p>\n\n\n\n

Le contraste est une mesure de la diff\u00e9rence de \"luminance\" ou de luminosit\u00e9 per\u00e7ue entre deux couleurs. Il s'agit par exemple de la diff\u00e9rence entre la couleur d'arri\u00e8re-plan et la couleur de premier plan du contenu de votre page. Examinons cette barre de navigation.<\/p>\n\n\n\n

\"barre<em>de<\/figure>\n\n\n\n

Disons que votre client aime beaucoup cette couleur verd\u00e2tre et la trouve g\u00e9niale, mais qu'il y a un probl\u00e8me de contraste. Nous avons un #FFFFFF<\/code> en arri\u00e8re-plan avec un #83A94C<\/code> La couleur du texte donne un rapport de contraste de 2,71:1, ce qui est bien en dessous du minimum requis. 4.5:1<\/strong> n\u00e9cessaire. Pour d\u00e9tecter ce probl\u00e8me, nous disposons de plusieurs solutions : <\/p>\n\n\n\n

    \n
  1. Utilisez un v\u00e9rificateur de contraste en ligne comme le V\u00e9rificateur de contraste Webaim<\/a>qui calculera le rapport de contraste et vous donnera une valeur de Passez<\/strong> ou \u00c9chec<\/strong> grade.<\/li>\n\n\n\n
  2. Utilisez l'une des nombreuses extensions de contr\u00f4le de contraste du navigateur, par exemple : WCAG Contr\u00f4leur de contraste des couleurs<\/a>.<\/li>\n\n\n\n
  3. Essayez le v\u00e9rificateur de contraste int\u00e9gr\u00e9 au navigateur. Pour l'utiliser sur Google Chrome, ouvrez les outils de d\u00e9veloppement, inspectez l'\u00e9l\u00e9ment cibl\u00e9 (ex : le lien Home de notre navbar), allez \u00e0 la propri\u00e9t\u00e9 de couleur CSS, et cliquez sur le rectangle de couleur pour ouvrir le s\u00e9lecteur de couleur, en bas, vous serez pr\u00e9sent\u00e9 avec une valeur de ratio de contraste, d\u00e9veloppez-la pour plus de d\u00e9tails. Le processus est exactement le m\u00eame pour Firefox, il y a juste une petite diff\u00e9rence dans le ratio affich\u00e9 en bas \u00e0 gauche du s\u00e9lecteur de couleurs.<\/li>\n<\/ol>\n\n\n\n
    \"noir<em>arri\u00e8re-plan<\/em>avec<em>bleu<\/em>code\"<\/figure>\n\n\n\n

    Pour plus d'informations sur les contrastes, consultez le site suivant Article sur l'accessibilit\u00e9 des contrastes et des couleurs<\/a>.<\/p>\n\n\n\n

    Probl\u00e8me de texte de lien<\/h2>\n\n\n\n

    Les liens constituent une part importante de la web<\/a> de nos jours, il est donc tr\u00e8s important de les rendre accessibles. Un lien doit avoir un sens et informer l'utilisateur de son contexte. Un lien non informatif avec un texte comme \"en savoir plus\", \"cliquer ici\", \"v\u00e9rifier les d\u00e9tails\" n'est pas tr\u00e8s utile. produit<\/a> Par exemple, l'utilisation du nom du produit tel que \"Le casque du Mandalorien\" est plus efficace et plus informatif. Des mots comme cliquez ici<\/code> ou plus d'informations<\/code> peut \u00eatre omis parce qu'un lien est cliquable par d\u00e9faut et que quelque chose comme \"en savoir plus sur les nouvelles du jour\" peut \u00eatre raccourci en \"nouvelles du jour\". Il n'y a pas de r\u00e8gle ou de limite particuli\u00e8re concernant la longueur des liens. le lien doit \u00eatre lisible<\/b> et suffisamment longue pour donner une bonne description de son objectif.<\/p>\n\n\n\n

    Les images en tant que liens sont un mod\u00e8le tr\u00e8s r\u00e9pandu, qui doit donc suivre les m\u00eames r\u00e8gles que celles dont nous avons parl\u00e9 plus haut. L'attribut alt de l'image jouera le r\u00f4le de texte de lien et sera annonc\u00e9 par les lecteurs d'\u00e9cran. Si l'image est le seul contenu du lien, elle doit avoir un attribut alt. Si le lien contient du texte et une image, on peut omettre l'attribut alt :<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Notifications">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Consultez quelques liens ici pour en savoir plus sur l'accessibilit\u00e9 des liens :Texte et apparence des liens<\/a>, Images fonctionnelles<\/a>.<\/p>\n\n\n\n
    \u00c9tiquette manquante dans une entr\u00e9e de formulaire<\/h2>\n\n\n\n
    \"input<em>labels<\/em>with<em>blue<\/em>button\"<\/figure>\n\n\n\n
    Nous avons tous d\u00e9j\u00e0 vu ces entr\u00e9es de formulaire sans \u00e9tiquette et avec juste un espace r\u00e9serv\u00e9 pour d\u00e9crire le but de l'entr\u00e9e. Une premi\u00e8re remarque est que d\u00e8s que l'utilisateur aura rempli toutes les entr\u00e9es et que les espaces r\u00e9serv\u00e9s ne seront plus visibles, nous n'aurons plus de contexte visuel sur l'objectif de l'entr\u00e9e. nous<\/a> se concentrer sur l'accessibilit\u00e9. <\/p>\n\n\n\n
    Associer un \u00e9tiquette<\/code> \u00e0 une entr\u00e9e pr\u00e9sente deux avantages majeurs : un lecteur d'\u00e9cran lira l'\u00e9tiquette lorsque l'utilisateur se concentre sur l'entr\u00e9e du formulaire et, lorsqu'une \u00e9tiquette est cliqu\u00e9e ou touch\u00e9e, le navigateur transf\u00e8re le focus \u00e0 l'entr\u00e9e associ\u00e9e. Pour rem\u00e9dier \u00e0 ce genre de situation, il suffit d'ajouter des \u00e9tiquettes comme suit :<\/p>\n\n\n\n
        Pr\u00e9nom\n\n    \n  \n\n    Nom de famille\n\n    \n  \n\n    Courriel\n\n    \n  \n\n    Soumettre\n  \n\n```<\/code><\/pre>\n\n\n\n
    Voil\u00e0, toutes les entr\u00e9es ont leurs \u00e9tiquettes associ\u00e9es, ce qui les rend accessibles \u00e0 tout le monde. Nous pouvons m\u00eame supprimer les espaces r\u00e9serv\u00e9s pour \u00e9viter de dupliquer l'objectif de l'entr\u00e9e, mais nous savons tous que les sc\u00e9narios du monde r\u00e9el ne sont pas si faciles \u00e0 g\u00e9rer, vous venez de recevoir une conception qui a ces entr\u00e9es de formulaire sans \u00e9tiquettes et le client ne veut pas changer cette partie. La premi\u00e8re solution qui vient \u00e0 l'esprit est d'appliquer un affichage : aucun ;<\/code> ou visibilit\u00e9 : cach\u00e9e ;<\/code> \u00e0 nos \u00e9tiquettes, cela les cachera mais elles sont toujours l\u00e0, n'est-ce pas ? Ces propri\u00e9t\u00e9s cachent des \u00e9l\u00e9ments non seulement \u00e0 l'\u00e9cran, mais aussi pour les utilisateurs de lecteurs d'\u00e9cran, ce qui ne r\u00e9soudra pas notre probl\u00e8me.<\/p>\n\n\n\n
    Nous pouvons utiliser le mod\u00e8le de clip<\/strong> pour r\u00e9soudre ce probl\u00e8me. De cette mani\u00e8re, nous masquerons le contenu visuellement, tout en fournissant le contenu aux lecteurs d'\u00e9cran. Nous allons cr\u00e9er le CSS suivant sr-only<\/code> et l'appliquer \u00e0 toutes nos \u00e9tiquettes :<\/p>\n\n\n\n
     .sr-only:not(:focus):not(:active) {\n   clip : rect(0 0 0 0) ;\n   clip-path : inset(50%) ;\n   height : 1px ;\n   overflow : hidden ;\n   position : absolute ;\n   white-space : nowrap ;\n   width : 1px ;\n }\n<\/code><\/code><\/pre>\n\n\n\n
    Cela permettra de masquer nos \u00e9tiquettes, de les rendre accessibles aux lecteurs d'\u00e9cran et de les faire correspondre \u00e0 notre design. Les :not(:focus):not(:active)<\/code> La pseudo-classe emp\u00eache les \u00e9l\u00e9ments focalisables tels que a<\/code>, bouton<\/code>, entr\u00e9e<\/code> d'\u00eatre cach\u00e9 lorsqu'il re\u00e7oit la focalisation.<\/p>\n\n\n\n
    Pas d'indicateur de mise au point<\/h2>\n\n\n\n
    Il fut un temps o\u00f9 je faisais cela dans ma feuille de style CSS globale :<\/p>\n\n\n\n
    * {\noutline : none ; \/* horrible erreur *\/\n}<\/code><\/pre>\n\n\n\n
    Vers 2020, j'ai remarqu\u00e9 que des bordures noires apparaissaient sur les entr\u00e9es de formulaire de Google Chrome lorsqu'elles \u00e9taient focalis\u00e9es ou sur les boutons lorsqu'on y acc\u00e9dait par la tabulation - c'\u00e9tait vraiment bizarre car je ne le comprenais pas \u00e0 l'\u00e9poque. Apr\u00e8s quelques recherches, j'ai d\u00e9couvert que c'\u00e9tait d\u00fb \u00e0 la propri\u00e9t\u00e9 CSS outline, ce qui a permis de r\u00e9soudre ce \"probl\u00e8me\" pour moi.<\/p>\n\n\n\n
    \u00c0 l'\u00e9poque, je n'avais aucune id\u00e9e de la mani\u00e8re correcte de proc\u00e9der.  Apr\u00e8s quelques recherches sur le pourquoi et le comment de cette nouvelle valeur par d\u00e9faut, j'ai d\u00e9couvert que le contour est un indicateur de mise au point de l'\u00e9l\u00e9ment et que s'il est supprim\u00e9, un style de mise au point \u00e9vident doit \u00eatre fourni ; en fait, ce que je faisais est consid\u00e9r\u00e9 comme une mauvaise pratique. Vous pouvez personnaliser les indicateurs de mise au point comme bon vous semble, mais les supprimer compl\u00e8tement du site web pose un gros probl\u00e8me d'accessibilit\u00e9. Il est assez facile, par exemple, de personnaliser le style de mise au point d'un \u00e9l\u00e9ment :<\/p>\n\n\n\n
    <a:focus {\n   outline : 4px solid #ee7834 ;\n   outline-offset : 4px ;\n }<\/code><\/code><\/pre>\n\n\n\n
    Outils d'accessibilit\u00e9<\/h2>\n\n\n\n
    V\u00e9rifier tous les points dont nous avons parl\u00e9 peut repr\u00e9senter beaucoup de travail, surtout si l'on sait qu'il y a encore beaucoup de choses \u00e0 couvrir en mati\u00e8re d'accessibilit\u00e9. Pour nous aider \u00e0 g\u00e9rer l'accessibilit\u00e9, nous avons deux excellentes extensions de navigateur.<\/p>\n\n\n\n
    Outil d'\u00e9valuation WAVE<\/a> est une suite d'outils d'\u00e9valuation qui nous aide \u00e0 rendre notre contenu web plus accessible. Il est disponible dans Google Chrome et Firefox. <\/p>\n\n\n\n
    Essayons-le sur une petite page web contenant une barre de navigation et une entr\u00e9e sans \u00e9tiquette et voyons ce qu'il renvoie. Apr\u00e8s avoir install\u00e9 l'extension, il suffit de cliquer sur l'ic\u00f4ne de l'extension pour l'utiliser.<\/p>\n\n\n\n
    \"fen\u00eatre<em>blanche<\/em>avec<em>sections<\/em>grises\"<\/figure>\n\n\n\n
    L'onglet R\u00e9sum\u00e9 montre 1 erreur (\u00e9l\u00e9ment de formulaire sans \u00e9tiquette), 2 erreurs de contraste et 1 alerte (structure d'en-t\u00eate manquante), comme vous pouvez le voir, le r\u00e9sultat est tr\u00e8s clair et d\u00e9taill\u00e9. L'onglet D\u00e9tails affiche une liste de toutes les erreurs, alertes et caract\u00e9ristiques. Nous pouvons \u00e9galement interagir directement sur la page en cliquant sur ces rectangles rouges pour v\u00e9rifier la description et le type d'erreur.<\/p>\n\n\n\n
    Axe DevTools<\/a> est une bo\u00eete \u00e0 outils d'accessibilit\u00e9 puissante et pr\u00e9cise. Il est disponible dans Google Chrome et Firefox. Apr\u00e8s avoir install\u00e9 l'extension, nous devrons ouvrir les outils de d\u00e9veloppement du navigateur et aller dans l'onglet DevTools de l'axe et cliquer sur Scanner toutes mes pages.<\/p>\n\n\n\n
    \"DevTools<em>window<\/em>with<em>black<\/em>grey_sections\"<\/figure>\n\n\n\n
    Vous pouvez voir qu'Axe DevTools a signal\u00e9 les m\u00eames probl\u00e8mes avec l'outil d'\u00e9valuation WAVE, \u00e0 savoir des probl\u00e8mes de contraste, des \u00e9l\u00e9ments de formulaire sans \u00e9tiquette et des \u00e9l\u00e9ments d'en-t\u00eate manquants, et nous a m\u00eame donn\u00e9 quelques bonnes pratiques \u00e0 suivre.<\/p>\n\n\n\n
    Un autre moyen de tester l'accessibilit\u00e9 est d'utiliser un lecteur d'\u00e9cran et de tester votre site web avec lui. Il existe de nombreux lecteurs d'\u00e9cran, pour n'en citer que quelques-uns :<\/p>\n\n\n\n