Les médias : bonnes pratiques d’accessibilité et d’éco-conception

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 !

La base des bonnes pratiques d’accessibilité numérique pour les médias

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.

1. Structure HTML sémantique : utilisez des balises appropriées, comme <figure> pour les images, et <audio> ou <video> pour que les lecteurs d’écran puissent interpréter correctement le contenu.
2. Navigation au clavier : pour garantir une bonne navigation, assurez-vous que toutes les fonctionnalités (lecteur vidéo, lecteur audio, etc.) soient accessibles au clavier.
3. Compatibilité avec les lecteurs d’écran : les médias doivent être accessibles et compréhensibles par les lecteurs d’écran. Et ce, que ce soit sur ordinateur ou sur mobile.

La base des bonnes pratiques d’éco-conception pour les médias

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.

1. Éviter le code redondant : pour réduire le nombre de requêtes HTTP et optimiser l’usage des ressources, il faut minimiser les répétitions dans le code.
2. Optimisation des ressources : vous devez réduire la taille des fichiers. Mais attention, il ne faut pas compromettre la qualité visuelle des ressources.
3. Mise en place du lazy loading : l’attribut loading="lazy" permet de différer le chargement des médias. Pour être plus précis, les médias sont chargés quand ils arrivent dans le champ de vision de l’utilisateur. Cette technique améliore le temps de chargement d’une page et réduit les requêtes inutiles.

Et en pratique, comment optimiser les médias pour garantir l’accessibilité et éco-conception ?

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.

1. L’optimisation des images

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".

2. L’optimisation des médias audio et vidéo

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.

3. La gestion des iframes

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 :

• Comment créer des tableaux HTML accessibles à tous ?
• Comment appliquer les bonnes pratiques du GreenIT avec le CMS Drupal ?

Crédit photo : SARINYAPINNGAM