👉️ Rendez votre site accessible Ă tous les utilisateurs en ajoutant des descriptions d’images et en optimisant la navigation
L’accessibilitĂ© est un Ă©lĂ©ment clĂ© pour amĂ©liorer l’expĂ©rience utilisateur sur un site web. En effet, il est important de rendre votre site accessible Ă tous les utilisateurs, y compris ceux qui ont des besoins spĂ©cifiques tels que les personnes malvoyantes ou aveugles. Dans cet article, nous allons vous expliquer comment amĂ©liorer l’accessibilitĂ© de votre site en ajoutant des descriptions d’images et en optimisant la navigation.
Description de l’action :
1. passer en revue les images :
La première Ă©tape pour amĂ©liorer l’accessibilitĂ© de votre site consiste Ă passer en revue toutes les images prĂ©sentes sur votre site. Il est important de s’assurer que chaque image a une description appropriĂ©e qui dĂ©crit son contenu. Pour ce faire, vous pouvez utiliser la balise <alt> (alternative text) pour ajouter une description textuelle Ă chaque image.
Lister les images et vĂ©rifier qu’elles comportent toutes la balise ALT
RĂ©sultat dans le code source de la page (HTML) :
<img src="https://agence-digitaline.fr/wp-content/uploads/2023/06/66f0f4babbc7a6d8a542200dcf2ee8bc.jpg" alt="Un jour, une action 9/21 : Améliorer l'accessibilité - Rendez votre site accessible à tous les utilisateurs en ajoutant des descriptions d'images et en optimisant la navigation" class="" width="1080" height="675">
La balise “alt” des images est utilisĂ©e pour fournir une description alternative du contenu visuel d’une image. Elle est essentielle pour l’accessibilitĂ© web et permet aux utilisateurs ayant une dĂ©ficience visuelle, ou ceux qui utilisent des technologies d’assistance comme les lecteurs d’Ă©cran, de comprendre le contenu des images prĂ©sentes sur un site web.
La balise “alt” doit contenir une description concise et prĂ©cise de l’image, dĂ©crivant son contenu et sa signification. Elle est Ă©galement utile lorsque l’image ne peut pas ĂŞtre affichĂ©e correctement, que ce soit en raison d’un problème de chargement ou de la configuration du navigateur.
En plus d’amĂ©liorer l’accessibilitĂ©, l’utilisation appropriĂ©e de la balise “alt” peut Ă©galement avoir un impact positif sur le rĂ©fĂ©rencement (SEO) d’un site web, car les moteurs de recherche utilisent ces descriptions pour mieux comprendre le contenu de l’image et l’associer aux mots clĂ©s pertinents.
Il est donc recommandĂ© de remplir correctement la balise “alt” pour toutes les images prĂ©sentes sur votre site web, en fournissant des descriptions claires et informatives qui ajoutent de la valeur Ă l’expĂ©rience des utilisateurs.
2. travailler l’accessibilitĂ© de son site :
Il est Ă©galement important de travailler l’accessibilitĂ© globale de votre site web. Cela signifie que vous devez vous assurer que votre site est facilement navigable pour tous les utilisateurs, y compris ceux qui utilisent des technologies d’assistance telles que des lecteurs d’Ă©cran ou des claviers alternatifs. Pour ce faire, vous pouvez utiliser des balises appropriĂ©es telles que <nav> et <header> pour structurer votre contenu et faciliter la navigation.
Voici quelques exemples concrets d’utilisation de balises appropriĂ©es pour structurer le contenu et faciliter la navigation d’un site web :
Utilisation de la balise <nav> :
<nav><ul>
<li><a href="/">Accueil</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/produits">Produits</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Dans cet exemple, la balise <nav> est utilisĂ©e pour regrouper la navigation principale du site. Les liens vers les diffĂ©rentes pages sont placĂ©s Ă l’intĂ©rieur de la balise <ul> (liste non ordonnĂ©e), avec chaque lien reprĂ©sentĂ© par un <li> (Ă©lĂ©ment de liste). Cela crĂ©e une structure claire pour la navigation, permettant aux utilisateurs de trouver facilement les diffĂ©rentes sections du site.
Ce qui donne en affichage visuel :
Utilisation de la balise <header> :
<header>
<h1>Titre principal de la page</h1>
<p>Sous-titre ou description de la page</p>
</header>
Dans cet exemple, la balise <header> est utilisĂ©e pour englober le contenu d’en-tĂŞte de la page. Cela peut inclure le titre principal de la page (<h1>) et une description ou un sous-titre pertinent (<p>). L’utilisation de la balise <header> permet de distinguer clairement les Ă©lĂ©ments d’en-tĂŞte du reste du contenu de la page.
En utilisant des balises appropriĂ©es telles que <nav> et <header>, vous pouvez structurer votre contenu de manière logique et sĂ©mantique, ce qui facilite la navigation pour les utilisateurs et amĂ©liore l’accessibilitĂ© de votre site web.
Notez que les sur WordPress les listes ordonnées son accessibles via cet onglet :              
Il est possible d’utiliser des balises <header> supplĂ©mentaires pour structurer des sections spĂ©cifiques de contenu Ă l’intĂ©rieur de la page. Par exemple, vous pourriez avoir une balise <header> Ă l’intĂ©rieur d’une section pour reprĂ©senter l’en-tĂŞte de cette section particulière. Cependant, il est important de noter que ces balises <header> internes ne doivent pas ĂŞtre confondues avec l’en-tĂŞte principal de la page.
Voici un exemple pour illustrer cela :
<body>
<header>
<!-- En-tĂŞte principal de la page -->
<h1>Titre principal de la page</h1>
<nav>
<!-- Liens de navigation principaux -->
</nav>
</header><section>
<header>
<!-- En-tête de cette section spécifique -->
<h2>Titre de la section</h2>
</header>
<p>Contenu de la section...</p>
</section><section>
<header>
<!-- En-tête d'une autre section spécifique -->
<h2>Titre d'une autre section</h2>
</header>
<p>Contenu de l'autre section...</p>
</section>
</body>
Dans cet exemple, il y a une seule balise <header> pour l’en-tĂŞte principal de la page, et des balises <header> sont utilisĂ©es Ă l’intĂ©rieur des diffĂ©rentes sections pour reprĂ©senter leurs en-tĂŞtes respectifs. Cela permet de structurer le contenu de manière cohĂ©rente et de distinguer les en-tĂŞtes spĂ©cifiques des diffĂ©rentes sections.
Notez que cet exercice est fastidieux et n’est pas natif dans wordpress qui n’inclut pas de balises sections et encore moins de balises header dans les sections. Si vous souhaitez crĂ©er une articulation “propre” il vous faudra soit utiliser un plugin de navigation, soit le faire Ă la main dans l’onglet “texte” de votre Ă©diteur.
Vous pouvez également vous servir des widgets de navigation déjà présents dans WordPress.
Utilisez les widget pour faciliter la navigation sur votre site
 3. Taguer les images :
