Vidéos
Utiliser une organisation claire et hiérarchisée de l'information pour faciliter la navigation et la compréhension de l'utilisateur.
Utiliser des éléments visuels, tels que des icônes et des couleurs, pour aider à identifier les différentes fonctionnalités et catégories.
Utiliser une typographie claire et facile à lire pour faciliter la lecture de l'information.
Utiliser des commandes facilement identifiables, telles que des boutons et des liens, pour les actions les plus fréquentes.
Fournir des feedbacks visuels et sonores clairs pour les actions de l'utilisateur.
S'assurer que l'interface est accessible pour les utilisateurs ayant des besoins spécifiques, tels que les personnes atteintes de troubles de la vision ou de la mobilité.
Afficher des contrôles de lecture clairs et facilement accessibles, tels que les boutons play/pause, volume, avance rapide et retour rapide.
Fournir un contrôle de la qualité vidéo, permettant à l'utilisateur de régler la qualité vidéo en fonction de la qualité de la connexion Internet.
Afficher les sous-titres, si disponibles, pour aider les utilisateurs sourds et malentendants.
Utiliser des icônes et des libellés clairs pour les différents contrôles et les boutons d'action.
Offrir la possibilité de mettre la vidéo en mode plein écran.
Concevoir l'interface pour qu'elle soit accessible aux utilisateurs malvoyants et aux utilisateurs qui utilisent des lecteurs d'écran.
Il est également important de tenir compte des performances du lecteur vidéo, notamment de la vitesse de chargement et de la consommation de données, pour assurer une expérience utilisateur fluide.
Références
Material Design de Google: https://material.io/
Fluent Design System de Microsoft: https://www.microsoft.com/design/fluent/
Human Interface Guidelines d'Apple: https://developer.apple.com/design/human-interface-guidelines/
https://company-65367.frontify.com/d/i7lybvEDVcJt/radio-canada-style-guide#/bienvenue/introduction
https://drive.google.com/file/d/1Oe_L0PNKHzb0I7SLnS1l-HHqyBwabLZ3/view?usp=sharing
https://docs.google.com/presentation/d/1J4lXoDGbwxWUctY3DmiOqQefMe1_6xtRCc4qqrzD-8o/edit#slide=id.gc2e2136338_0_80
fka 7.1 Contenus vidéo
fka 7.1.1 Prévoir un titre ou un résumé
Pour chaque vidéo, un titre ou un court texte de présentation doivent être prévus à même la console.
On retrouve le titre et le descriptif du contenu vidéo en cliquant sur le bouton i (info).
fka 7.1.2 Prévoir le contrôle de l'avancement et du volume sonore
Les contrôles suivants doivent être prévus sur chaque vidéo :
Contrôles de l’avancement : bouton lecture/pause et bouton stop.
Contrôles du son : bouton activer/désactiver le son et contrôle du volume.
Le contrôle de volume est requis de façon indépendante au contrôle de l’appareil afin de minimiser les risques d’interférence avec des fonctions spécifiques à l’accessibilité, notamment le doublon sonore occasionné par l’activation du lecteur d’écran, par exemple.
💡 Astuces
Il est pertinent d’afficher dans chaque vidéo les informations suivantes :
La position courante.
La durée totale du média.
La progression (indicateur de progression, boutons avance/retour rapide, retour au début, etc.).
Le contrôle d’avancement/pause et le contrôle de son s’affichent dans la barre de contrôle de la console. Un indicateur de progression ainsi que la position courante sur la durée totale du média sont également affichés.
fka 7.1.3 Prévoir l'activation des sous-titres
Un moyen pour afficher et masquer les sous-titres doit être prévu, et ce, pour chaque vidéo.
Les sous-titres doivent restituer à l’aide de texte l’ensemble des contenus audio véhiculés par la vidéo. Ils ne doivent pas être affichés directement dans la vidéo, mais doivent être associés à cette dernière grâce à un fichier de texte indépendant (souvent, un fichier .xml ou .srt).
⚠️ Attention
Chaque fois que des sous-titres sont affichés, le contraste entre le texte et la vidéo en arrière-plan doit être suffisant afin de garantir leur lisibilité. Un style graphique approprié (opacité suffisante ou fond noir, grosseur et couleur de police de caractère adéquate), dont répondre de façon optimale à toutes les situations.
|
|
L’icône de sous-titrage s’affiche dans la barre de contrôle de la console (lorsque disponible). Les sous-titres sont bien contrastés pour garantir leur lisibilité.
fka 7.1.4 Prévoir l'activation de la vidéo description
Un moyen pour activer et désactiver la vidéodescription doit être prévu sur chaque vidéo.
La vidéodescription est l’équivalent des sous-titres pour les personnes aveugles ou malvoyantes. Elle restitue sous forme de voix hors champ les informations qui ne sont véhiculées que par l’image et complète la bande son originale. La vidéodescription doit restituer au format audio l’ensemble des informations qui sont accessibles seulement par l’image.
💬 Remarques
La vidéodescription doit être activée ou désactivée par un bouton ayant l'icône appropriée.
Lorsque disponible, le bouton de la vidéodescription s’affiche dans la barre de contrôle de la console (maquette en développement).
fka 7.1.5 Prévoir un accès à la transcription textuelle intégrale
La transcription textuelle comprend le texte de la vidéodescription, ou lorsque non disponible le texte du sous-titrage. Cette transcription doit restituer à l’aide de textes l’ensemble des informations véhiculées par la vidéo (paroles, messages affichés à l’écran, etc.).
Un moyen d’accéder à cette transcription textuelle intégrale doit être prévu pour chaque vidéo. Un lien « Consulter la transcription textuelle de cette vidéo » sous forme d’accordéon doit figurer sous la console vidéo, avec le crédit de la vidéo. Le style appliqué devra être conforme au style appliqué au corps du texte.
💬 Remarques
Si la transcription textuelle n’est pas disponible, il faut indiquer « La transcription textuelle de cette vidéo n’est pas disponible », avec le crédit de la vidéo.
📝 Ressources