Au même titre que le Responsive Web Design, l'éco-conception et l'accessibilité numérique sont devenues deux éléments importants à prendre en compte lors du développement d’un site Web. En plus de limiter l’empreinte carbone de votre site internet, ces pratiques rendent les sites plus inclusifs et contribuent à leur référencement.
Dans cet article, je vais vous donner les bonnes pratiques d’intégration Web pour intégrer des médias comme les images, les audios, les vidéos ou encore les iframes, tout en respectant les principes d’éco-conception et d’accessibilité numérique. Allez, c’est parti !
Les médias, qu’il s’agisse d’images, de vidéos ou de contenus audio, doivent être pensés pour être inclusifs. Il est important de respecter certaines normes pour offrir une expérience fluide aux utilisateurs en situation de handicap. Je vous ai listé les principales règles à adopter pour garantir une meilleure lisibilité des médias et de la navigation.
Les médias sont très souvent les éléments les plus lourds sur un site Web. Leur optimisation repose sur des pratiques qui visent à réduire leur poids et le nombre de requêtes. Mais il y a une chose qu’il ne faut pas perdre de vue : l’expérience utilisateur.
Pour réussir à conjuguer éco-conception et médias, il existe là aussi des bonnes pratiques.
Maintenant que vous avez un aperçu des bonnes pratiques théoriques d’accessibilité numérique et d’éco-conception des médias, je vous propose de voir concrètement comment les appliquer.
Pour réduire la bande passante et améliorer les performances d’un site Web, l’optimisation des images est un élément fondamental : format, attributs, balises, etc.
Pour commencer, parlons du format de l’image. Je vous recommande le format WebP. En effet, ce format offre une compression efficace tout en conservant une bonne qualité visuelle. Nous verrons plus bas dans l’article que vous pouvez utiliser un autre format d’image.
Pour les attributs, vous devez préciser les attributs width et height. Ils sont nécessaires pour le bon chargement d’une image et pour éviter son repositionnement lors du chargement de la page.
Et pour les balises ? C’est généralement la balise <picture> qui est conseillée pour les images informatives (ex. schéma, illustration). Et pour les images dites de décoration, je vous recommande de conserver la balise <img>.
Maintenant, je vous partage deux exemples de code éco-conçus et accessibles pour des images informatives.
Notez que l’attribut "srcset" donne plusieurs images au navigateur afin que celui-ci charge la meilleure selon la configuration de l’utilisateur.
Même si précédemment, je vous recommandais le format WebP, sachez qu’il existe le format AVIF. Ce format est encore plus performant que le WebP, avec une meilleure compression et une qualité d’image supérieure. Petit bémol tout de même, il n’est pas encore supporté par tous les navigateurs, notamment Safari sur iOS.
En termes de code, voici comment l’utiliser.
Ce code spécifie plusieurs formats pour une image, avec un classement par ordre de préférence d’affichage pour une meilleure performance utilisateur. Le navigateur affichera donc le format le plus approprié en fonction des capacités de l’appareil et des contraintes de connexion.
Dans le cas d’une image dite décorative, c’est-à-dire qu’elle ne comporte pas d’information essentielle, le code pourra être l’un des codes suivants. Avantage pour l’accessibilité numérique, les technologies d’assistance vont ignorer l’image et la lecture sera plus fluide pour l’utilisateur.
Comme vous pouvez le remarquer, la balise <img> contient soit un attribut "alt" vide, soit un aria-hidden="true", soit un role="presentation".
Très souvent utilisés par les services marketing pour promouvoir une entreprise, une offre, ou un produit, voire pour gérer le replay d’un webinaire, etc., ces médias doivent être accessibles à tous. Ici, je vous indique comment rendre un fichier audio et une vidéo accessibles et écoresponsables.
> Les fichiers audio
Afin de rendre le contenu accessible aux personnes sourdes et malentendantes, tous les fichiers audio doivent être accompagnés d’une transcription textuelle. Et pour faire plaisir à votre service marketing, cette retranscription contribue également à l’optimisation SEO de votre page Web.
> Les vidéos
Sur votre site internet, vos vidéos doivent intégrer des sous-titres ou une transcription textuelle. Tout comme pour les audios, ceci favorise la compréhension par des personnes sourdes ou malentendantes.
En termes d’éco-conception, la compression des vidéos est essentielle pour minimiser le temps de chargement et limiter la consommation de bande passante.
Enfin, dernier conseil pour ces deux types de médias, je vous recommande de ne pas les laisser en lecture automatique ou en boucle, mais de prévoir, à minima, des contrôleurs de type boutons lecture/pause. L’idée est de laisser l’utilisateur libre dans sa lecture.
L’utilisation d’iframes peut avoir un impact significatif sur l’empreinte carbone de votre site Web. La raison : les nombreuses requêtes nécessaires à leur affichage.
Pour limiter cet impact, une solution consiste à afficher son contenu avec une façade de type image contenant le bon balisage et à ne charger son contenu qu’au moment où l'utilisateur souhaite y accéder. Cette solution contribue à réduire le temps de chargement de votre page Web tout en minimisant son poids et le nombre de requêtes.
Ce qu’il faut retenir de cet article, c’est qu’il n’y a pas qu’une bonne pratique, mais des bonnes pratiques, pour travailler l’éco-conception et l’accessibilité des médias sur un site internet. Selon vos médias, il existe des solutions, des éléments de code, que vous pouvez intégrer dans le code de votre page Web.
En adoptant ces bonnes pratiques, vous garantissez non seulement une expérience utilisateur inclusive et fluide, mais vous permettez aussi de réduire l’empreinte carbone de vos sites Web.
Vous avez aimé cet article ? Je vous propose deux autres articles sur cette thématique :
Crédit photo : SARINYAPINNGAM