Fermer

janvier 25, 2023

4 conseils d’accessibilité pour ajouter des vidéos aux sites Web et aux applications

4 conseils d’accessibilité pour ajouter des vidéos aux sites Web et aux applications


La vidéo joue un rôle vital dans les produits numériques pour améliorer l’expérience utilisateur. Cependant, vous devez également vous assurer que vos vidéos sont accessibles. Voici comment procéder !

L’accessibilité du Web est un grand sujet à couvrir. À partir de l’histoire de l’accessibilité à toutes les choses que vous devez faire pour créer des interfaces accessibles, il y a beaucoup à maîtriser.

Ce sur quoi je veux me concentrer aujourd’hui, c’est l’accessibilité vidéo. Parce que même si vous n’êtes peut-être pas celui qui crée des vidéos pour les sites Web ou les applications que vous créez, le contenu vidéo contribue à l’expérience utilisateur globale, et cela est quelque chose dont vous êtes responsable.

Les avantages de rendre les vidéos accessibles

À qui profite l’accessibilité vidéo ?

Pour commencer, des vidéos accessibles permettent de utilisateurs malvoyants pour écouter tout le contenu. Cela inclut les descriptions de tout contenu visuel qui pourrait ne pas être inclus dans l’audio de la vidéo, mais qu’il est important de « voir » afin de comprendre le contexte complet.

Des vidéos accessibles permettent également de utilisateurs malentendants pour lire ce qui est dit à haute voix. Il existe un certain nombre de formats dans lesquels cela peut être livré aux utilisateurs.

L’accessibilité compte aussi pour utilisateurs handicapés moteurs. Sans un lecteur vidéo pouvant être contrôlé par un clavier ou un autre outil d’accessibilité, leur expérience pourrait être entravée.

Il y a aussi le aspect situationnel à l’accessibilité vidéo. Par exemple, si quelqu’un ouvre son téléphone dans un espace public et veut regarder une vidéo, il peut la couper et lire les sous-titres afin de suivre ce qui se passe.

Dernièrement, vos produits numériques bénéficier de vidéos accessibles. L’accessibilité crée une meilleure expérience pour tout le monde, ce qui est excellent pour le référencement. En outre, certains types d’accessibilité (comme les transcriptions) peuvent directement contribuer au classement d’une vidéo et du produit qui lui est associé dans les résultats de recherche.

Conseils d’accessibilité vidéo pour les concepteurs Web

Examinons les quatre choses que vous pouvez faire pour vous assurer que les vidéos que vous placez dans vos produits numériques sont à la fois utiles et utilisables pour tous les utilisateurs :

1. Utilisez un lecteur vidéo accessible

La technologie que vous utilisez pour intégrer des vidéos dans votre site Web ou votre application doit être accessible. Mais l’accessibilité dépend de vous.

Par exemple, Youtube offre un peu d’accessibilité au niveau des légendes et des transcriptions. Cependant, la fonction de génération automatique n’est pas géniale, vous pourriez donc vous retrouver avec des légendes déroutantes et même incorrectes si vous suivez cette voie.

Cela dit, vous avez la possibilité de modifier les sous-titres générés automatiquement sur YouTube. Vous pouvez également les créer pour différentes langues pendant que vous y êtes. Donc, si c’est tout ce dont vous avez besoin en termes d’accessibilité, cela pourrait être le bon lecteur vidéo pour vous.

Cela dit, il existe d’autres options. Par exemple, voici un GIF que j’ai pris à l’intérieur du Gaïa TV application. Leurs vidéos d’entraînement semblent être hébergées par Vimeo :

Un GIF de l'intérieur de l'application Gaiam TV montre comment les utilisateurs contrôlent les sous-titres de leurs vidéos d'entraînement.  Ils peuvent activer les sous-titres, modifier la police, la couleur, l'opacité, l'arrière-plan, etc.

Le lecteur vidéo peut être contrôlé par la souris (ou le doigt dans l’application mobile) ainsi que par tabulation dans les commandes. Il n’y a pas non plus de publicités ennuyeuses dans l’application qui doivent être contournées.

De plus, il dispose d’un ensemble robuste de paramètres de sous-titrage. Les utilisateurs peuvent :

  • Activer et désactiver les sous-titres
  • Changer la famille de police
  • Modifier la couleur, la taille, l’opacité et le style du texte
  • Modifier la couleur et l’opacité de l’arrière-plan
  • Modifier la couleur et l’opacité de la fenêtre de légende

Pour quelque chose comme une application d’entraînement, ces paramètres d’accessibilité peuvent suffire. Les utilisateurs ont la possibilité de suivre les instructeurs en regardant ce qu’ils font, en écoutant leurs instructions ou en lisant les légendes.

