Accessibilité multimédia – Comment vérifier en C#

Multimédia accessible

L’accessibilité multimédia du web consiste à s’assurer que le contenu multimédia, tel que les vidéos, les fichiers audio et les présentations interactives, est accessible à tous les individus, y compris les personnes handicapées. Le contenu multimédia est très répandu sur l’internet et tout le monde doit pouvoir accéder à l’information transmise et la comprendre. Les médias accessibles doivent répondre à tous les besoins des personnes handicapées et doivent inclure :

Les légendes sont des versions textuelles du contenu audio synchronisées avec la vidéo. Elles sont essentielles pour les personnes sourdes ou malentendantes et profitent également aux personnes qui apprennent une nouvelle langue ou qui se trouvent dans un environnement bruyant.
Les transcriptions sont des transcriptions textuelles du contenu parlé d’un fichier vidéo ou audio qui permettent aux utilisateurs d’accéder à l’information sous forme de texte. Ces transcriptions sont précieuses pour les personnes qui ne peuvent pas entendre le contenu audio et pour l’optimisation des moteurs de recherche.
Les descriptions audio sont des narrations qui décrivent le contenu visuel d’une vidéo ou d’une présentation. Elles sont essentielles pour les personnes aveugles ou malvoyantes et les aident à comprendre les éléments visuels du contenu.
Les commandes du lecteur sont des commandes accessibles qui permettent aux utilisateurs de mettre en pause, de lire, de revenir en arrière et de régler le volume à l’aide de raccourcis clavier ou de technologies d’assistance.
On parle d’accessibilité au clavier lorsque les éléments interactifs d’un contenu multimédia sont navigables et utilisables à l’aide d’un clavier. Cela inclut les boutons, les liens et les menus.

Le multimédia accessible est adapté aux technologies d’assistance. Cela signifie que les non-voyants n’ont plus besoin de compter sur les autres pour leur faire la lecture. Il leur suffit d’ouvrir le navigateur et d’interagir avec le contenu par elles-mêmes, car les logiciels de lecture d’écran sont conçus pour lire le contenu en ligne à haute voix.

Sans sous-titre pour un fichier audio, les personnes sourdes ne peuvent pas reconnaître les informations significatives que le fichier audio transmet. Mais les sous-titres, s’ils sont bien écrits et synchronisés avec le contenu audio, fournissent des descriptions de détails visuels et d’actions critiques dans le multimédia.

Nous avons déjà expliqué comment vérifier le texte alt des images, des boutons et d’autres éléments dans l’article Accessibilité pour les lecteurs d’écran. Ici, nous allons examiner l’importance de l’utilisation d’un élément <track> pour l’accessibilité multimédia.

l’élément `<track>` pour fournir des descriptions audio et vidéo

Le contenu vidéo ne peut être vu par les malvoyants et le contenu audio ne peut être entendu par les malentendants. L’objectif principal de l’élément <track> est de fournir des sous-titres pour les contenus vidéo et audio. Bien qu’il ne soit pas destiné à fournir directement des descriptions audio, il peut être utilisé en conjonction avec d’autres méthodes pour mettre des descriptions audio à la disposition des personnes souffrant de déficiences visuelles.

Sous-titres pour les vidéos

L’utilisation du texte alt de la vidéo n’est pas une pratique standard ou recommandée en HTML. L’attribut alt est principalement utilisé pour fournir un texte alternatif pour les images et n’est pas destiné aux éléments <video>. Cependant, il existe d’autres approches pour rendre le contenu vidéo accessible.

Les légendes de la vidéo comprennent une description textuelle de tous les bruits de fond et autres sons essentiels, ainsi que le texte de tous les dialogues et de la narration. L’élément <video> doit inclure un élément <track> avec la propriété kind="captions". Les légendes doivent transmettre toutes les informations auditives pertinentes de la vidéo, y compris les dialogues, les repères musicaux, les effets sonores et d’autres données essentielles pour les utilisateurs sourds.

Voici comment vous pouvez utiliser l’élément <track> pour l’accessibilité multimedis :

1<video poster="myvideo.png" controls>
2    <source src="myvideo.mp4" srclang="en" type="video/mp4">
3    <source src="myvideo.webm" srclang="fr" type="video/webm">
4    <source src="myvideo.webm" srclang="ua" type="video/webm"> 
5    <track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
6    <track src="myvideo_fr.ttml" kind="captions" srclang="fr" label="French">
7    <track src="mvideo_ua.vtt" kind="captions" srclang="ua" label="Ukrainian">
8</video>

