多媒体无障碍 – 如何用 C# 进行检查

无障碍多媒体

多媒体网络无障碍指的是确保多媒体内容,如视频、音频文件和交互式演示文稿,能够被包括残障人士在内的所有人访问。多媒体内容在互联网上非常普遍,每个人都必须能够访问和理解所传达的信息。无障碍媒体必须满足残疾人的所有需求,并且必须包括:

无障碍多媒体是为辅助技术定制的。这意味着盲人不必再依赖他人为他们朗读。他们只需打开浏览器,自行与内容互动,因为读屏软件就是为大声朗读在线内容而设计的。

如果音频文件没有字幕,聋人就无法识别音频所传达的有意义的信息。但是,如果字幕编写得好并与音频内容同步,就能对多媒体中的关键视觉细节和动作进行描述。

我们已经在 屏幕阅读器无障碍 一文中介绍了如何检查图像、按钮等的 alt 文本。在此,我们将探讨使用<track>元素对多媒体无障碍的重要性。

提供音频和视频描述的 <track> 元素

视障人士无法看到视频内容,听障人士无法听到音频内容。<track>元素的主要目的是为视频和音频内容提供字幕和标题。虽然它的目的不是直接提供音频描述,但它可以与其他方法结合使用,为视觉障碍者提供音频描述。

视频字幕

使用视频 alt 文本不是 HTML 的标准或推荐做法。alt “属性主要用于为图像提供替代文本,并不适用于<video>元素。不过,也有其他方法可以使视频内容易于访问。

视频中的字幕包括所有基本背景噪音和其他声音的文字说明,以及所有对话和旁白的文字说明。<video> 元素必须包括一个具有 kind="captions" 属性的 <track> 元素。字幕必须传达视频中所有相关的听觉信息,包括对话、音乐提示、音效和其他对聋人用户至关重要的数据。

下面介绍如何使用 <track> 元素实现多媒介无障碍访问:

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>

让我们看看 HTML 代码的第 5 行。<track>元素的src属性指定了曲目文件名,并指向包含字幕的 WebVTT 文件(“myvideo_en.vtt”)。kind 属性描述了文件的内容。srclang 属性指定轨道文件的语言。label 属性指定音轨名称。除 src 属性外,这些属性都不是必需的。不过,我们强烈建议使用这些属性,因为它们可以提高清晰度。

音频字幕

使用带有 kind="captions" 属性的 <track> 元素,确保网站上所有带有音频内容的元素都有字幕。字幕是与音频文件同步的文本,包含对话、旁白和任何重要的听觉信息,以方便聋哑用户。下面的代码显示了如何添加两个不同的音轨–一个英语音轨和一个西班牙语音轨:

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>

针对 <video> 元素的音频描述

<video>元素中添加音频描述是一种重要的无障碍做法,可确保有视觉障碍的人能够完全理解和欣赏视频内容。虽然盲人可以顺利听到视频中的音频内容,但他们会错过电影中的视觉内容,如面部表情和场景。电影中发生的许多事情完全是视觉的,没有听觉成分。例如,一个人可以做面部表情,但不能说话。音频描述提供有关视频视觉元素的叙述信息,如场景、动作和手势。

下面的代码展示了如何添加两种不同的音频描述–一种是英语,一种是西班牙语:

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>

使用 Aspose.HTML 检查多媒体辅助功能

要检查您的网站是否符合多媒体无障碍标准,您需要遵循以下步骤:

  1. 使用 WebAccessibility() 构造函数创建一个负责网络可访问性验证的 WebAccessibility 类实例。
  2. 使用 webAccessibility 对象的 Rules属性,可以访问网络辅助功能规则集合。
    • 调用 AccessibilityRules 类的 GetPrinciple() 方法和 Principle 类的 GetGuideline() 方法,从 WCAG 中以代码形式获取所需的原则。
  3. 调用 CreateValidator() 方法创建验证器对象。您基本上是在设置一个验证器,它将根据特定的可访问性指南和与您指定的指南相关的成功标准来检查网页内容。
  4. 使用 HTMLDocument() 构造函数之一加载 HTML 文档。
  5. 使用 Validate(document) 方法检查 HTML 文档的可访问性。结果存储在 validationResult 变量中。
  6. 检查验证是否成功。打印错误的详细信息,包括相关的 HTML 元素。

在本例中,您可以检查 HTML 文档是否符合 “1.2 基于时间的媒体 “准则中的所有标准。

 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}

例如,要检查是否有音频描述,您必须选择所需的标准并对其进行检查。

 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    ...

请记住,关键是要确保残障用户能够访问多媒体内容并有效理解其上下文。结合多种无障碍技术,如字幕、文字稿和音频描述,可以为所有用户提供全面的包容性体验。

另请参见

  • Web 可访问性检查 章中,您将了解如何使用 Aspose.Html.Accessibility 和 Aspose.Html.Accessibility.Results 命名空间的类和方法检查网站的可访问性是否符合所有 WCAG 标准或仅符合特定标准。
  • 文章 如何提高网站的可访问性 介绍了如何让用户访问您的网站,以及如何使用 .NET 的 Aspose.HTML API 检查网站是否符合 WCAG 标准。
  • 文章 屏幕阅读器辅助功能 介绍了如何使用 Aspose.HTML for .NET API 按照 WCAG 指南设计网站,以实现屏幕阅读器辅助功能。
  • 如果您想了解如何按照世界权威的无障碍网页标准 WCAG 正确调整网页内容的对比度,请查看文章 色彩对比度检查器。您将了解如何使用 C# 测试色彩对比度的可访问性,并让所有用户都能轻松阅读您的网页内容。
  • 网络无障碍规则 一文中,你将学习如何使用 AccessibilityRules 类,该类是 WCAG 2 要求、成功标准和技术的存储库,可用于网络无障碍检查。
  • 文章 错误和警告 讨论了在网站无障碍测试过程中帮助收集错误和警告信息的类和接口。文章重点介绍了故障标准和报告错误的方法,并提供了一个 C# 示例,用于在测试 HTML 文档后检索网站无障碍访问错误。

Aspose.HTML 提供免费的在线 网页可访问性检查器。该工具可扫描网页、验证网页是否符合 WCAG 标准、发现问题并提出改进建议。您可以即时了解网站的合规性,确定必要的修正范围,以及网站或 HTML 文档的当前状态与 WCAG 要求之间的差距。

文本 “网络无障碍检查器”

Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.