Cependant, pour d’autres sites Web et applications, vous aurez peut-être besoin de fonctionnalités plus accessibles à partir de votre lecteur vidéo. Par exemple, vous pouvez ajouter des descriptions audio ou des pistes en langue des signes. Pour les fonctionnalités avancées, vous aurez besoin d’un lecteur spécialisé comme
Joueur capable ou alors OzPlayer.

2. Ajoutez des légendes bien conçues à l’intérieur de la vidéo

Chaque fois que vous intégrez une vidéo avec audio dans votre application, elle doit être accompagnée de sous-titres. Et si votre contenu représente quelque chose qui n’est pas décrit dans la voix off (comme quelqu’un montrant quelque chose sur un tableau blanc ou des statistiques qui apparaissent à l’écran), un fichier de description audio supplémentaire serait également utile.

Que vous utilisiez un outil de génération de sous-titres ou que vous demandiez à un écrivain de les créer pour vous, quelqu’un devra les peaufiner avant d’entrer dans la vidéo.

Un exemple que j’aime est sur le Page Instagram pour Porcinetun chien sourd et aveugle :

Un GIF montre une vidéo de la chaîne @pinkpigletpuppy sur Instagram.  Le propriétaire a téléchargé des sous-titres afin que les utilisateurs qui ne peuvent pas entendre l'audio puissent toujours suivre ce qui est expliqué sur les types de laisses à utiliser pour promener beaucoup de chiens.

Le propriétaire de Piglet est un vétérinaire qui a également un certain nombre de chiots handicapés. L’accessibilité fait donc partie du processus de création de contenu. Des vidéos comme celle ci-dessus où elle explique quels types de laisses elle utilise pour promener de nombreux chiens fournissent toujours des légendes.

Il y a quelques bonnes leçons à suivre ici:

  • Ajoutez des légendes d’une couleur qui se détache clairement de l’arrière-plan. Si le texte seul ne peut pas le faire, un arrière-plan derrière le texte est indispensable.
  • Faites en sorte que les légendes soient aussi courtes que possible. Pas plus d’une phrase ou deux par écran.
  • Synchronisez les sous-titres avec l’audio ainsi que ce qui est représenté visuellement.
  • Laissez-les à l’écran aussi longtemps qu’il faut pour que l’orateur finisse de les prononcer.
  • Lorsque cela a du sens, ajoutez des sous-titres qui décrivent des sons autres que des dialogues qui sont pertinents et fournissent plus de contexte pour comprendre la vidéo.

Pour affiner davantage vos sous-titres, je vous recommande de corriger les erreurs grammaticales parlées afin que les utilisateurs puissent les lire plus rapidement et plus facilement. Vous pouvez également inclure ou exclure des sous-titres pour les voix de fond selon qu’ils s’ajoutent ou non à la vidéo.

3. Créez des transcriptions lorsque cela a du sens

Il existe plusieurs façons d’ajouter une transcription à une vidéo lorsqu’elle se trouve dans le contexte d’un site Web ou d’une application. Tout dépend du type de transcription dont vous avez besoin, si vous en avez besoin. Je dirais que quelque chose comme l’exemple de Gaiam TV ci-dessus n’en a pas besoin. Les utilisateurs peuvent suffisamment suivre les vidéos d’entraînement via les instructions visuelles, les explications audio ou les légendes.

Lorsque cela est nécessaire, voici quelques façons de le présenter :

Sous forme de barre latérale horodatée :

Vous trouverez un exemple de cela à l’intérieur de YouTube. Voici à quoi ressemble la fonctionnalité à côté de celle de Nerdwriter1 « Comment James Gandolfini navigue dans l’émotion » vidéo:

Un GIF tiré du compte YouTube de Nerdwriter1.  La vidéo s'intitule

La transcription semble être générée à partir du même outil qui crée les sous-titres. C’est pourquoi il n’est pas correctement formaté avec les cas, la ponctuation et autres. Mais ça va. Vous avez toujours une idée de la façon dont une transcription horodatée à côté d’une vidéo peut aider les utilisateurs à suivre le contenu audio.

Cela peut être amélioré en ajoutant les noms des haut-parleurs individuels ainsi que des notes concernant les sons sans dialogue comme la musique, les bruits de fond, etc. Cela n’est cependant nécessaire que si cela améliore la compréhension du contenu. Si ce n’est pas le cas, une transcription textuelle de base peut suffire.

Sous forme de transcription sur la page :

Une autre option consiste à ajouter une transcription écrite directement sous la vidéo. Il n’a pas besoin d’être horodaté ni de fournir des détails supplémentaires sur les haut-parleurs, les bruits, etc., tant qu’il n’y a qu’un seul haut-parleur et que le contenu est linéaire et direct.

Il existe plusieurs façons de présenter ce type de transcription. Une option consiste à faire comme Moz avec son Messages du vendredi sur le tableau blanc et de retranscrire mot à mot la vidéo :