Examinons la ligne 5 du code HTML. L’attribut src de l’élément <track> spécifie le nom du fichier de la piste et pointe vers le fichier WebVTT (“myvideo_en.vtt”) contenant les sous-titres. L’attribut kind décrit le contenu du fichier. L’attribut srclang spécifie la langue du fichier de piste. L’attribut label spécifie le nom de la piste. Aucun de ces attributs, à l’exception de src, n’est obligatoire. Cependant, ils sont fortement recommandés car ils améliorent la clarté.

Sous-titres pour l’audio

Veillez à ce que tous les éléments à contenu audio du site Web soient accompagnés d’une légende en utilisant l’élément <track> avec la propriété kind="captions". Les sous-titres sont des textes synchronisés avec le fichier audio – du dialogue, de la narration et de toute information auditive importante – à l’intention des utilisateurs sourds. Le code suivant montre comment ajouter deux pistes différentes – une en anglais et une en espagnol :

1<audio>
2   <source src="mySpeech.mp3" type="audio/mp3">
3   <track src="captions_en.vtt" kind="captions" srclang="en" label="english_captions">
4   <track src="captions_es.vtt" kind="captions" srclang="es" label="spanish_captions">
5</audio>

Description audio pour les éléments `<video>`

L’ajout de descriptions audio aux éléments <video> est une pratique d’accessibilité cruciale, qui permet aux personnes souffrant de déficiences visuelles de comprendre et d’apprécier pleinement le contenu vidéo. Si les personnes aveugles peuvent entendre sans problème le contenu audio des vidéos, les aspects visuels des films, tels que les expressions faciales et les scènes, leur échappent. Dans les films, il se passe beaucoup de choses qui sont entièrement visuelles, sans aucune composante auditive. Par exemple, une personne peut avoir une expression faciale mais ne pas parler. Les audiodescriptions fournissent des informations narrées sur les éléments visuels d’une vidéo, tels que les scènes, les actions et les gestes.

Le code suivant montre comment ajouter deux descriptions audio différentes, l’une en anglais et l’autre en espagnol :

1<video width="300" height="200">
2    <source src="myVideo.mp4" type="video/mp4">
3    <track src="audio_desc_en.vtt" kind="descriptions" srclang="en" label="english_description">
4    <track src="audio_desc_es.vtt" kind="descriptions" srclang="es" label="spanish_description">
5</video>

Vérifier l’accessibilité multimédia avec Aspose.HTML

Pour vérifier si votre site web répond aux critères d’accessibilité multimédia, vous devez suivre les étapes suivantes :

Utilisez le constructeur WebAccessibility() pour créer une instance de la classe WebAccessibility responsable de la validation de l’accessibilité du web.
Utilisez la propriété Rules de l’objet webAccessibility qui donne accès à une collection de règles d’accessibilité du web.
- Appelez la méthode GetPrinciple() de la classe AccessibilityRules et la méthode GetGuideline() de la classe Principle pour obtenir le principe requis par le code de WCAG.
Appelez la méthode CreateValidator() pour créer un objet validateur. Il s’agit essentiellement de configurer un validateur qui vérifiera le contenu web en fonction des lignes directrices spécifiques en matière d’accessibilité et des critères de réussite associés à la ligne directrice que vous avez spécifiée.
Charge un document HTML en utilisant l’un des constructeurs HTMLDocument().
Utilisez la méthode Validate(document) pour vérifier l’accessibilité du document HTML. Le résultat est stocké dans la variable validationResult.
Vérifier si la validation a réussi. Imprimer les informations détaillées sur les erreurs, y compris l’élément HTML associé.

Dans cet exemple, vous pouvez vérifier qu’un document HTML respecte tous les critères de la ligne directrice “1.2 Time-based Media”.

 1// Validate HTML for multimedia accessibility using C#
 2
 3// Initialize a webAccessibility container
 4WebAccessibility webAccessibility = new WebAccessibility();
 5
 6// Get from the rules list Principle "1.Perceivable" by code "1" and get guideline "1.2 Time-based Media"
 7Guideline guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.2");
 8
 9//Create an accessibility validator, pass the found guideline as parameters, and specify the full validation settings
