Améliorer l’accessibilité des images, de l’audio et des vidéos

Conseils pour présenter votre contenu multimédia dans différents formats.

Dernière mise à jour le 12 juin 2023

L’ajout de contenu audio, d’images et de vidéos, également appelé contenu multimédia, est un excellent moyen d’améliorer votre site. Toutefois, réfléchissez à la façon dont ces informations seront perçues par les visiteurs qui ne peuvent pas voir ou entendre entièrement le contenu.

Utilisez ce guide pour en savoir plus sur les différentes manières de présenter votre contenu multimédia aux visiteurs.

Remarque

ce guide est proposé comme ressource pour vous aider à démarrer, mais il ne doit en aucun cas être considéré comme un document juridique. Squarespace ne peut pas vous fournir de conseils sur la conformité de votre site à aucune loi, réglementation et norme spécifiques en matière d’accessibilité du web.

Images

Internet étant un support visuel, les images peuvent jouer un rôle important dans la présentation de votre site. Les éléments tels que le texte de remplacement et la façon dont vous mettez en forme les images animées ou les fichiers GIF ne doivent pas être négligés.

Texte de remplacement

Lorsqu’ils parcourent une page, les lecteurs d’écran identifient les images et lisent le texte de description (texte de remplacement) aux visiteurs. Lorsque vous ajoutez un texte de remplacement, prenez le temps de réfléchir à la raison pour laquelle vous avez utilisé l’image en premier lieu. Par exemple, l’image permet-elle de transmettre des informations ou a-t-elle un but uniquement décoratif ? Que doivent savoir les visiteurs souffrant de déficiences visuelles au sujet de l’image pour avoir accès à toutes les informations accessibles aux visiteurs voyants ?

Une bonne pratique consiste à décrire brièvement l’image comme vous le feriez à un ami par téléphone. Les images purement décoratives, telles que les graphiques séparant le contenu ou les images d’arrière-plan abstraites, ne nécessitent pas de description. Il est important de se rappeler que le texte de remplacement représente le contenu d’une page. Il doit être clair et concis.

À faire
  • Réfléchissez au but de l’image et essayez de transmettre ce sens en 125 caractères maximum.
  • Si l’image a une URL de destination ou toute autre utilisation fonctionnelle, décrivez la fonction. Par exemple, le texte de remplacement d’une image d’un couple de fiancés qui rient qui dirige vers une page avec des photos de fiançailles pourrait être le suivant : Couple de fiancés qui rient. Dirige vers des photos de fiançailles.
  • Pour les images qui nécessitent des descriptions détaillées, telles que les schémas, les graphiques ou les illustrations complexes, incluez une description de l’image à proximité dans le texte de votre site. Vous pouvez également ajouter une page distincte avec une description de l’image, puis ajouter une URL de destination de l’image vers cette page.
 
À ne pas faire
  • Pensez à inclure des expressions comme « une image de » ou « une photo de » dans votre texte de remplacement. Les technologies d’assistance les identifient automatiquement comme des images.
 

Fichiers GIF animés

Vous pouvez ajouter des images animées, ou fichiers GIF, à la plupart des zones de votre site. Vérifiez que vos fichiers GIF animés ne clignotent pas plus de deux fois en une seconde. Ce type de contenu est connu pour provoquer des crises ou d’autres réactions physiques.

Astuce

si votre site utilise la version 7.1, les visiteurs peuvent désactiver certaines fonctionnalités animées via les paramètres de leur appareil. Ainsi, ils rencontreront moins d’animations en visitant votre site. Par exemple, si un utilisateur Mac choisit de réduire les animations à l’écran sur son appareil, les animations que vous aurez activées pour les effets d’arrière-plan ou le motif d’arrière-plan n’apparaîtront pas animées pour ce visiteur.

Vidéos

Lorsque vous ajoutez des vidéos à votre site, gardez ces conseils en tête :

  • Ajoutez des sous-titres synchronisés à l’aide des fonctionnalités de sous-titres codés intégrés pour YouTube et Vimeo. Les spectateurs peuvent ainsi activer ou désactiver les sous-titres dans le bloc Vidéo. Pour en savoir plus sur l’ajout de sous-titres, consultez les articles de YouTube et Vimeo.
  • N’ajoutez pas plus de deux vidéos d’arrière-plan par page. Un trop grand nombre de mouvements peut être problématique pour les personnes souffrant d’hypersensibilité au mouvement.
  • Évitez les contenus qui clignotent trois fois ou plus en l’espace d’une seconde dans votre vidéo.

Audio

Vous pouvez aider les visiteurs souffrant de déficiences auditives à accéder à votre contenu audio, comme les podcasts, en ajoutant une transcription. Pour que vos pages restent organisées, vous pouvez inclure des transcriptions sur les pages hors navigation.

Mouvement

Le mouvement et l’animation peuvent rendre votre site plus interactif et accrocheur. Toutefois,vous devez vous assurer que ces éléments ne désorientent pas les visiteurs. Les choix de design, notamment ceux qui impliquent du mouvement, peuvent avoir une incidence négative sur les personnes sensibles au mouvement. Vous pouvez utiliser les éléments de design suivants de manière subtile ou les éviter complètement pour garantir l’accessibilité totale de votre site.

Effet de parallaxe

Un effet de parallaxe se produit lorsque les éléments d’arrière-plan se déplacent à des vitesses différentes de celles des éléments au premier plan lors du défilement. Lorsque vous utilisez ce type d’effet, tenez compte des besoins des personnes atteintes de troubles vestibulaires.

Les effets de parallaxe peuvent être particulièrement difficiles lorsqu’ils :

  • Occupent beaucoup d’espace
  • Apparaissent derrière ou à proximité du texte
  • Sont nombreux sur une page

Pour désactiver les effets d’image d’arrière-plan, suivez les étapes décrites dans l’article Images d’arrière-plan des sections. Assurez-vous de choisir Aucun comme effet d’image. Si vous utilisez des effets de parallaxe, pensez à les limiter à un par page et à minimiser la taille et la profondeur de chaque effet.

Pour en savoir plus sur la réduction des mouvements et de l’animation sur votre site, consultez l’article Animations à l’échelle du site.

Clignotement

Le contenu dont les couleurs clignotent ou qui changent rapidement peut provoquer des convulsions chez les visiteurs sensibles. Dans la mesure du possible, évitez d’utiliser du contenu qui clignote ou qui change rapidement de couleur et veillez à ce que votre contenu respecte les directives suivantes :

  • Ne clignote pas plus de trois fois en une seconde.
  • Est inférieur aux seuils de clignotement général et de clignotement rouge.

Les seuils de clignotement diffèrent selon la couleur. Les gens sont plus sensibles aux clignotements rouges qu’à n’importe quelle autre couleur.

Vous pouvez utiliser l’outil d’analyse de l’épilepsie due à la photosensibilité du Trace Center pour tester le risque de convulsions et les seuils de clignotement.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.

Améliorer l’accessibilité des images, de l’audio et des vidéos