{"id":830320,"date":"2018-01-20T12:00:08","date_gmt":"2018-01-20T12:00:08","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/how-to-evaluate-and-improve-your-website-with-accessibility-testing-2\/"},"modified":"2022-12-11T09:32:26","modified_gmt":"2022-12-11T09:32:26","slug":"how-to-evaluate-and-improve-your-website-with-accessibility-testing-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-evaluer-et-ameliorer-votre-site-web-grace-a-un-test-daccessibilite\/","title":{"rendered":"Comment \u00e9valuer (et am\u00e9liorer) votre site Web gr\u00e2ce \u00e0 un test d&rsquo;accessibilit\u00e9"},"content":{"rendered":"<div id=\"post-68496\">\n<p>Beaucoup de gens consid\u00e8rent comme acquis le fait de pouvoir naviguer sur le Web. Bien s\u00fbr, si vous ne souffrez d&rsquo;aucune d\u00e9ficience, la navigation sur les sites Web modernes est une affaire simple. Le probl\u00e8me est que tout le monde ne vit pas le web de la m\u00eame mani\u00e8re. Plus important encore, certains handicaps rendent la navigation sur un site plus compliqu\u00e9e que vous ne l&rsquo;imaginez.<\/p>\n<p>Si vous voulez que le plus grand nombre de personnes possible puisse profiter de votre site Web, les tests d&rsquo;accessibilit\u00e9 sont une n\u00e9cessit\u00e9. Dans cet article, nous allons vous expliquer en quoi les tests d&rsquo;accessibilit\u00e9 sont importants. Ensuite, nous vous apprendrons comment \u00e9valuer votre site Web en quatre \u00e9tapes. Mettons-nous au travail !<\/p>\n<h2>L&rsquo;importance des tests d&rsquo;accessibilit\u00e9<\/h2>\n<div id=\"attachment_68501\" class=\"wp-caption aligncenter\" style=\"width: 890px;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-68501 with-border\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/accessible-website-example.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/accessible-website-example.png 1354w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/accessible-website-example-300x153.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/accessible-website-example-768x391.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/accessible-website-example-1024x521.png 1024w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/accessible-website-example-610x310.png 610w\" alt=\"The Elegant Themes blog.\" width=\"880\" height=\"448\" aria-describedby=\"caption-attachment-68501\" \/><\/p>\n<p id=\"caption-attachment-68501\" class=\"wp-caption-text\">Plus votre site Web est accessible, plus il sera facile pour tous les types d&rsquo;utilisateurs d&rsquo;y naviguer.<\/p>\n<\/div>\n<p>Les tests d&rsquo;accessibilit\u00e9 consistent \u00e0 \u00e9valuer votre site Web pour s&rsquo;assurer qu&rsquo;il est utilisable par les personnes handicap\u00e9es. Par exemple, si vous utilisez une palette de couleurs qui rend la navigation sur votre site difficile pour un daltonien, un test d&rsquo;accessibilit\u00e9 appropri\u00e9 devrait le d\u00e9tecter.<\/p>\n<p>L&rsquo;objectif premier des tests d&rsquo;accessibilit\u00e9 est de faire en sorte que le plus grand nombre possible de personnes puissent profiter de votre site Web. Toutefois, il ne s&rsquo;agit pas d&rsquo;une d\u00e9marche enti\u00e8rement altruiste, puisque vous en b\u00e9n\u00e9ficiez \u00e9galement. Voici comment :<\/p>\n<ul>\n<li><strong>Ils vous permettent d&rsquo;atteindre des utilisateurs que vous ne pourriez pas atteindre autrement.<\/strong> Plus votre site Web est optimis\u00e9 pour les utilisateurs handicap\u00e9s, plus vous pouvez toucher de personnes. Ces publics peuvent s&rsquo;additionner, m\u00eame s&rsquo;ils ne repr\u00e9sentent qu&rsquo;un faible pourcentage de la population.<\/li>\n<li><strong>C&rsquo;est une preuve de professionnalisme.<\/strong> Peu de gens font un effort suppl\u00e9mentaire en mati\u00e8re d&rsquo;accessibilit\u00e9. Les am\u00e9liorations que vous apportez montrent que vous \u00eates d\u00e9termin\u00e9 \u00e0 offrir une meilleure exp\u00e9rience.<\/li>\n<\/ul>\n<p>Dans la plupart des cas, il n&rsquo;est pas possible de cr\u00e9er un site web accessible \u00e0 tous. Cependant, il <em>est<\/em> possible d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience d&rsquo;un grand nombre de personnes en apportant quelques ajustements simples \u00e0 la conception de votre site.<\/p>\n<p>Avant d&rsquo;entrer dans les d\u00e9tails, nous vous recommandons de jeter un coup d&rsquo;\u0153il aux <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\" target=\"_blank\" rel=\"noopener\">directives d&rsquo;accessibilit\u00e9 au contenu Web (WCAG)<\/a> \u00e9labor\u00e9es par le <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener\">World Wide Web Consortium (W3C)<\/a>. Au cas o\u00f9 vous ne conna\u00eetriez pas le W3C, il s&rsquo;agit d&rsquo;une communaut\u00e9 internationale qui travaille \u00e0 l&rsquo;\u00e9laboration de normes Web pour am\u00e9liorer les exp\u00e9riences.<\/p>\n<p>Pour \u00eatre honn\u00eate, les WCAG peuvent \u00eatre un peu arides \u00e0 lire, mais passer un peu de temps \u00e0 les \u00e9tudier est le meilleur moyen d&rsquo;en savoir plus sur les normes d&rsquo;accessibilit\u00e9. Dans la section suivante, nous allons passer en revue plusieurs \u00e9tapes concr\u00e8tes pour tester et am\u00e9liorer l&rsquo;utilisabilit\u00e9 de votre site Web, et expliquer pourquoi elles sont essentielles.<\/p>\n<h2>Comment \u00e9valuer (et am\u00e9liorer) votre site Web gr\u00e2ce aux tests d&rsquo;accessibilit\u00e9 (en 4 \u00e9tapes)<\/h2>\n<p>Il existe de nombreux outils en ligne que vous pouvez utiliser pour tester rapidement la conformit\u00e9 de votre site Web aux WCAG. Cependant, ces types d&rsquo;outils passent \u00e0 c\u00f4t\u00e9 de beaucoup de choses que vous ne pouvez d\u00e9couvrir qu&rsquo;en effectuant des tests approfondis. Ce sont d&rsquo;excellents points de d\u00e9part, mais leur utilisation ne constitue pas un test d&rsquo;accessibilit\u00e9 <em>appropri\u00e9<\/em>. En gardant cela \u00e0 l&rsquo;esprit, entrons dans le d\u00e9tail.<\/p>\n<h3>\u00c9tape n\u00b0 1 : Testez votre site Web pour d\u00e9tecter les probl\u00e8mes li\u00e9s aux troubles de la vision des couleurs<\/h3>\n<p>Une partie assez importante de la population a des difficult\u00e9s \u00e0 diff\u00e9rencier les couleurs en raison de probl\u00e8mes physiques. Ce handicap est connu sous le nom de daltonisme et il est plus r\u00e9pandu chez les hommes.<\/p>\n<p>Comme vous pouvez l&rsquo;imaginer, le daltonisme peut rendre la navigation sur un site Web difficile dans certains cas. Par exemple, les concepteurs de sites Web utilisent souvent le contraste pour mettre en \u00e9vidence les \u00e9l\u00e9ments essentiels d&rsquo;une page. Une personne daltonienne peut ne pas voir une grande diff\u00e9rence selon les couleurs utilis\u00e9es. Dans certains cas extr\u00eames, les personnes ne peuvent percevoir que des nuances de gris, ce que l&rsquo;on appelle le \u00ab\u00a0monochromatisme complet\u00a0\u00bb.<\/p>\n<p>Naturellement, il est presque impossible de concevoir un site en tenant compte du monochromatisme complet. Ce que vous <em>pouvez <\/em>faire, c&rsquo;est optimiser votre site Web afin qu&rsquo;il soit accessible aux formes les plus courantes de daltonisme, qui visent le rouge et le vert, suivis du bleu et du jaune. La premi\u00e8re \u00e9tape consiste \u00e0 utiliser un outil tel que le <a href=\"https:\/\/www.toptal.com\/designers\/colorfilter\" target=\"_blank\" rel=\"noopener\">filtre de daltonisme Toptal<\/a>, qui vous permet de rendre votre site Web tel qu&rsquo;une personne daltonienne le verrait :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-68502\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/toptal-colorblind-tool.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/toptal-colorblind-tool.png 961w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/toptal-colorblind-tool-300x116.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/toptal-colorblind-tool-768x296.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/toptal-colorblind-tool-610x235.png 610w\" alt=\"The Toptal Color Blind Filter.\" width=\"880\" height=\"340\" \/><\/p>\n<p>Pour utiliser cet outil, il suffit de coller l&rsquo;URL que vous souhaitez tester dans le champ <em>Tapez une URL <\/em>, puis de choisir un filtre dans le menu de droite. Cela inclut des options pour trois types distincts de daltonisme, et une option fourre-tout :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-68503\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/colorblind-comparison.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/colorblind-comparison.png 1318w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/colorblind-comparison-300x97.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/colorblind-comparison-768x247.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/colorblind-comparison-1024x329.png 1024w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/colorblind-comparison-610x196.png 610w\" alt=\"The Toptal Color Blind Filter in action.\" width=\"880\" height=\"283\" \/><\/p>\n<p>Pour obtenir les meilleurs r\u00e9sultats possibles, vous devez rendre la page que vous testez en utilisant chaque filtre s\u00e9par\u00e9ment. Ensuite, v\u00e9rifiez si l&rsquo;un des \u00e9l\u00e9ments de votre page devient plus difficile \u00e0 distinguer pour les utilisateurs souffrant de la forme sp\u00e9cifique de daltonisme. Si vous constatez que certains \u00e9l\u00e9ments doivent \u00eatre retravaill\u00e9s, la cl\u00e9 pour les rendre plus accessibles consiste simplement \u00e0 augmenter leur contraste, ce qui revient souvent \u00e0 choisir les bonnes couleurs.<\/p>\n<h3>\u00c9tape 2 : V\u00e9rifiez les probl\u00e8mes qui affectent les utilisateurs souffrant d&rsquo;une d\u00e9ficience visuelle g\u00e9n\u00e9rale<\/h3>\n<p>Il existe de nombreux handicaps visuels sans rapport avec les couleurs. La myopie, par exemple, entra\u00eene des difficult\u00e9s \u00e0 voir les objets \u00e9loign\u00e9s, ce qui leur donne un aspect flou. La cataracte, quant \u00e0 elle, peut rendre votre vision trouble, comme si vous regardiez \u00e0 travers une fen\u00eatre givr\u00e9e.<\/p>\n<p>Si vous ne pouvez pas vous concentrer sur des \u00e9l\u00e9ments en fonction de leur distance, vous pouvez optimiser la conception d&rsquo;un site Web pour en tenir compte (dans la limite du raisonnable). En revanche, si vous souffrez d&rsquo;une maladie qui obstrue votre vision, il est plus difficile d&rsquo;y faire face.<\/p>\n<p>Cependant, il n&rsquo;existe pas beaucoup d&rsquo;outils permettant de simuler l&rsquo;exp\u00e9rience d&rsquo;un site Web comme si vous souffriez d&rsquo;hyperm\u00e9tropie. Notre favori est une extension <a href=\"https:\/\/www.google.com\/chrome\/browser\/desktop\/index.html\" target=\"_blank\" rel=\"noopener\">Chrome<\/a> appel\u00e9e <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/nocoffee\/jjeeggmbnhckmgdhmgdckeigabjfbddl\" target=\"_blank\" rel=\"noopener\">NoCoffee<\/a>, qui vous permet de placer des filtres sur chaque page que vous voyez et de les modifier autant que vous le souhaitez :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-68504\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/nocoffee-extension.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/nocoffee-extension.png 1225w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/nocoffee-extension-300x123.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/nocoffee-extension-768x314.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/nocoffee-extension-1024x419.png 1024w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/nocoffee-extension-610x249.png 610w\" alt=\"The NoCoffee Chrome extension.\" width=\"880\" height=\"360\" \/><\/p>\n<p>La mauvaise nouvelle est qu&rsquo;il n&rsquo;existe pas d&rsquo;autres outils offrant autant de fonctionnalit\u00e9s que NoCoffee pour les autres navigateurs. Cependant, Google Chrome est disponible sur toutes les grandes plateformes et ses <a href=\"https:\/\/developer.chrome.com\/devtools\" target=\"_blank\" rel=\"noopener\">outils de d\u00e9veloppement<\/a> sont toujours tr\u00e8s utiles.<\/p>\n<p>Une fois que vous avez install\u00e9 l&rsquo;extension, vous pouvez cliquer sur l&rsquo;ic\u00f4ne dans votre menu, puis activer le filtre <em>Flou <\/em>. Ainsi, vous serez en mesure d&rsquo;exp\u00e9rimenter pratiquement ce que les utilisateurs atteints de myopie voient lorsqu&rsquo;ils visitent votre site. Dans la plupart des cas, il n&rsquo;y a que deux choses que vous pouvez faire pour am\u00e9liorer leur exp\u00e9rience :<\/p>\n<ol>\n<li>Faites un meilleur usage du contraste, comme nous l&rsquo;avons \u00e9voqu\u00e9 \u00e0 l&rsquo;\u00e9tape num\u00e9ro un.<\/li>\n<li>Augmentez la taille des caract\u00e8res pour que votre texte soit plus facile \u00e0 lire, m\u00eame pour les personnes souffrant de d\u00e9ficience visuelle.<\/li>\n<\/ol>\n<p>Naturellement, la taille du texte ne peut pas aller bien loin avant d&rsquo;avoir un impact n\u00e9gatif sur la conception de votre site Web. Par exemple, dans cette capture d&rsquo;\u00e9cran, vous pouvez voir les titres de nos articles de blog, mais pas leurs synopsis :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-68505\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/blur-simulation.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/blur-simulation.png 1102w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/blur-simulation-300x166.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/blur-simulation-768x424.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/blur-simulation-1024x566.png 1024w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/blur-simulation-610x337.png 610w\" alt=\"A simulation of the Elegant Themes blog with a blurry filter.\" width=\"880\" height=\"486\" \/><\/p>\n<p>Nous <em>pourrions <\/em>augmenter la taille de ces textes, mais il y a une limite et des rendements d\u00e9croissants. Bien que cela couvre les probl\u00e8mes li\u00e9s au texte, il nous reste les images, ce qui nous am\u00e8ne \u00e0 l&rsquo;\u00e9tape suivante.<\/p>\n<h3>\u00c9tape 3 : ajoutez des attributs descriptifs \u00ab\u00a0Alt\u00a0\u00bb \u00e0 vos images pour les utilisateurs malvoyants<\/h3>\n<p>Les attributs Alt &#8211; <a href=\"https:\/\/yoast.com\/image-seo-alt-tag-and-title-tag-optimization\/\" target=\"_blank\" rel=\"noopener\">ou \u00ab\u00a0balises<\/a> \u00a0\u00bb &#8211; sont des \u00e9l\u00e9ments qui d\u00e9crivent le contenu d&rsquo;une image. Les moteurs de recherche et les lecteurs d&rsquo;\u00e9cran peuvent utiliser ces informations pour d\u00e9terminer le sujet d&rsquo;une image <em>et <\/em>mieux comprendre le contenu qui l&rsquo;entoure.<\/p>\n<p>Plus important encore, le texte alt permet aux utilisateurs malvoyants de comprendre ce que sont les images de votre contenu. Il existe plusieurs navigateurs <a href=\"https:\/\/hellboundbloggers.com\/special-web-browsers-for-visual-impaired-users\/8830\/\" target=\"_blank\" rel=\"noopener\">con\u00e7us<\/a> exclusivement <a href=\"https:\/\/hellboundbloggers.com\/special-web-browsers-for-visual-impaired-users\/8830\/\" target=\"_blank\" rel=\"noopener\">pour ce type d&rsquo;utilisateurs<\/a> et, dans la plupart des cas, ils lisent le contenu \u00e0 voix haute afin que les gens puissent se fier \u00e0 leurs oreilles plut\u00f4t qu&rsquo;\u00e0 leurs yeux.<\/p>\n<p>En bref, toute image que vous ajoutez \u00e0 vos articles et \u00e0 vos pages doit comporter des balises <em>alt <\/em>descriptives. Prenez cette fleur, par exemple :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-68506\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/red-flower.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/red-flower.png 1280w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/red-flower-300x187.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/red-flower-768x478.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/red-flower-1024x638.png 1024w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/red-flower-610x380.png 610w\" alt=\"A red flower in the middle of a field\" width=\"880\" height=\"548\" \/><\/p>\n<p>Si vous \u00e9tiez press\u00e9, vous pourriez simplement taper \u00ab\u00a0une fleur\u00a0\u00bb comme balise alt de l&rsquo;image. Mais il serait bien plus judicieux de choisir une option telle que \u00ab\u00a0Une fleur rouge au milieu d&rsquo;un champ\u00a0\u00bb. Bien s\u00fbr, on ne peut pas \u00eatre trop descriptif, et il y a des cas o\u00f9 une balise alt courte suffira. Toutefois, d&rsquo;une mani\u00e8re g\u00e9n\u00e9rale, des descriptions plus longues am\u00e9lioreront l&rsquo;exp\u00e9rience des utilisateurs malvoyants.<\/p>\n<p>Comme vous le savez peut-\u00eatre, WordPress vous permet de modifier facilement les balises alt de vos images. Il suffit de choisir une image, soit dans votre m\u00e9diath\u00e8que, soit dans un article ou une page, et de cliquer sur le bouton <em>Modifier <\/em>. Sur l&rsquo;\u00e9cran suivant, recherchez le champ <em>Texte Alt <\/em>, et tapez votre description :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-68507\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/alt-text-wordpress.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/alt-text-wordpress.png 895w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/alt-text-wordpress-300x143.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/alt-text-wordpress-768x367.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/alt-text-wordpress-610x292.png 610w\" alt=\"How to add an alt tag to your WordPress images.\" width=\"880\" height=\"421\" \/><\/p>\n<p>Enregistrez les modifications et vous \u00eates pr\u00eat. N&rsquo;oubliez pas que vous devez suivre ce processus pour chaque image de votre site Web. Cela peut sembler \u00eatre beaucoup de travail, mais avec le temps, cela deviendra une seconde nature.<\/p>\n<p>Pour en savoir plus sur la fa\u00e7on dont les attributs HTML peuvent \u00eatre utilis\u00e9s pour am\u00e9liorer l&rsquo;accessibilit\u00e9, consultez notre article sur la fa\u00e7on d&rsquo;utiliser les applications Internet riches accessibles (ARIA) pour am\u00e9liorer votre site Web WordPress.<\/p>\n<h3>\u00c9tape 4 : V\u00e9rifiez les l\u00e9gendes de votre vid\u00e9o<\/h3>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous nous sommes enti\u00e8rement concentr\u00e9s sur les handicaps visuels, car la plupart des sites Web sont consomm\u00e9s par les yeux, pour ainsi dire. Cependant, de nos jours, il est courant que les sites utilisent du contenu vid\u00e9o dans certaines de leurs pages, ce qui soul\u00e8ve la question de la prise en charge des handicaps auditifs.<\/p>\n<p>Dans la plupart des cas, vous ne pouvez pas optimiser la vid\u00e9o pour les personnes souffrant de d\u00e9ficience visuelle. En revanche, vous <em>pouvez <\/em>vous assurer que votre contenu audio est facile \u00e0 comprendre. Certains de vos utilisateurs peuvent \u00eatre malentendants, auquel cas vous devrez recourir aux sous-titres.<\/p>\n<p>L&rsquo;ajout de sous-titres \u00e0 vos vid\u00e9os est le moyen le plus efficace de s&rsquo;assurer que les malentendants peuvent encore tirer le meilleur parti de votre contenu. Toutefois, le sous-titrage complet de vid\u00e9os, m\u00eame courtes, peut repr\u00e9senter un travail consid\u00e9rable. Si c&rsquo;est quelque chose que vous ne pouvez pas faire, vous pouvez toujours essayer des fonctions telles que l&rsquo;<a href=\"https:\/\/support.google.com\/youtube\/answer\/2734796?hl=en-GB\" target=\"_blank\" rel=\"noopener\">outil de sous-titrage de YouTube<\/a>:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-68508\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/youtube-closed-captioning.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/youtube-closed-captioning.png 1135w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/youtube-closed-captioning-300x153.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/youtube-closed-captioning-768x391.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/youtube-closed-captioning-1024x521.png 1024w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/youtube-closed-captioning-610x311.png 610w\" alt=\"YouTube's closed captioning tool in action.\" width=\"880\" height=\"448\" \/><\/p>\n<p>Bien s\u00fbr, si vous avez examin\u00e9 les fonctions de sous-titrage des vid\u00e9os, vous savez que la technologie n&rsquo;est pas parfaite. Cependant, il s&rsquo;agit d&rsquo;une option valable si l&rsquo;alternative est de ne pas avoir de sous-titres. Si vous t\u00e9l\u00e9chargez vos vid\u00e9os sur YouTube, WordPress vous permettra de les int\u00e9grer sur votre site Web en collant leur lien pratiquement n&rsquo;importe o\u00f9 dans vos articles et vos pages :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter wp-image-68509\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/youtube-link.png\" sizes=\"(max-width: 880px) 100vw, 880px\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/youtube-link.png 871w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/youtube-link-300x86.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/youtube-link-768x220.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/01\/youtube-link-610x174.png 610w\" alt=\"Embedding a YouTube video in WordPress.\" width=\"880\" height=\"252\" \/><\/p>\n<p>De cette fa\u00e7on, vos utilisateurs peuvent choisir d&rsquo;activer le sous-titrage s&rsquo;ils en ont besoin. Cependant, gardez \u00e0 l&rsquo;esprit que si une grande partie de votre contenu tourne autour de la vid\u00e9o, il serait sage de commencer \u00e0 chercher des options de sous-titrage d\u00e9di\u00e9es. Ainsi, vous vous assurerez que votre contenu est repr\u00e9sent\u00e9 avec pr\u00e9cision et que les utilisateurs malentendants peuvent en profiter.<\/p>\n<h2>Conclusion<\/h2>\n<p>L&rsquo;accessibilit\u00e9 n&rsquo;est pas un aspect auquel beaucoup de gens pensent lorsqu&rsquo;ils travaillent sur la conception de leur site Web. Il s&rsquo;agit pourtant d&rsquo;un facteur important \u00e0 prendre en compte si vous souhaitez offrir une exp\u00e9rience optimale \u00e0 vos utilisateurs. En outre, rendre votre site Web plus facile \u00e0 utiliser ne profitera pas seulement aux utilisateurs handicap\u00e9s, mais \u00e0 l&rsquo;ensemble de votre public.<\/p>\n<p>La fa\u00e7on la plus efficace de se plonger dans les tests d&rsquo;accessibilit\u00e9 est de consulter les <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\" target=\"_blank\" rel=\"noopener\">WCAG<\/a> pour avoir une id\u00e9e de ce que vous devez viser. Ensuite, suivez ces quatre \u00e9tapes de base pour r\u00e9soudre les principaux probl\u00e8mes d&rsquo;accessibilit\u00e9 que vous pourriez rencontrer :<\/p>\n<ol>\n<li>Testez votre site Web pour les probl\u00e8mes li\u00e9s \u00e0 la d\u00e9ficience visuelle des couleurs.<\/li>\n<li>V\u00e9rifiez les probl\u00e8mes qui pourraient affecter les utilisateurs souffrant d&rsquo;une d\u00e9ficience visuelle g\u00e9n\u00e9rale.<\/li>\n<li>Ajoutez des attributs alt descriptifs \u00e0 vos images.<\/li>\n<li>V\u00e9rifiez les l\u00e9gendes de vos vid\u00e9os.<\/li>\n<\/ol>\n<p><strong>Vous avez des questions sur la fa\u00e7on de rendre votre site Web plus accessible ? Parlons-en dans la section des commentaires ci-dessous !<\/strong><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Beaucoup de gens consid\u00e8rent comme acquis le fait de pouvoir naviguer sur le Web. Bien s\u00fbr, si vous ne souffrez d&rsquo;aucune d\u00e9ficience, la navigation sur les sites Web modernes est une affaire simple. Le probl\u00e8me est que tout le monde ne vit pas le web de la m\u00eame mani\u00e8re. Plus important encore, certains handicaps rendent [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":825655,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[186,1,1551],"tags":[],"class_list":["post-830320","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-non-classifiee","category-tips-tricks-2"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/830320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=830320"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/830320\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/825655"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=830320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=830320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=830320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}