{"id":83582,"date":"2022-10-06T07:13:04","date_gmt":"2022-10-06T05:13:04","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"},"modified":"2020-09-17T00:18:49","modified_gmt":"2020-09-17T03:18:49","slug":"accessibility-tips-for-web-developers","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/","title":{"rendered":"Conseils d&#039;accessibilit\u00e9 pour les d\u00e9veloppeurs Web"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table des mati\u00e8res<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Basculer la table des mati\u00e8res\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Basculer<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Are-your-UI-components-accessible\" >Vos composants d&#039;interface utilisateur sont-ils accessibles?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Can-your-UI-component-be-used-with-the-keyboard-alone\" >Votre composant d&#039;interface utilisateur peut-il \u00eatre utilis\u00e9 avec le clavier seul?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Using-tabindex\" >Utilisation de tabindex<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Using-autofocus\" >Utilisation de la mise au point automatique<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Adding-keyboard-interaction\" >Ajouter une interaction avec le clavier<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Can-you-use-your-UI-component-with-a-screen-reader\" >Pouvez-vous utiliser votre composant d&#039;interface utilisateur avec un lecteur d&#039;\u00e9cran?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Do-all-components-and-images-have-meaningful-text-alternatives\" >Tous les composants et images ont-ils des alternatives textuelles significatives?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Do-your-components-provide-semantic-information\" >Vos composants fournissent-ils des informations s\u00e9mantiques?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Can-users-understand-everything-without-relying-on-color\" >Les utilisateurs peuvent-ils tout comprendre sans se fier \u00e0 la couleur?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Is-there-sufficient-contrast-between-text-and-images-and-their-background\" >Y a-t-il un contraste suffisant entre le texte et les images et leur arri\u00e8re-plan?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Is-the-moving-or-flashing-content-in-your-components-stoppable-and-safe\" >Le contenu en mouvement ou clignotant de vos composants est-il arr\u00eatable et s\u00fbr?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/#Conclusions\" >Conclusions<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n          L&#039;am\u00e9lioration de l&#039;accessibilit\u00e9 rend votre site plus utilisable par tous.\n        <\/p>\n<p>\n          <time>6 d\u00e9c.2019<\/time><\/p>\n<\/header>\n<p>C&#039;est g\u00e9nial de cr\u00e9er des sites inclusifs et accessibles \u00e0 tous.<br \/>\nIl existe au moins six domaines cl\u00e9s de handicap pour lesquels vous pouvez optimiser:<br \/>\n<strong>visuel<\/strong>, <strong>audience<\/strong>, <strong>mobilit\u00e9<\/strong>, <strong>cognition<\/strong>, <strong>parole<\/strong>, et <strong>neural<\/strong>.<br \/>\nDe nombreux outils et ressources peuvent vous aider ici,<br \/>\nm\u00eame si vous \u00eates totalement nouveau dans l&#039;accessibilit\u00e9 Web.<\/p>\n<p>Plus d&#039;un milliard de personnes vivent avec une forme de handicap.<br \/>\nVous avez peut-\u00eatre \u00e9t\u00e9 dans une pi\u00e8ce bruyante \u00e0 un moment donn\u00e9<br \/>\nessayant d&#039;entendre la conversation autour de toi<br \/>\nou dans des conditions de faible \u00e9clairage en essayant de trouver quelque chose dans l&#039;obscurit\u00e9.<br \/>\nVous souvenez-vous de la frustration que vous avez ressentie face \u00e0 cette circonstance?<br \/>\nImaginez maintenant si cette condition temporaire \u00e9tait permanente.<br \/>\nDans quelle mesure votre exp\u00e9rience sur le Web serait-elle diff\u00e9rente?<\/p>\n<p>Pour \u00eatre accessibles, les sites doivent fonctionner sur plusieurs appareils<br \/>\navec diff\u00e9rentes tailles d&#039;\u00e9cran et diff\u00e9rents types d&#039;entr\u00e9e, tels que les lecteurs d&#039;\u00e9cran.<br \/>\nDe plus, les sites doivent \u00eatre utilisables par le plus large groupe d&#039;utilisateurs,<br \/>\ny compris les personnes handicap\u00e9es.<br \/>\nVoici un exemple de quelques handicaps que vos utilisateurs peuvent avoir:<\/p>\n<div class=\"w-table-wrapper\">\n<table>\n<thead>\n<tr>\n<th>Vue<\/th>\n<th>Audience<\/th>\n<th>Mobilit\u00e9<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<ul>\n<li>Basse vision<\/li>\n<li>C\u00e9cit\u00e9<\/li>\n<li>Daltonisme<\/li>\n<li>Cataractes<\/li>\n<li>\u00e9blouissement du soleil<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Malentendant<\/li>\n<li>Surdit\u00e9<\/li>\n<li>Bruit<\/li>\n<li>Infection de l&#039;oreille<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>L\u00e9sion de la moelle \u00e9pini\u00e8re<\/li>\n<li>Dext\u00e9rit\u00e9 limit\u00e9e<\/li>\n<li>Les mains pleines<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<th>Cognitif<\/th>\n<th>Parole<\/th>\n<th>Neural<\/th>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li>Trouble d&#039;apprentissage<\/li>\n<li>Somnolence ou distraction<\/li>\n<li>Migraine<\/li>\n<li>Autisme<\/li>\n<li>Crise d&#039;\u00e9pilepsie<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Bruit ambiant<\/li>\n<li>Gorge irrit\u00e9e<\/li>\n<li>Obstacle \u00e0 la parole<\/li>\n<li>Incapable de parler<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>D\u00e9pression<\/li>\n<li>ESPT<\/li>\n<li>Trouble bipolaire<\/li>\n<li>Anxi\u00e9t\u00e9<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><strong>Probl\u00e8mes visuels<\/strong> vont de l&#039;incapacit\u00e9 \u00e0 distinguer les couleurs \u00e0 l&#039;absence de vision du tout.<\/p>\n<ul>\n<li>Assurez-vous que le contenu du texte respecte un minimum<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast-contrast\">seuil de rapport de contraste<\/a>.<\/li>\n<li>\u00c9vitez de communiquer des informations<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-without-color\">en utilisant uniquement la couleur<\/a><br \/>\net assurez-vous que tout le texte est<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-scale\">redimensionnable<\/a>.<\/li>\n<li>S&#039;assurer que tous les composants de l&#039;interface utilisateur peuvent \u00eatre utilis\u00e9s avec les technologies d&#039;assistance<br \/>\ntels que les lecteurs d&#039;\u00e9cran, les loupes et les afficheurs braille.<br \/>\nCela implique de s&#039;assurer que les composants de l&#039;interface utilisateur sont balis\u00e9s<br \/>\nde sorte que les API d&#039;accessibilit\u00e9 puissent d\u00e9terminer par programme<br \/>\nles <em>r\u00f4le<\/em>, <em>Etat<\/em>, <em>valeur<\/em>, et <em>Titre<\/em> de n&#039;importe quel \u00e9l\u00e9ment.<\/li>\n<\/ul>\n<p><strong>Conseil:<\/strong> La fonction d&#039;inspection des \u00e9l\u00e9ments dans le d\u00e9veloppeur Chrome, Edge et Firefox<br \/>\ntools affiche une info-bulle des propri\u00e9t\u00e9s CSS<br \/>\nqui comprend une v\u00e9rification rapide du rapport de contraste des couleurs.<\/p>\n<p><img alt='inspect-element-5474631' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/inspect-element-5474631.jpg'><\/p>\n<p>Je vis personnellement avec une basse vision, et je me retrouve souvent \u00e0 zoomer sur des sites,<br \/>\nleurs DevTools et le terminal.<br \/>\nBien que la prise en charge du zoom ne figure presque jamais en t\u00eate des listes de t\u00e2ches des d\u00e9veloppeurs,<br \/>\ncela peut faire toute la diff\u00e9rence pour des utilisateurs comme moi.<\/p>\n<p><strong>Probl\u00e8mes d&#039;audition<\/strong> signifie qu&#039;un utilisateur peut avoir des probl\u00e8mes pour entendre le son \u00e9mis par une page.<\/p>\n<p><img alt='lecteur-d&#039;\u00e9cran-7256747' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/screen-reader-7256747.jpg'><\/p>\n<p><strong>Probl\u00e8mes de mobilit\u00e9<\/strong> peut inclure l&#039;incapacit\u00e9 d&#039;utiliser une souris, un clavier ou un \u00e9cran tactile.<\/p>\n<ul>\n<li>Cr\u00e9ez le contenu de vos composants d&#039;interface utilisateur<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/wai-aria-practices\/#keyboard\">accessible fonctionnellement depuis un clavier<\/a><br \/>\npour toute action, on utiliserait autrement une souris.<\/li>\n<li>Assurez-vous que les pages sont correctement balis\u00e9es pour les technologies d&#039;assistance, y compris<br \/>\nlecteurs d&#039;\u00e9cran, logiciels de commande vocale et commandes de commutation physiques - qui<br \/>\nont tendance \u00e0 utiliser les m\u00eames API.<\/li>\n<\/ul>\n<p><strong>Probl\u00e8mes cognitifs<\/strong> signifie qu&#039;un utilisateur peut avoir besoin de technologies d&#039;assistance<br \/>\npour les aider \u00e0 lire du texte, il est donc important de s&#039;assurer que des alternatives textuelles existent.<\/p>\n<ul>\n<li>\n<p>Soyez attentif lorsque vous utilisez des animations. \u00c9vitez les vid\u00e9os et les animations qui<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#time-limits\">r\u00e9p\u00e9ter<\/a><br \/>\nou flash, ce qui peut causer <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#seizure\">questions<\/a><br \/>\npour certains utilisateurs.<\/p>\n<p>le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2019\/03\/prefers-reduced-motion#too_much_motion_in_real_life_and_on_the_web\"><code>pr\u00e9f\u00e8re le mouvement r\u00e9duit<\/code><\/a><br \/>\nLa requ\u00eate multim\u00e9dia CSS vous permet de limiter les animations<br \/>\net des vid\u00e9os en lecture automatique pour les utilisateurs qui pr\u00e9f\u00e8rent les mouvements r\u00e9duits:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><br><span class=\"token atrule\"><span class=\"token rule\">@media<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">pr\u00e9f\u00e8re le mouvement r\u00e9duit<\/span><span class=\"token punctuation\">:<\/span> reduce<span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token selector\">bouton<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">animation<\/span><span class=\"token punctuation\">:<\/span> rien<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<li>\n<p>\u00c9vitez les interactions<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/no-timing.html\">bas\u00e9 sur le timing<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>Cela peut sembler beaucoup de bases \u00e0 couvrir,<br \/>\nmais nous allons parcourir le processus d&#039;\u00e9valuation<br \/>\npuis en am\u00e9liorant l&#039;accessibilit\u00e9 de vos composants d&#039;interface utilisateur.<\/p>\n<p><strong>Conseil:<\/strong> L&#039;\u00e9quipe d&#039;accessibilit\u00e9 GOV.UK a fait de grands<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/accessibility.blog.gov.uk\/2016\/09\/02\/dos-and-donts-on-designing-for-accessibility\/\">accessibilit\u00e9 \u00e0 faire et \u00e0 ne pas faire affiches num\u00e9riques<\/a><br \/>\npour faire conna\u00eetre les bonnes pratiques au sein de votre \u00e9quipe:<\/p>\n<p><img alt='deux-dont-4261761' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/dos-donts-4261761.jpg'><\/p>\n<h2 id=\"are-your-ui-components-accessible\"><span class=\"ez-toc-section\" id=\"Are-your-UI-components-accessible\"><\/span>Vos composants d&#039;interface utilisateur sont-ils accessibles? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>R\u00e9sum\u00e9 (tl; dr)<\/strong><\/p>\n<p>Lors de l&#039;audit d&#039;accessibilit\u00e9 des composants d&#039;interface utilisateur de votre page, posez-vous les questions suivantes:<\/p>\n<ul>\n<li>\n<p><strong>Pouvez-vous utiliser votre composant d&#039;interface utilisateur uniquement avec le clavier?<\/strong><\/p>\n<p>Le composant g\u00e8re-t-il la mise au point et \u00e9vite-t-il les pi\u00e8ges de la mise au point?<br \/>\nPeut-il r\u00e9pondre aux \u00e9v\u00e9nements de clavier appropri\u00e9s?<\/p>\n<\/li>\n<li>\n<p><strong>Pouvez-vous utiliser votre composant d&#039;interface utilisateur avec un lecteur d&#039;\u00e9cran?<\/strong><\/p>\n<p>Avez-vous fourni des alternatives textuelles pour toute information pr\u00e9sent\u00e9e visuellement?<br \/>\nAvez-vous ajout\u00e9 des informations s\u00e9mantiques en utilisant ARIA?<\/p>\n<\/li>\n<li>\n<p><strong>Votre composant d&#039;interface utilisateur peut-il fonctionner sans son?<\/strong><\/p>\n<p>\u00c9teignez vos haut-parleurs et parcourez vos cas d&#039;utilisation.<\/p>\n<\/li>\n<li>\n<p><strong>Votre composant d&#039;interface utilisateur peut-il fonctionner sans couleur?<\/strong><\/p>\n<p>Assurez-vous que votre composant d&#039;interface utilisateur peut \u00eatre utilis\u00e9 par une personne qui ne peut pas voir les couleurs.<br \/>\nUn outil utile pour simuler le daltonisme est une extension Chrome appel\u00e9e<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/see\/dkihcccbkkakkbpikjmpnbamkgbjfdcn\">VOIR<\/a>.<br \/>\n(Essayez les quatre formes de simulation de daltonisme disponibles.)<br \/>\nVous pourriez \u00e9galement \u00eatre int\u00e9ress\u00e9 par<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/daltonize\/obcnmdgpjakcffkcjnonpdlainhphpgh\">Daltonize<\/a><br \/>\nextension, qui est \u00e9galement utile.<\/p>\n<\/li>\n<li>\n<p><strong>Votre composant d&#039;interface utilisateur peut-il fonctionner avec le mode \u00e0 contraste \u00e9lev\u00e9 activ\u00e9?<\/strong><\/p>\n<p>Tous les syst\u00e8mes d&#039;exploitation modernes prennent en charge un mode de contraste \u00e9lev\u00e9.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/high-contrast\/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=en\">Contraste \u00e9lev\u00e9<\/a><br \/>\nest une extension Chrome qui peut vous aider ici.<\/p>\n<\/li>\n<\/ul>\n<p>Contr\u00f4les natifs (tels que <code><button><\/code> et <code><\/code>)<br \/>\navoir une accessibilit\u00e9 int\u00e9gr\u00e9e par le navigateur.<br \/>\nIls sont focalisables en utilisant le <code>Languette<\/code> cl\u00e9;<br \/>\nils r\u00e9pondent aux \u00e9v\u00e9nements du clavier (comme le <code>Entrer<\/code>, <code>Espace<\/code>et les touches fl\u00e9ch\u00e9es);<br \/>\net ils ont des r\u00f4les, des \u00e9tats et des propri\u00e9t\u00e9s s\u00e9mantiques utilis\u00e9s par les outils d&#039;accessibilit\u00e9.<br \/>\nLeur style par d\u00e9faut doit \u00e9galement r\u00e9pondre aux exigences d&#039;accessibilit\u00e9 r\u00e9pertori\u00e9es ci-dessus.<\/p>\n<p>Composants d&#039;interface utilisateur personnalis\u00e9s<br \/>\n(\u00e0 l&#039;exception des composants qui \u00e9tendent des \u00e9l\u00e9ments natifs comme <code><button><\/code>)<br \/>\nn&#039;ont aucune fonctionnalit\u00e9 int\u00e9gr\u00e9e, y compris l&#039;accessibilit\u00e9,<br \/>\nvous devez donc le fournir.<br \/>\nUn bon point de d\u00e9part lors de la mise en \u0153uvre de l&#039;accessibilit\u00e9<br \/>\nconsiste \u00e0 comparer votre composant \u00e0 un \u00e9l\u00e9ment natif analogue<br \/>\n(ou une combinaison de plusieurs \u00e9l\u00e9ments natifs,<br \/>\nselon la complexit\u00e9 de votre composant).<\/p>\n<p><strong>Conseil:<\/strong> La plupart des outils de d\u00e9veloppement de navigateur prennent en charge l&#039;inspection de l&#039;arborescence d&#039;accessibilit\u00e9 d&#039;une page.<br \/>\nDans Chrome DevTools, ceci est disponible via le <strong>Accessibilit\u00e9<\/strong> onglet dans le <strong>\u00c9l\u00e9ments<\/strong> panneau:<\/p>\n<p><img alt='a11y-arbre-chrome-2315214' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/a11y-tree-chrome-2315214.png'><\/p>\n<p>Firefox a \u00e9galement un <strong>Accessibilit\u00e9<\/strong> panneau:<\/p>\n<p><img alt='a11y-arbre-ff-3157030' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/a11y-tree-ff-3157030.jpg'><\/p>\n<p>Safari expose les informations d&#039;accessibilit\u00e9 dans le <strong>\u00c9l\u00e9ments<\/strong> panneau <strong>Ne donnent pas<\/strong> languette.<\/p>\n<p>Voici une liste de questions que vous pouvez vous poser lorsque vous essayez de rendre vos composants d&#039;interface utilisateur plus accessibles.<\/p>\n<h2 id=\"can-your-ui-component-be-used-with-the-keyboard-alone\"><span class=\"ez-toc-section\" id=\"Can-your-UI-component-be-used-with-the-keyboard-alone\"><\/span>Votre composant d&#039;interface utilisateur peut-il \u00eatre utilis\u00e9 avec le clavier seul? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Id\u00e9alement, assurez-vous que toutes les fonctionnalit\u00e9s<br \/>\ndans votre composant d&#039;interface utilisateur est accessible via le clavier.<br \/>\nLors de la conception de votre exp\u00e9rience utilisateur,<br \/>\npensez \u00e0 la fa\u00e7on dont vous utiliseriez votre \u00e9l\u00e9ment avec le clavier seul<br \/>\net d\u00e9terminez un ensemble coh\u00e9rent d&#039;interactions au clavier.<\/p>\n<p>Tout d&#039;abord, assurez-vous d&#039;avoir une cible de mise au point sensible pour chaque composant.<br \/>\nPar exemple, un composant complexe comme un menu peut \u00eatre une cible de focus dans une page<br \/>\nmais doit ensuite g\u00e9rer le focus en lui-m\u00eame afin que l&#039;\u00e9l\u00e9ment de menu actif soit toujours mis au point.<\/p>\n<figure class=\"w-figure\">\n  <img alt='g\u00e9rer-focus-5142883' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/manage-focus-5142883.png'><figcaption class=\"w-figcaption\">\n    G\u00e9rer la concentration au sein d&#039;un \u00e9l\u00e9ment complexe.<br \/>\n  <\/figcaption><\/figure>\n<h3 id=\"using-tabindex\"><span class=\"ez-toc-section\" id=\"Using-tabindex\"><\/span>Utilisation de tabindex <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>le <code>tabindex<\/code> L&#039;attribut permet de cibler les \u00e9l\u00e9ments et les composants de l&#039;interface utilisateur \u00e0 l&#039;aide du clavier. Les utilisateurs du clavier uniquement et des technologies d&#039;assistance doivent pouvoir mettre l&#039;accent sur les \u00e9l\u00e9ments pour interagir avec eux. Les \u00e9l\u00e9ments interactifs natifs sont implicitement focalisables, ils n&#039;ont donc pas besoin d&#039;un <code>tabindex<\/code> attribut sauf si vous souhaitez modifier leur position dans l&#039;ordre de tabulation.<\/p>\n<p><strong>Il existe trois types de <code>tabindex<\/code> valeurs:<\/strong><\/p>\n<ul>\n<li>\n<p><strong><code>tabindex = &quot;0&quot;<\/code><\/strong> est le plus courant et place l&#039;\u00e9l\u00e9ment dans l&#039;ordre de tabulation naturel (d\u00e9fini par l&#039;ordre DOM).<\/p>\n<\/li>\n<li>\n<p><strong>\u00e0 <code>tabindex<\/code> valeur sup\u00e9rieure \u00e0 0<\/strong> place l&#039;\u00e9l\u00e9ment dans un ordre de tabulation manuel - tous les \u00e9l\u00e9ments de la page avec un signe positif <code>tabindex<\/code> value sont visit\u00e9s dans l&#039;ordre num\u00e9rique avant les \u00e9l\u00e9ments dans l&#039;ordre de tabulation naturel.<\/p>\n<\/li>\n<li>\n<p><strong>\u00e0 <code>tabindex<\/code> valeur \u00e9gale \u00e0 -1<\/strong> fait que l&#039;\u00e9l\u00e9ment soit focalisable par programme, mais pas dans l&#039;ordre de tabulation.<\/p>\n<\/li>\n<\/ul>\n<p>Pour les composants d&#039;interface utilisateur personnalis\u00e9s, utilisez toujours <code>tabindex<\/code> valeurs de 0 ou -1, car vous ne pourrez pas d\u00e9terminer \u00e0 l&#039;avance l&#039;ordre des \u00e9l\u00e9ments sur une page donn\u00e9e - et m\u00eame si vous l&#039;avez fait, l&#039;ordre peut changer. \u00c0 <code>tabindex<\/code> La valeur -1 est particuli\u00e8rement utile pour g\u00e9rer la mise au point au sein de composants complexes comme d\u00e9crit ci-dessus.<\/p>\n<p>Assurez-vous \u00e9galement que la mise au point est toujours visible, que ce soit en autorisant le style de bague de mise au point par d\u00e9faut ou en appliquant un style de mise au point personnalis\u00e9 perceptible. N&#039;oubliez pas de ne pas pi\u00e9ger les utilisateurs de clavier - ils devraient pouvoir \u00e9loigner le focus d&#039;un \u00e9l\u00e9ment en utilisant uniquement le clavier.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Vous pouvez \u00e9galement \u00eatre int\u00e9ress\u00e9 par le roving <code>tabindex<\/code> ou alors <code>descendant activ\u00e9 par l&#039;air<\/code> approches,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/Keyboard-navigable_JavaScript_widgets#Technique_1_Roving_tabindex\">couvert sur MDN<\/a>.<\/p>\n<\/div>\n<h3 id=\"using-autofocus\"><span class=\"ez-toc-section\" id=\"Using-autofocus\"><\/span>Utilisation de la mise au point automatique <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>L&#039;attribut HTML autofocus permet \u00e0 un auteur de sp\u00e9cifier<br \/>\nqu&#039;un \u00e9l\u00e9ment particulier devrait automatiquement prendre le focus<br \/>\nlorsque la page est charg\u00e9e.<br \/>\n<code>mise au point automatique<\/code> est d\u00e9j\u00e0 pris en charge sur<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/forms.html#association-of-controls-and-forms\">tous les contr\u00f4les de formulaire Web<\/a>,<br \/>\ny compris les boutons.<br \/>\nPour mettre au point automatiquement des \u00e9l\u00e9ments dans vos propres composants d&#039;interface utilisateur personnalis\u00e9s,<br \/>\nappeler le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLElement.focus\"><code>se concentrer ()<\/code><\/a> m\u00e9thode,<br \/>\npris en charge sur tous les \u00e9l\u00e9ments HTML qui peuvent \u00eatre cibl\u00e9s<br \/>\n(par example, <code>document.querySelector (&#039;myButton&#039;). focus ()<\/code>).<\/p>\n<h3 id=\"adding-keyboard-interaction\"><span class=\"ez-toc-section\" id=\"Adding-keyboard-interaction\"><\/span>Ajouter une interaction avec le clavier <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Une fois que votre composant d&#039;interface utilisateur est focalisable,<br \/>\nfournir une bonne histoire d&#039;interaction avec le clavier<br \/>\nlorsqu&#039;un composant est focalis\u00e9 en g\u00e9rant les \u00e9v\u00e9nements de clavier appropri\u00e9s.<br \/>\nPar exemple, autorisez l&#039;utilisateur \u00e0 utiliser les touches fl\u00e9ch\u00e9es pour s\u00e9lectionner les options du menu<br \/>\net <code>Espace<\/code> ou alors <code>Entrer<\/code> pour activer les boutons.<br \/>\nL&#039;ARIA <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/wai-aria-practices\/#aria_ex\">guide des mod\u00e8les de conception<\/a><br \/>\nfournit quelques conseils ici.<\/p>\n<p>Enfin, assurez-vous que vos raccourcis clavier sont d\u00e9tectables.<br \/>\nUne pratique courante consiste \u00e0 avoir une l\u00e9gende de raccourci clavier (texte \u00e0 l&#039;\u00e9cran)<br \/>\npour informer l&#039;utilisateur de l&#039;existence de raccourcis.<br \/>\nPar exemple, \u00abAppuyez sur? pour les raccourcis clavier. \u00bb<br \/>\nAlternativement, un indice comme une info-bulle peut \u00eatre utilis\u00e9<br \/>\npour informer l&#039;utilisateur d&#039;un raccourci.<\/p>\n<p>L&#039;importance de la gestion de la concentration ne peut \u00eatre surestim\u00e9e.<br \/>\nUn exemple est un tiroir de navigation.<br \/>\nSi vous ajoutez un composant d&#039;interface utilisateur \u00e0 la page,<br \/>\nvous devez vous concentrer sur un \u00e9l\u00e9ment \u00e0 l&#039;int\u00e9rieur de celui-ci;<br \/>\nsinon, les utilisateurs devront peut-\u00eatre parcourir toute la page pour y acc\u00e9der.<br \/>\nCela peut \u00eatre une exp\u00e9rience frustrante,<br \/>\nAssurez-vous donc de tester le focus pour tous les composants navigables au clavier de votre page.<\/p>\n<p><strong>Conseil:<\/strong> Vous pouvez utiliser <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/puppeteer\/puppeteer\">Marionnettiste<\/a><br \/>\npour automatiser l&#039;ex\u00e9cution des tests d&#039;accessibilit\u00e9 du clavier pour basculer les \u00e9tats de l&#039;interface utilisateur.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medium.com\/walkme-engineering\/web-accessibility-testing-d499a7f7a032\">Ing\u00e9nierie WalkMe<\/a><br \/>\na un excellent guide sur ce que je recommande de lire.<\/p>\n<figure class=\"w-figure\">\n  <img alt='aria-expans\u00e9-9017763' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/aria-expanded-9017763.gif'><br \/>\n<\/figure>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">const<\/span> Cat\u00e9gorie <span class=\"token operator\">=<\/span> <span class=\"token keyword\">attendre<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">.category<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">attendre<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">r\u00f4le<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> Cat\u00e9gorie<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">bouton<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">attendre<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">tabindex<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> Cat\u00e9gorie<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">0<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">attendre<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> la fen\u00eatre<span class=\"token punctuation\">.<\/span>document<span class=\"token punctuation\">.<\/span>activeElement <span class=\"token operator\">===<\/span> elem<span class=\"token punctuation\">,<\/span> Cat\u00e9gorie<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">vrai<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">attendre<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">aria-expanded<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> Cat\u00e9gorie<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">faux<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token keyword\">attendre<\/span> page<span class=\"token punctuation\">.<\/span>keyboard<span class=\"token punctuation\">.<\/span><span class=\"token function\">press<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Space'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">attendre<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">aria-expanded<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> Cat\u00e9gorie<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">vrai<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"can-you-use-your-ui-component-with-a-screen-reader\"><span class=\"ez-toc-section\" id=\"Can-you-use-your-UI-component-with-a-screen-reader\"><\/span>Pouvez-vous utiliser votre composant d&#039;interface utilisateur avec un lecteur d&#039;\u00e9cran? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Environ 1 \u00e0 2% des personnes utilisent un lecteur d&#039;\u00e9cran.<br \/>\nPouvez-vous comprendre toutes les informations importantes<br \/>\net interagir avec le composant en utilisant uniquement le lecteur d&#039;\u00e9cran et le clavier?<\/p>\n<p>Les questions suivantes devraient vous aider \u00e0 aborder l&#039;accessibilit\u00e9 du lecteur d&#039;\u00e9cran.<\/p>\n<h3 id=\"do-all-components-and-images-have-meaningful-text-alternatives\"><span class=\"ez-toc-section\" id=\"Do-all-components-and-images-have-meaningful-text-alternatives\"><\/span>Tous les composants et images ont-ils des alternatives textuelles significatives? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Partout o\u00f9 des informations sur le <em>patate douce<\/em> ou alors <em>objectif<\/em><br \/>\nd&#039;un composant interactif est v\u00e9hicul\u00e9 visuellement,<br \/>\nfournir une alternative textuelle accessible.<\/p>\n<p>Par exemple, si votre <code><\/code> Le composant de l&#039;interface utilisateur affiche uniquement une ic\u00f4ne d&#039;engrenage<br \/>\npour indiquer qu&#039;il s&#039;agit d&#039;un menu de param\u00e8tres,<br \/>\nil a besoin d&#039;une alternative textuelle accessible, telle que \u00abparam\u00e8tres\u00bb,<br \/>\nqui transmet les m\u00eames informations.<br \/>\nSelon le contexte,<br \/>\nvous pouvez fournir une alternative textuelle en utilisant un <code>alt<\/code> attribut,<br \/>\nun <code>\u00e9tiquette aria<\/code> attribut, un <code>aria-labellis\u00e9<\/code> attribut,<br \/>\nou du texte brut dans le DOM Shadow.<br \/>\nVous pouvez trouver des conseils techniques g\u00e9n\u00e9raux dans <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/webaim.org\/resources\/quickref\/\">R\u00e9f\u00e9rence rapide WebAIM<\/a>.<\/p>\n<p>Tout composant d&#039;interface utilisateur qui affiche une image doit fournir un m\u00e9canisme<br \/>\npour fournir un texte alternatif pour cette image, analogue \u00e0 la <code>alt<\/code> attribut.<\/p>\n<h3 id=\"do-your-components-provide-semantic-information\"><span class=\"ez-toc-section\" id=\"Do-your-components-provide-semantic-information\"><\/span>Vos composants fournissent-ils des informations s\u00e9mantiques? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La technologie d&#039;assistance transmet des informations s\u00e9mantiques<br \/>\nqui est autrement exprim\u00e9 aux utilisateurs voyants via des indices visuels<br \/>\ncomme la mise en forme, le style du curseur ou la position.<br \/>\nLes \u00e9l\u00e9ments natifs ont ces informations s\u00e9mantiques int\u00e9gr\u00e9es par le navigateur,<br \/>\nmais pour les composants personnalis\u00e9s, vous devez utiliser<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/WAI\/PF\/aria\/\">ARIA<\/a> pour ajouter les informations.<\/p>\n<p>En r\u00e8gle g\u00e9n\u00e9rale, tout composant qui \u00e9coute un clic de souris ou un \u00e9v\u00e9nement de survol<br \/>\nne devrait pas seulement avoir une sorte d&#039;\u00e9couteur d&#039;\u00e9v\u00e9nements de clavier,<br \/>\nmais aussi un r\u00f4le ARIA et potentiellement des \u00e9tats et attributs ARIA.<\/p>\n<p>Par exemple, une coutume <code><\/code> Le composant d&#039;interface utilisateur peut prendre le r\u00f4le de curseur ARIA,<br \/>\nqui a quelques attributs ARIA connexes: <code>aria-valuenow<\/code>, <code>aria-valuemin<\/code> et <code>aria-valuemax<\/code>.<br \/>\nEn liant ces attributs aux propri\u00e9t\u00e9s pertinentes de votre composant personnalis\u00e9,<br \/>\nvous pouvez permettre aux utilisateurs de technologies d&#039;assistance d&#039;interagir avec l&#039;\u00e9l\u00e9ment,<br \/>\nmodifiez sa valeur et modifiez m\u00eame la pr\u00e9sentation visuelle de l&#039;\u00e9l\u00e9ment en cons\u00e9quence.<\/p>\n<figure class=\"w-figure\">\n  <img alt='curseur-8196398' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/slider-8196398.png' class=\"w-screenshot\"><figcaption class=\"w-figcaption\">\n    Un composant de curseur de plage.<br \/>\n  <\/figcaption><\/figure>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>fancy-slider<\/span> <span class=\"token attr-name\">r\u00f4le<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>slider<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">aria-valuemin<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">aria-valuemax<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>5<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">aria-valuenow<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>2.5<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>fancy-slider<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"can-users-understand-everything-without-relying-on-color\"><span class=\"ez-toc-section\" id=\"Can-users-understand-everything-without-relying-on-color\"><\/span>Les utilisateurs peuvent-ils tout comprendre sans se fier \u00e0 la couleur? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La couleur ne doit pas \u00eatre utilis\u00e9e comme seul moyen de transmettre des informations,<br \/>\ncomme l&#039;indication d&#039;un statut, l&#039;invitation \u00e0 donner une r\u00e9ponse \u00e0 l&#039;utilisateur,<br \/>\nou la visualisation des donn\u00e9es.<br \/>\nPar exemple, si vous avez un graphique \u00e0 secteurs,<br \/>\nfournir des \u00e9tiquettes et des valeurs pour chaque tranche<br \/>\nafin que les utilisateurs malvoyants puissent comprendre les informations<br \/>\nm\u00eame s&#039;ils ne peuvent pas dire o\u00f9 les tranches commencent et se terminent:<\/p>\n<figure class=\"w-figure\">\n  <img alt='camembert-2580594' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/pie-chart-2580594.png'><figcaption class=\"w-figcaption\">Un graphique \u00e0 secteurs accessible. (Du <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/GL\/low-vision-a11y-tf\/wiki\/Informational_Graphic_Contrast_(Minimum)\">Initiative d&#039;accessibilit\u00e9 Web du W3C<\/a>.)<\/figcaption><\/figure>\n<h3 id=\"is-there-sufficient-contrast-between-text-and-images-and-their-background\"><span class=\"ez-toc-section\" id=\"Is-there-sufficient-contrast-between-text-and-images-and-their-background\"><\/span>Y a-t-il un contraste suffisant entre le texte et les images et leur arri\u00e8re-plan? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Tout contenu textuel affich\u00e9 dans votre composant doit respecter les<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-contrast\">seuil de contraste de niveau AA WCAG minimum<\/a>.<br \/>\nPensez \u00e0 proposer un th\u00e8me \u00e0 contraste \u00e9lev\u00e9 qui r\u00e9pond aux<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast7\">seuil AAA plus \u00e9lev\u00e9<\/a>,<br \/>\net assurez-vous que les feuilles de style de l&#039;agent utilisateur peuvent \u00eatre appliqu\u00e9es<br \/>\nsi les utilisateurs ont besoin d&#039;un contraste personnalis\u00e9 ou de couleurs diff\u00e9rentes.<br \/>\nVous pouvez utiliser ceci <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/webaim.org\/resources\/contrastchecker\/\">V\u00e9rificateur de contraste de couleur<\/a><br \/>\ncomme une aide lors de la conception de votre composant.<\/p>\n<h3 id=\"is-the-moving-or-flashing-content-in-your-components-stoppable-and-safe\"><span class=\"ez-toc-section\" id=\"Is-the-moving-or-flashing-content-in-your-components-stoppable-and-safe\"><\/span>Le contenu en mouvement ou clignotant de vos composants est-il arr\u00eatable et s\u00fbr? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Contenu qui bouge, d\u00e9file ou clignote pendant plus de cinq secondes<br \/>\ndevrait pouvoir \u00eatre mis en pause, arr\u00eat\u00e9 ou masqu\u00e9.<br \/>\nEn g\u00e9n\u00e9ral, \u00e9vitez de flasher le contenu.<br \/>\nSi quelque chose doit clignoter, assurez-vous qu&#039;il ne clignote pas plus de trois fois par seconde.<\/p>\n<p>Un certain nombre d&#039;outils sont disponibles pour vous aider \u00e0<br \/>\nd\u00e9bogage de l&#039;accessibilit\u00e9 de vos composants visuels.<\/p>\n<ul>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.deque.com\/products\/axe\/\">Hache<\/a> fournit des tests d&#039;accessibilit\u00e9 automatis\u00e9s<br \/>\npour votre framework ou navigateur de choix.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.deque.com\/blog\/axe-and-attest-integration-puppeteer\/\">Marionnettiste \u00e0 la hache<\/a><br \/>\npeut \u00eatre utilis\u00e9 pour \u00e9crire des tests d&#039;accessibilit\u00e9 automatis\u00e9s.<\/li>\n<li>le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Phare<\/a><br \/>\nLes audits d&#039;accessibilit\u00e9 fournissent des informations utiles pour d\u00e9couvrir les probl\u00e8mes d&#039;accessibilit\u00e9 courants.<br \/>\nLe score d&#039;accessibilit\u00e9 est une moyenne pond\u00e9r\u00e9e de tous les audits d&#039;accessibilit\u00e9<br \/>\nbas\u00e9 sur <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/dequelabs\/axe-core\/blob\/develop\/doc\/rule-descriptions.md\">\u00c9valuations de l&#039;impact sur les utilisateurs d&#039;Ax<\/a>.<br \/>\nPour surveiller l&#039;accessibilit\u00e9 via l&#039;int\u00e9gration continue, voir <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\">Phare CI<\/a>.<\/li>\n<\/ul>\n<p><img alt='lh-a11y-audit-4036737' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/lh-a11y-audit-4036737.png'><\/p>\n<ul>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/tenon.io\/\">Tenon.io<\/a> est utile pour tester les probl\u00e8mes d&#039;accessibilit\u00e9 courants.<br \/>\nTenon offre un support d&#039;int\u00e9gration solide entre les outils de construction, les navigateurs (via des extensions) et m\u00eame les \u00e9diteurs de texte.<\/p>\n<\/li>\n<li>\n<p>Il existe de nombreux outils sp\u00e9cifiques \u00e0 la biblioth\u00e8que et au framework<br \/>\npour mettre en \u00e9vidence les probl\u00e8mes d&#039;accessibilit\u00e9 avec les composants.<br \/>\nPar exemple, web.dev<br \/>\nexplique comment utiliser <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/eslint-plugin-jsx-a11y\">eslint-plugin-jsx-a11y<\/a><br \/>\npour mettre en \u00e9vidence les probl\u00e8mes d&#039;accessibilit\u00e9 des composants React dans votre \u00e9diteur:<\/p>\n<p><img alt='react-a11y-testing-6044405' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/react-a11y-testing-6044405.png'><\/p>\n<p>Si vous utilisez Angular, codelyzer<br \/>\nfournit \u00e9galement des audits d&#039;accessibilit\u00e9 dans l&#039;\u00e9diteur:<\/p>\n<p><img alt='test-angulaire-a11y-2426100' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/angular-a11y-testing-2426100.png'><\/p>\n<\/li>\n<li>\n<p>Vous pouvez examiner la mani\u00e8re dont les technologies d&#039;assistance voient le contenu Web en utilisant<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/library\/archive\/documentation\/Accessibility\/Conceptual\/AccessibilityMacOSX\/OSXAXTestingApps.html#\/\/apple_ref\/doc\/uid\/TP40001078-CH210-SW1\">Inspecteur d&#039;accessibilit\u00e9<\/a> (Mac)<br \/>\nou alors <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windows\/desktop\/dd373661(v=vs.85).aspx\">Outils de test de l&#039;API Windows Automation<\/a><br \/>\net <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/accessibility.linuxfoundation.org\/a11yweb\/util\/accprobe\/\">AccProbe<\/a> (Les fen\u00eatres).<br \/>\nVous pouvez \u00e9galement voir l&#039;arborescence d&#039;accessibilit\u00e9 compl\u00e8te cr\u00e9\u00e9e par Chrome<br \/>\nen acc\u00e9dant \u00e0 <code>chrome:\/\/accessibility<\/code>.<\/p>\n<\/li>\n<li>\n<p>La meilleure fa\u00e7on de tester la prise en charge du lecteur d&#039;\u00e9cran sur un Mac consiste \u00e0 utiliser l&#039;utilitaire VoiceOver.<br \/>\nUtiliser <code>\u2318F5<\/code> pour l&#039;activer ou le d\u00e9sactiver, <code>Ctrl + Option \u2190 \u2192<\/code> se d\u00e9placer dans la page,<br \/>\net <code>Ctrl + Maj + Option + \u2191 \u2193<\/code> pour monter et descendre dans l&#039;arborescence d&#039;accessibilit\u00e9.<br \/>\nPour des instructions plus d\u00e9taill\u00e9es,<br \/>\nvoir le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.apple.com\/voiceover\/info\/guide\/_1131.html\">liste compl\u00e8te des commandes VoiceOver<\/a><br \/>\net le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.apple.com\/voiceover\/info\/guide\/_1131.html#vo27972\">liste des commandes Web VoiceOver<\/a>.<\/p>\n<\/li>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/khan.github.io\/tota11y\/\">tota11y<\/a> est un visualiseur utile<br \/>\npour les probl\u00e8mes de technologie d&#039;assistance cr\u00e9\u00e9s par Khan Academy.<br \/>\nC&#039;est un script qui ajoute un bouton \u00e0 votre document qui d\u00e9clenche plusieurs plugins<br \/>\npour annoter des choses comme un rapport de contraste insuffisant et d&#039;autres violations de tout.<\/p>\n<\/li>\n<li>\n<p>Sous Windows, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.nvaccess.org\/\">NVDA<\/a> est un lecteur d&#039;\u00e9cran gratuit et open source<br \/>\nqui est complet et gagne rapidement en popularit\u00e9.<br \/>\nCependant, notez qu&#039;il a une courbe d&#039;apprentissage beaucoup plus raide pour les utilisateurs voyants que VoiceOver.<\/p>\n<\/li>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/chromelens.xyz\/\">ChromeLens<\/a> aide \u00e0 se d\u00e9velopper pour les malvoyants.<br \/>\nIl prend \u00e9galement en charge la visualisation des chemins de navigation au clavier.<\/p>\n<p><img alt='chromelens-1704496' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/chromelens-1704496.jpg'><\/p>\n<\/li>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.chromevox.com\/\">ChromeVox<\/a> est un lecteur d&#039;\u00e9cran disponible en tant qu&#039;extension Chrome et int\u00e9gr\u00e9 aux appareils ChromeOS.<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"conclusions\"><span class=\"ez-toc-section\" id=\"Conclusions\"><\/span>Conclusions <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nous avons encore un long chemin \u00e0 parcourir pour am\u00e9liorer l&#039;accessibilit\u00e9 sur le Web.<br \/>\nPar le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/almanac.httparchive.org\/en\/2019\/accessibility\">Almanach Web<\/a>:<\/p>\n<ul>\n<li>4 sites sur 5 contiennent du texte qui se fond facilement dans l&#039;arri\u00e8re-plan, ce qui le rend illisible.<\/li>\n<li>49.91% de pages ne parviennent toujours pas \u00e0 fournir <code>alt<\/code> attributs pour certaines de leurs images.<\/li>\n<li>Seuls 24% de pages qui utilisent des boutons ou des liens incluent des \u00e9tiquettes textuelles pour eux.<\/li>\n<li>Seuls 22,33% de pages fournissent des \u00e9tiquettes pour toutes leurs entr\u00e9es de formulaire.<\/li>\n<\/ul>\n<p>Pour en savoir plus sur les principes de base de l&#039;accessibilit\u00e9 et contribuer \u00e0 am\u00e9liorer ces statistiques,<br \/>\nJe recommande l&#039;accessible \u00e0 tous les documents sur web.dev.<br \/>\nNous pouvons faire beaucoup pour cr\u00e9er des exp\u00e9riences plus accessibles \u00e0 tous.<\/p>\n<p><img alt='web-dev-a11y-3820183' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/web-dev-a11y-3820183.jpg'><\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It&#8217;s awesome to build sites that are inclusive and accessible to everyone. There are at least six key&#8230;<\/p>","protected":false},"author":1,"featured_media":83583,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83582","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Accessibility tips for web developers - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It&#039;s awesome to build sites that are inclusive and accessible to everyone.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessibility tips for web developers\" \/>\n<meta property=\"og:description\" content=\"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It&#039;s awesome to build sites that are inclusive and accessible to everyone.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-06T05:13:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Accessibility tips for web developers\",\"datePublished\":\"2022-10-06T05:13:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\"},\"wordCount\":2491,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\",\"name\":\"Accessibility tips for web developers - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"datePublished\":\"2022-10-06T05:13:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"width\":1000,\"height\":420,\"caption\":\"hero-8449472-5278027-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Accessibility tips for web developers - R Marketing Digital","description":"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/","og_locale":"fr_FR","og_type":"article","og_title":"Accessibility tips for web developers","og_description":"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/accessibility-tips-for-web-developers\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-06T05:13:04+00:00","og_image":[{"width":1000,"height":420,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Accessibility tips for web developers","datePublished":"2022-10-06T05:13:04+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"},"wordCount":2491,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/","url":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/","name":"Accessibility tips for web developers - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","datePublished":"2022-10-06T05:13:04+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","width":1000,"height":420,"caption":"hero-8449472-5278027-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=83582"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83582\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/83583"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=83582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=83582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=83582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}