Dernière mise à jour : 21 juillet 2025
La vidéo est un support audiovisuel qui permet de présenter du contenu promotionnel ou informationnel à l’utilisateur.
- Guide d'utilisation
- Design
- Paramètres
- Accessibilité
Utilisation
La vidéo est un moyen de présenter le contenu autrement pour faciliter l’assimilation de l’information, notamment lorsque la page aborde un sujet complexe ou promotionnel.
Il est important de mettre la vidéo en contexte et de l'accompagner d'un résumé afin d'engager l'utilisateur à la visionner. Ceci permet également de communiquer l'essentiel de son contenu, si l'utilisateur décide de ne pas la regarder.
Contexte d'utilisation
On retrouve majoritairement deux types de contenus vidéos sur le site Web :
- Un contenu vidéo promotionnel présente un service, un produit ou tout autre contenu visant une conversion.
- Un contenu vidéo informationnel a pour fonction de vulgariser un contenu plus complexe, en complément au texte de la page.
Variants possibles
1. Vidéo standard
On présente la vidéo standard dans un module qui se divise en deux régions. La première contient la vidéo et la seconde, offrant une navigation par onglets, en communique textuellement les détails. Il s'agit du variant le plus répandu dans le site Web. La vidéo standard peut être présentée seule, en groupe de deux ou encore en séquence.
2. Vidéo en vedette
Ce variant moins répandu permet de présenter une vidéo seule en format pleine page. La vidéo en vedette doit être accompagnée d'un titre, d'une mise en contexte, d'une durée et d'une transcription.
Quand l'utiliser
Pour présenter un contenu vidéo promotionnel.
Lorsque la vidéo constitue le contenu principal de la page.
Note sur l'utilisation
Limiter l'utilisation de la vidéo en vedette à une seule par page.
Quand envisager autre chose
Pour une sélection de vidéos traitant d'une thématique commune, on opte pour la visionneuse vidéo (normes à venir).
À ne pas faire
Intégrer une vidéo dans une page sans la contextualiser.
Mettre en ligne une vidéo sans sous‑titres ni transcription.
Démarrer automatiquement une vidéo. Son visionnement doit être déclenché par une action de l’utilisateur.
Rédaction UX
Contenu
On ne doit pas présumer que l'utilisateur visionnera la vidéo. Il faut donc s'assurer que toute l'information essentielle abordée dans celle‑ci se retrouve aussi textuellement dans la page.
- Une vidéo ou un groupe de vidéos est toujours introduit par une mise en contexte.
- Une mise en contexte commune peut servir à présenter un groupe de vidéos reliées par une thématique.
- Dans le cas d'une vidéo promotionnelle, la mise en contexte prend la forme d'une aguiche captant l'attention de l’utilisateur pour l'inciter à visionner la vidéo.
- Chaque vidéo a un titre qui communique efficacement son sujet.
- La durée est indiquée en italique.
- Pour les vidéos de plus d'une minute, elle est arrondie à la minute près : Vidéo de X minutes.
- Pour les vidéos de moins d'une minute, on écrit la durée exacte : Vidéo de XX secondes.
- L'appel à l'action inscrit sur le bouton de lecture est standardisé. Son libellé est « Visionner », en français, et « Watch », en anglais.
Transcription
La transcription rend le contenu accessible à un maximum d'utilisateurs, c'est pourquoi elle est obligatoire. Elle permet aussi de prendre connaissance du contenu de la vidéo sans même déclencher son visionnement. Règles rédactionnelles pour la transcription.
Nombre de caractères maximal
- Surtitre (facultatif) : un à trois mots maximum
- Titre : 80 caractères, espaces incluses
- Résumé : 300 caractères, espaces incluses
Dans cette page
Bouton de lecture
Anatomie
Taille
Il existe deux tailles pour le bouton de lecture : petite et grande. On opte pour le bouton de petite taille lorsque la largeur de la vidéo est inférieure à 360 px.
Couleurs et styles
On choisit la couleur du bouton de lecture en fonction du contexte d'utilisation de la vidéo et de son environnement. Il faut aussi s'assurer que le contraste entre le bouton et l'image utilisée pour la vignette soit significatif. Vérifier le contraste des couleurs.
Bouton standard
Le bouton standard utilise le bleu d'interactivité (bleu-60).
Bouton d'affichage
Le bouton d'affichage est de couleur orange‑70. Il est utilisé lorsque l'on doit mettre de l'avant un contenu principal.
États interactifs
Voici les états interactifs prévus pour le bouton de lecture de la vidéo :
Défaut
Survol
Clic
Désactivé
Focus
Module vidéo
Anatomie
Deux variants sont proposés pour la vidéo.
Couleurs et styles
Cinq couleurs d'arrière-plans sont possibles pour le module vidéo :
Blanc
#FFFFFF
Gris-bleu-10
#F1F5F8
Bleu-10
#E7F1FC
Bleu-80
#0F096C
Bleu-90
#0A0952
Grille et mise en page
1. Vidéo standard
La vidéo standard est présentée dans un module qui se divise en deux régions. La première contient la vidéo et la seconde communique textuellement des informations en lien avec celle‑ci. La seconde région intègre un menu de navigation présenté en deux onglets : un qui résume les détails de la vidéo et l'autre qui affiche la transcription.
Notes sur la transcription
- On accède à la transcription à partir de l'onglet qui porte le même nom.
- Dans toutes les options de mise en page, la hauteur minimale de la transcription est de 320 px.
- Exception : sur une grille de taille x‑large, la transcription occupe la même hauteur que celle de la vidéo.
- Lorsque le visionnement est déclenché, la transcription défile dynamiquement au même rythme que la vidéo.
Voici les compositions de mises en page possibles sur une grille de 12 colonnes, lorsque l'on présente un seul ou plusieurs modules vidéos.
| Région de gauche | Décalage | Région de droite | Composition abrégée |
|---|---|---|---|
| Image : 7 colonnes | Aucun | Texte : 5 colonnes | 7-5 |
| Image : 6 colonnes | 1 colonne | Texte : 5 colonnes | 6-1d-5 |
| Texte : 5 colonnes | 1 colonne | Image : 6 colonnes | 5-1d-6 |
Les exemples présentés ci‑après sont positionnés sur une grille de taille x‑large.
a. Exemple où le module vidéo est utilisé seul
b. Exemple avec deux modules vidéos
Lorsque l'on juxtapose deux modules vidéos, il est possible de les introduire par un seul titre et la même mise en contexte. Chaque vidéo peut aussi avoir son propre titre et sa mise en contexte.
c. Exemple avec plusieurs modules vidéos
Si on présente plusieurs vidéos, on place les modules les uns en dessous des autres en utilisant toujours la même composition de mise en page. Chaque vidéo doit avoir son propre titre et son propre résumé.
2. Vidéo en vedette
Il existe deux types de mise en page pour ce variant.
a. Module vidéo en haut de page
Ce type de mise en page vise à mettre en vedette la vidéo dans un contexte où elle est l'élément principal de la page ou l'élément qui doit se démarquer en premier.
b. Module vidéo intégré au contenu
Ce type de mise en page permet de présenter l'information qui résume la vidéo au‑dessus du lecteur, mais dans un style qui s'apparente davantage aux autres types de modules que l'on retrouve dans une page.
Notes sur la transcription
- On accède à la transcription en cliquant sur le bouton‑texte portant le même nom, qui est situé en dessous de la vidéo à gauche.
- Lorsque le visionnement est déclenché, la transcription défile dynamiquement au même rythme que la vidéo.
- On referme la fenêtre affichant la transcription en cliquant de nouveau sur ce bouton‑texte.
Paramètres vidéos
Voici des informations complémentaires en lien le composant Vidéo. On y présente les spécifications requises pour les fichiers devant être fournis pour la mise en ligne d'une vidéo, de bonnes pratiques à suivre pour la préparation de ces fichiers et d'autres informations utiles ou intéressantes à savoir.
Un aide-mémoire à l'intention des conseillers et conseillères d'Hydro‑Québec dresse les différentes étapes à suivre pour coordonner le matériel vidéo avec les équipes internes. Demander l'accès à l'aide‑mémoire – Matériel vidéo (interne seulement).
Lecture de la vidéo
- Principes de sobriété numérique
- Hydro‑Québec utilise la plateforme YouTube pour héberger ses vidéos accessibles au grand public. Celles‑ci sont regroupées sur la chaîne officielle d'Hydro‑Québec .
- Pour débuter la lecture d'une vidéo, l'utilisateur doit cliquer sur le bouton « Visionner » afin qu'elle se charge via YouTube.
- La vidéo joue directement dans la page Web d'Hydro‑Québec dans son format d'affichage et n’ouvre pas de modale.
- L’option plein écran est accessible à partir du lecteur vidéo de YouTube.
Indexation sur les moteurs de recherche
Les moteurs de recherche indexent en général une seule vidéo par page. Ils retiennent habituellement la première qui y apparaît. Il est donc recommandé de positionner la plus importante en premier.
Vignette de la vidéo
Une vignette est une image, tirée de la vidéo ou créée sur mesure, qui donne un aperçu significatif du contenu et de sa nature. Il est important de la prévoir et de la produire dès que la vidéo est finale, car elle devra être fournie en même temps que le fichier vidéo.
- La vignette doit être attrayante pour inciter au visionnement.
- Elle doit bien s'harmoniser au design de la page.
- Nos designers se réservent le droit de refuser une image fournie et d'en produire une plus adaptée.
- Ses couleurs et sa définition doivent offrir un niveau de contraste suffisant pour faire ressortir le bouton de lecture de la vidéo. Vérifier le contraste des couleurs.
- La vignette ne doit contenir aucun texte.
Spécifications techniques de la vignette
- Ratio d'image : 16:9
- Dimensions : 1920 px sur 1080 px
- Formats de fichier :
- Pour YouTube : JPEG
- Pour le site Web : WebP (idéal), sinon JPEG est accepté.
Sous-titrage et transcription
Il est obligatoire d'accompagner chaque vidéo de sous‑titres et d’une transcription. Cette bonne pratique permet de rendre le contenu accessible à un maximum de personnes.
Les fichiers finaux contenant les sous‑titres et la transcription doivent être fournis en même temps que ceux de la vidéo et de la vignette.
1. Sous-titrage
Le sous-titrage est une transcription textuelle des dialogues, de la narration et de tout autre élément audio de la vidéo essentiels à la compréhension du contenu.
Il s'adresse aux personnes sourdes, malentendantes, qui ne comprennent pas la langue de la vidéo ou qui souhaitent la visionner sans en activer le son.
Production des sous-titres
Afin de respecter les standards de qualité d'Hydro‑Québec, les sous-titres doivent être produits par nos fournisseurs spécialisés dans ce domaine.
Il ne faut en aucun cas avoir recours aux sous‑titres générés automatiquement par la plateforme YouTube. Cette option ne reconnaît pas assez clairement la langue française parlée au Québec. Dans ce contexte, un sous‑titrage généré automatiquement pourrait afficher des propos inexacts et incompréhensibles pour l'utilisateur.
Les sous-titres sont intégrés manuellement aux paramètres de la vidéo directement dans YouTube, sauf s'ils ont été formatés lors de la production de la vidéo.
Spécifications techniques
Les sous-titres doivent être fournis dans un fichier SRT.
Spécifications obligatoires
- Positionner les sous‑titres centrés dans le bas de l'écran.
- S'assurer que les sous‑titres sont synchronisés avec la bande sonore.
- Marquer chaque changement d'interlocuteur ou d'interlocutrice par un tiret.
- Identifier la personne de dos ou qui ne fait pas partie du cadrage de l'image, si elle parle ou si elle est concernée dans l'action. Les paroles de cette personne doivent être écrites en italique.
- Éviter de mettre les mots en majuscules, sauf si l'on veut signaler que l'on crie.
- Préciser tous les sons pertinents qui sont dits ou entendus et qui donnent un contexte supplémentaire :
- la musique ambiante ou les paroles d'une chanson,
- les paroles et les sons qu'on ne peut visuellement distinguer,
- un changement de voix ou de ton.
- Écrire les mots tels qu'ils sont entendus.
- En sous‑titrage, il arrive parfois que l'on retire ou remplace certains mots pour faciliter la lecture de l'utilisateur, surtout s'il y a trop de redondance et que cela affecte la compréhension du texte. Ces modifications apportées au texte ne doivent cependant pas changer le sens des propos diffusés dans la vidéo.
- Si les propos sont incompréhensibles, inscrire la mention [inintelligible] entre crochets.
Bonnes pratiques
Puisque les sous‑titres défilent dans le bas de l'écran, s'assurer, lors de la production de la vidéo, que les textes en surimpression, par exemple l'identification d'une personne interviewée, sont positionnés ailleurs dans l'écran. Ceci permet à l'utilisateur de les voir simultanément.
Pour un sous‑titrage formaté lors de la production vidéo
Si les sous‑titres sont formatés en production, c'est‑à‑dire qu'il est impossible de les désactiver lors du visionnement, voici quelques règles à suivre pour leur assurer une lisibilité et une clarté optimales.
- Utiliser la police Verdana. Ce type de police, sans empattement, offre une meilleure lisibilité sur un écran numérique.
- Opter pour une taille de typo équivalent à 18 points.
- Afficher un maximum de deux lignes à la fois.
- Limiter chaque ligne à 32 caractères, espaces incluses.
2. Transcription
La transcription décrit textuellement le contenu audio et visuel de la vidéo, incluant les scènes importantes non expliquées verbalement. Elle inclut le sous‑titrage et l'audiodescription en format texte.
Elle s'adresse principalement aux personnes aveugles ou malvoyantes.
- Elle est affichée de façon à reproduire la séquence temporelle de la vidéo.
- Elle peut être consultée sans que soit déclenché le visionnement.
La transcription est codée manuellement lors de l'intégration Web de la vidéo.
Spécifications techniques
La transcription doit être fournie dans un fichier XLS ou CSV (extensions d'Excel).
Règles d'écriture
Afin de faciliter la lecture de la transcription, structurer les informations en sections, en paragraphes ou en listes.
Paroles et textes écrits
Transcrire intégralement ce qui est dit, c'est-à-dire ne pas modifier, adapter ou compléter le texte de la vidéo.
Si les propos sont incompréhensibles, inscrire la mention [inintelligible] entre crochets.
Intégrer à la transcription tous les textes apparaissant dans la vidéo ou affichés en surimpression, par exemple le nom et le titre des personnes présentées ou le lieu.
Personnes participant à la vidéo
Identifier les individus qui prennent la parole par leur nom complet ou par un mot qui les caractérise. Si plus d'une personne partage la même caractéristique, lui attribuer un chiffre, par exemple Narratrice 1, Homme 2.
Si la personne qui parle n'est pas visible à l'écran ou qu'elle est de dos, mettre son discours en italique.
Descriptions audios
Décrire entre crochets [ ] tout visuel de la vidéo qui ajoute un contexte supplémentaire à la compréhension. Il peut s'agir du lieu où se déroule l'action ou de la description d'une scène.
Sons et musique
Sons non vocaux : Les écrire entre parenthèses et en italique. Par exemple :
- (Parole de la chanson)
- (Musique)
- (Hurlement)
Musique de fond : L'indiquer uniquement si elle a une importance dans la compréhension du contenu de la vidéo.
YouTube : Raccourcis au clavier de base
Cette section présente des fonctionnalités propres au lecteur vidéo de YouTube. Elles offrent à l'utilisateur une alternative pour contrôler le visionnement de la vidéo à l'aide du clavier.
Voici les différents raccourcis possibles :
- Touche barre d'espacement et touche K : pour lire ou mettre en pause la vidéo.
- Touche M : pour couper ou rétablir le son.
- Touches fléchées haut et bas : pour augmenter ou diminuer le volume.
- Touches pour avancer et reculer la vidéo :
- Touche J : pour reculer de 10 secondes.
- Touche L : pour avancer de 10 secondes.
- Touches fléchées gauche et droite : pour reculer ou avancer de 5 secondes.
- Touches numériques : pour accéder à une position précise dans la vidéo.
- Par défaut : « 1 » positionne la lecture à 10 % de la vidéo, « 2 » à 20 %, 3 à 30 % et ainsi de suite.
- Si la vidéo contient des chapitres : la touche numérique sélectionnée conduit directement à ce chapitre.
- Touche C : pour afficher ou masquer les sous‑titres.
- Touches Majuscule et + du clavier standard : pour grossir la taille de la police.
- Touches Majuscule et - du clavier standard : pour réduire la taille de la police.
- Touche F : pour activer et désactiver l’affichage en mode plein écran.
Principes d'accessibilité
La vidéo ne doit pas être lue automatiquement ni diffuser un contenu qui clignote plus de trois fois par seconde. L'utilisateur doit être en mesure de la contrôler à partir de fonctionnalités permettant de lire la vidéo, de la mettre en pause, d'en ajuster le volume et de l'afficher en format plein écran.
Durée de la vidéo
La durée de la vidéo est indiquée afin que l'utilisateur ayant des déficiences cognitives ou qui a recours à un lecteur d’écran sache combien de temps il doit allouer au visionnement.
Sous-titrage et transcription
Chaque vidéo intègre des sous-titres. Elle doit également être accompagnée d'une transcription, c'est‑à‑dire d'une audiodescription en format texte décrivant tous les contenus visuels et auditifs, incluant les scènes visuelles importantes non expliquées verbalement. Ce texte permet de rendre la vidéo accessible à un utilisateur aveugle, malvoyant ou ayant des limitations cognitives.
Contraste des couleurs
Puisque le bouton de lecture est positionné sur la vignette de la vidéo, il est important de s'assurer que le niveau de contraste de couleurs entre ces deux éléments est suffisamment élevé. Un contraste insuffisant ne constitue pas une bonne pratique en accessibilité.
Voici deux outils de vérification à installer sur votre ordinateur pour mesurer le niveau de contraste :
1. Analyseur de contraste des (Colour Contrast Analyser (CCA)) – disponible sur le Web*
- Le personnel d'Hydro-Québec doit faire une demande de logiciel CCA sur le Portail de services.
2. WCAG Color contrast – extension Chrome
Interactions au clavier
Touche Tab. : pour atteindre le bouton « Visionner ». Celui‑ci se démarque par un repère visuel lorsqu'il est atteint.
- La combinaison des touches Majuscule et Tab. permet de faire le chemin inverse.
Interactions au clavier spécifiques au lecteur vidéo
- Touche Tab. : pour atteindre tous les éléments interactifs du lecteur vidéo dans un ordre séquentiel logique, soit de gauche à droite et de haut en bas. Ceux‑ci se démarquent par un repère visuel lorsqu'ils sont atteints.
- La combinaison des touches Majuscule et Tab. permet de faire le chemin inverse.
- Touche Entrée ou barre d'espacement, lorsque l'on souhaite déclencher l'action reliée à l'élément atteint :
- Pour démarrer le visionnement de la vidéo ou le mettre en pause.
- Pour afficher ou masquer les sous‑titres.
- Pour activer ou désactiver le son.
- Il existe des raccourcis au clavier propres au lecteur vidéo de YouTube. Ils sont détaillés dans l'onglet Paramètres.
Interactions au lecteur d'écran
- Tout le module vidéo doit se trouver dans une même section de la page, permettant ainsi au lecteur d'écran de lire séquentiellement tous les éléments de celui‑ci.
- Le titre doit être le premier élément perçu par les outils d'adaptation.
- Le bouton « Visionner » ou « Watch » doit avoir un texte de remplacement.
- En français : « Visionner la vidéo » suivi du titre de la vidéo.
- En anglais : « Watch the video » suivi du titre de la vidéo en anglais.
Interactions au lecteur d'écran spécifiques au lecteur vidéo
- Les fonctionnalités du lecteur vidéo (lecture, pause, volume, etc.) doivent être compréhensibles.
- La durée de la vidéo est disponible.
- Une transcription détaillée peut être consultée à partir des touches appropriées.