En plus d’ajouter une description textuelle Ă chaque image, il est Ă©galement important d’utiliser des tags appropriĂ©s pour chaque image. Les tags permettent aux utilisateurs de trouver facilement des images spĂ©cifiques sur votre site web. Pour ce faire, vous pouvez utiliser des balises telles que <H2> et
Enfin, il est important d’optimiser la navigation de votre site web pour les utilisateurs malvoyants ou aveugles. Cela peut ĂŞtre fait en utilisant des balises appropriĂ©es telles que
<figure> et <figcaption> :
<figure><img src="chemin_de_l'image" alt="texte_descriptif"><figcaption>Texte de légende</figcaption></figure>- La balise
<figure>est utilisée pour encapsuler une image et sa légende associée. - La balise
<figcaption>est utilisĂ©e pour dĂ©finir le texte de lĂ©gende de l’image.
Ces balises sont prĂ©sentes dans WordPress quand on clique sur le bouton “Ajouter un mĂ©dia” . Veillez Ă ce que les diffĂ©rentes cases de texte soient bien remplies.
Un jour, une action 9/21 : AmĂ©liorer l’accessibilitĂ© – Rendez votre site accessible Ă tous les utilisateurs en ajoutant des descriptions d’images et en optimisant la navigation
4. Faire des liens vers d’autres pages de votre site (liens internes)
Pour structurer votre contenu et faciliter la navigation, il est recommandĂ© d’utiliser des liens internes pour permettre aux utilisateurs de naviguer facilement entre les diffĂ©rentes sections de votre site. Comme celui-lĂ par exemple : Voir notre article sur le maillage interne
Ce qu’il faut retenir :
En amĂ©liorant l’accessibilitĂ© de votre site web, vous pouvez offrir une expĂ©rience utilisateur plus agrĂ©able Ă tous les utilisateurs, y compris ceux qui ont des besoins spĂ©cifiques. En ajoutant des descriptions d’images et en optimisant la navigation, vous pouvez rendre votre site plus facilement accessible pour tous les utilisateurs. N’oubliez pas de passer en revue toutes les images sur votre site, d’utiliser des tags appropriĂ©s pour chaque image, et d’optimiser la navigation globale de votre site web. En suivant ces Ă©tapes simples, vous pouvez amĂ©liorer l’accessibilitĂ© de votre site web et offrir une expĂ©rience utilisateur plus agrĂ©able Ă tous vos visiteurs.