Dans ce GIF, nous voyons un exemple de la façon dont Moz place une transcription écrite de ses vidéos Whiteboard Friday sous son lecteur vidéo intégré.  Cette publication vidéo s'intitule

Non seulement la transcription finit par sembler aussi naturelle et conversationnelle que la vidéo, mais elle est bien formatée avec des en-têtes pour diviser les choses. Cela permettra aux gens de lire plus facilement la transcription, et c’est également excellent pour le référencement.

Pour les pages Web contenant des vidéos pédagogiques ou marketing, vous avez une autre option. Voici un exemple de la Page Comment ça marche sur le site Web de Sidecar Health:

Un GIF montre un utilisateur faisant défiler la page Comment ça marche sur le site Web de Sidecar Health.  Cela commence par une vidéo ouverte, puis suit le processus étape par étape d'utilisation de l'alternative à l'assurance maladie.

La vidéo en haut de cette page explique comment Sidecar Health fonctionne comme alternative à l’assurance maladie. La vidéo dure 1:14 et la femme qui y figure fait un bon travail en décrivant le fonctionnement du processus. Il y a même des légendes intégrées dans la vidéo qui expliquent tout.

Si les utilisateurs sautent la vidéo ou font défiler la page après l’avoir terminée, ils vont rencontrer ce qui semble être une page traditionnelle de comment ça marche. Cependant, la page résume exactement le même processus que celui décrit dans la vidéo, mais de manière plus succincte et dans un format optimisé pour le référencement. C’est essentiellement une transcription de la vidéo sans s’appeler ainsi.

4. Examinez le contenu de la vidéo

Comme je l’ai déjà dit, vous n’êtes probablement pas le vidéaste d’origine qui a créé ce contenu pour votre site Web ou votre application. Cependant, si vous avez votre mot à dire sur les vidéos incluses dans le produit ou si vous pouvez repousser le créateur, vous devez absolument le faire si vous remarquez des problèmes avec le contenu de la vidéo.

Maintenant, les conseils 1 à 3 ci-dessus concernent les vidéos descriptives, celles qui aident à la narration et fournissent un contexte et un support pour le contenu visuel et textuel environnant. Cette astuce, cependant, s’applique à toute vidéo que vous mettez sur votre site Web. Y compris des vidéos d’arrière-plan comme celle que nous voyons dans la section héros sur le Site Internet de Yellow Pepper:

Un GIF montre la page d'accueil du site YellowPepper.  Nous pouvons voir une vidéo d'arrière-plan décorative qui ressemble à des cordes blanches tourbillonnantes et ondulantes - semblables à une toile d'araignée.  En haut de la vidéo, il est écrit

L’accessibilité vidéo va au-delà de la fourniture d’alternatives textuelles pour la vidéo ou l’audio, et d’alternatives audio pour les visuels. Lorsque vous évaluez des vidéos descriptives et décoratives, pensez aux points suivants :

  1. Y a-t-il des mouvements erratiques ou pulsés dans la vidéo qui peuvent causer des problèmes aux utilisateurs souffrant de troubles neurologiques ?
  2. Le son de la vidéo est-il lu automatiquement lorsque quelqu’un accède à la page ? Peut-il être facilement désactivé ?
  3. Le paramètre par défaut de la légende offre-t-il un bon contraste des couleurs, même pour une personne malvoyante ou daltonienne ?
  4. Y a-t-il des modèles dans la vidéo qui peuvent être difficiles ou distrayants pour certains utilisateurs et les empêcher de comprendre le reste du contenu ?
  5. Des traductions ont-elles été fournies pour l’audio, les sous-titres ou les transcriptions lorsque vous vous adressez à un public international et multilingue ?
  6. La qualité globale de la vidéo et de l’audio est-elle élevée, ou les utilisateurs auront-ils du mal à en comprendre certaines parties ?
  7. Le sujet est-il exclusif et uniquement pertinent ou facile à comprendre par un petit segment d’utilisateurs ?

Si vous remarquez des problèmes majeurs avec l’une des vidéos qui vous sont fournies, parlez-en au créateur ou demandez à la personne qui vous a fourni le contenu de le remplacer. S’il s’agit d’une vidéo d’archives, vous pouvez rechercher des alternatives par vous-même, en utilisant les conseils ci-dessus pour vous assurer que ce que les gens voient et entendent est conforme aux bonnes pratiques d’accessibilité.

Emballer

Afin de vous assurer que votre produit est utilisable et utile, vous devez porter une attention particulière à l’accessibilité vidéo et savoir quoi faire s’il manque quelque chose. Dans cet article, nous avons examiné les quatre choses que vous pouvez faire pour vous assurer que votre contenu multimédia – et le produit numérique dans son ensemble – peut facilement être utilisé et consommé par chaque utilisateur.






Source link