10AccessibilityValidator validator = webAccessibility.CreateValidator(guideline, ValidationBuilder.All);
11
12// Initialize an HTMLDocument object
13using (HTMLDocument document = new HTMLDocument("https://www.youtube.com/watch?v=Yugq1KyZCI0&t=4s"))
14{
15    // Check the document
16    ValidationResult validationResult = validator.Validate(document);
17
18    // Checking for success
19    if (!validationResult.Success)
20    {
21        // Get all result details
22        foreach (RuleValidationResult ruleResult in validationResult.Details)
23        {
24            // If the result of the rule is unsuccessful
25            if (!ruleResult.Success)
26            {
27
28                // Get an errors list
29                foreach (ITechniqueResult result in ruleResult.Errors)
30                {
31                    // Check the type of the erroneous element
32                    if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
33                    {
34                        HTMLElement rule = (HTMLElement)result.Error.Target.Item;
35                        Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
36                        Console.WriteLine("HTML Element: {0}", rule.OuterHTML);
37                    }
38                }
39            }
40        }
41    }
42}

Example-ValidateMultimediaAccessibility.cs hosted with ❤ by GitHub

Pour vérifier, par exemple, la présence de l’audiodescription, vous devez sélectionner le critère souhaité et effectuer une vérification sur celui-ci.

 1    // Get from the rules list Principle "1.Perceivable" by code "1" and get guideline "1.2 Time-based Media"
 2    var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.2");
 3
 4    // Get criterion – 1.2.3 Audio Description or Media Alternative (Prerecorded)
 5    var criterion = guideline.GetCriterion("1.2.3");
 6    
 7    // Create an accessibility validator – and pass the found guideline as parameters and specify the full validation settings
 8    var validator = webAccessibility.CreateValidator(criterion, ValidationBuilder.All);
 9
10    ...

N’oubliez pas que l’essentiel est de veiller à ce que les utilisateurs handicapés puissent accéder au contenu multimédia et en comprendre le contexte de manière efficace. La combinaison de plusieurs techniques d’accessibilité, telles que les sous-titres, les transcriptions et les descriptions audio, peut offrir à tous les utilisateurs une expérience complète et inclusive.

Voir aussi

Dans le chapitre Vérification de l’accessibilité du Web, vous apprendrez comment vérifier l’accessibilité d’un site Web pour qu’il soit conforme aux WCAG ou qu’il réponde uniquement à des critères spécifiques en utilisant les classes et les méthodes des espaces de noms Aspose.Html.Accessibility et Aspose.Html.Accessibility.Results.
L’article Comment améliorer l’accessibilité d’un site web explique comment rendre votre site web accessible aux utilisateurs et comment vérifier la conformité de votre site web aux WCAG à l’aide de l’API Aspose.HTML for .NET.
L’article Accessibilité aux lecteurs d’écran explique comment concevoir un site web pour l’accessibilité aux lecteurs d’écran conformément aux directives WCAG à l’aide de l’API Aspose.HTML for .NET.
Consultez l’article Vérifier le contraste des couleurs en C# si vous souhaitez apprendre à ajuster correctement le contraste de votre contenu web conformément aux normes WCAG, l’autorité mondiale en matière d’accessibilité du web. Vous découvrirez comment tester l’accessibilité du contraste des couleurs à l’aide de C# et rendre votre contenu web facile à lire pour tous les utilisateurs.
Dans l’article Règles d’accessibilité du web, vous apprendrez à utiliser la classe AccessibilityRules, qui est un référentiel d’exigences, de critères de réussite et de techniques WCAG 2, pour les contrôles d’accessibilité du web.
L’article Erreurs et avertissements traite des classes et des interfaces qui permettent de collecter des informations sur les erreurs et les avertissements lors des tests d’accessibilité des sites web. Il se concentre sur les critères d’échec et les méthodes qui signalent les erreurs, et fournit un exemple en C# pour récupérer les erreurs d’accessibilité du web après avoir testé un document HTML.

Aspose.HTML propose gratuitement en ligne Vérificateur d’accessibilité Web. Cet outil analyse les pages web, valide leur conformité aux WCAG, identifie les problèmes et suggère des améliorations. Il vous permet de déterminer l’ampleur des corrections nécessaires et l’écart entre l’état actuel de votre site web ou de votre document HTML et les exigences des WCAG.