屏幕阅读器无障碍性 – 在 C# 中检查 alt 文本

屏幕阅读器作为辅助技术

屏幕阅读器无障碍性是网络无障碍的重要组成部分，旨在使数字内容（尤其是网站和应用程序）对盲人或视障用户可访问。

屏幕阅读器是一种辅助技术，用于朗读在线内容。它将数字文本和视觉内容转换为语音或盲文，使视障用户能够浏览、交互和理解数字内容。屏幕阅读器不仅适用于盲人或弱视者，还适用于有认知障碍的用户，他们可能更容易通过听觉理解信息。

屏幕阅读器可以读取页面上的所有内容，例如段落文本、标题、列表、图像替代文本、链接、单选按钮以及其他交互元素。为了让屏幕阅读器能够准确朗读并让用户理解信息，必须提供替代文本（alt text）和有意义的标题。

请遵循以下基于 WCAG 的建议，以确保您的网站对依赖屏幕阅读器的用户可访问。这不仅对残障人士有益，还能改善所有用户的体验，并帮助您的网站在搜索引擎结果中获得更高排名。

替代文本

屏幕阅读器无法自动将图像内容转换为文字，即使图像本身仅包含文字。为了实现网页无障碍性，所有图像必须包含简短且描述性的替代文本（alt text），以便屏幕阅读器用户能够清楚理解图像的内容和目的。除视觉辅助外，替代文本还有以下作用：

如果图像未加载或被阻止，浏览器会显示替代文本。
搜索引擎会使用替代文本来评估页面内容和目的。

图片替代文本 – img 标签中的 alt 属性

确保所有信息性 <img> 元素都包含简短且描述性的定义替代文本，所有装饰性 <img> 元素都包含空的 alt 属性（例如 alt=""）。编写 alt 文本时，请记住其目的是向盲人用户传递图片内容和用途的信息，以便他们能够从 alt 文本中获得与视力正常用户从图片本身获取的信息一样多的信息。alt 文本应该阐明图片的意图、用途和含义。

在下面的示例中，图片内容告诉用户这幅肖像画的是一个女孩，以及她的样子：

1<img src="vermeer-girl-with-perl.png" alt="A European girl is depicted in an exotic dress, oriental turban and with a very large pearl as an earring">

A European girl is depicted in an exotic dress, oriental turban and with a very large pearl as an earring

为确保您的替代文本不会让使用屏幕阅读器的用户感到不适，请使用最少的词语，字词要具体，并且不要在替代文本中堆砌关键词短语。这里不适合放置关键词。不要宣称这是一张图片。主要任务是用文字描述，并帮助盲人理解图片在页面上的用途。

按钮中的 Alt 属性 – 按钮替代文本

在按钮和图片按钮中使用 alt 属性是一项至关重要的网页无障碍实践。图片按钮使用 alt 属性作为标签。alt 属性值必须清晰、简洁，并且能够代表用户激活按钮时执行的操作，而不是图片本身的描述。屏幕阅读器会大声朗读此文本，以便盲人或视障人士理解并操作按钮的功能。

检查 <input type="image"> 是否具有非空的 alt 属性。

1<input type="image" src="print.jpg" name="submit" alt="Print">

使用具体且有意义的描述。避免使用“按钮”或“图片”等通用术语。如果按钮执行某个操作，请描述该操作。例如，“提交”、“搜索”或“查看详情”。如果按钮是装饰性的且没有功能，请使用空的alt属性（alt=""）或完全删除alt属性。

1<button type="submit">
2    <img src="submit-button.png" alt="Submit Form">
3</button>

使用 `<object>` 元素呈现内容的替代文本

<object> 元素将外部内容（例如图片、视频或交互式应用程序）嵌入到网页中。为了使残障人士能够访问这些内容，您应该在嵌入的内容类型上使用 alt 属性。

如果内容是图片，请在 <object> 元素中使用 alt 属性来提供替代文本。替代文本应描述内容的用途或提供有意义的描述。例如：

1<object >
2    <img src="aspose.gif" alt="Logo Aspose company" />
3</object> 
4
5<object data="companylogo.gif" type="image/gif">
6    <p>Company name</p>
7</object>

如果内容纯粹是装饰性的，没有传达有意义的信息，请考虑使用空的 alt 属性或省略它。

`<label>` 元素将文本标签与表单控件关联

使用 <label> 元素将文本标签与表单控件关联是 Web 开发中的一项基本实践，也是 Web 无障碍访问的重要方面。这种方法可以增强可用性，并确保用户（包括残障人士）能够有效地理解表单并与之交互。

使用 <label> 元素将表单控件与标签明确关联。标签使用 for 属性附加到特定的表单控件。for 属性的值必须与表单控件的 id 属性的值相同。

1<label for="firstname">First name:</label>
2<input type="text" id="firstname">
3
4<label for="password">Enter password:</label>
5<input type="password" id="password">

当控件获得焦点时，屏幕阅读器会播报标签，为残障用户提供上下文并帮助他们理解控件的用途。标签对于各种类型的表单控件都至关重要，例如文本输入框、单选按钮、复选框和下拉菜单。请务必为这些控件添加标签，以确保清晰易用的用户体验。所有 <input> 元素均使用明确关联的标签，但以下情况除外：

buttons – buttons are self-labeling
hidden inputs – Inputs with the type attribute value of hidden e.g., type="hidden"
input type=“image” – the label is provided by the alt attribute
input type=“reset” – the label is provided by the value attribute
input type=“submit” – the label is provided by the value attribute.

当无法使用 `<label>` 元素时，使用 `title` 属性来标识表单控件

当视觉设计中不包含可作为标签与控件关联的屏幕文本时，请使用 title 属性为表单控件提供可访问的名称。用户代理（包括辅助技术）可以发音此 title 属性。

Success

Payment card details

1<fieldset><legend>Payment card details</legend>
2<input id="cardnumber" name="cardnumber" title="Enter Card number" type="text" >
3<input id="cvc" name="cvc" title="Enter CVC code" type="text" >
4</fieldset>

Fail

输入字段没有标签绑定，并且缺少 title 属性：

1<label>Search for:</label>
2<input id="searchTerm" type="text" value="" name="searchTerm">

表情符号、表情符号、ASCII 艺术和黑客语言的替代文本

由于屏幕阅读器等辅助技术无法直接解读图像，因此它们依赖替代文本向用户传达非文本内容的含义。如果使用 ASCII、表情符号或表情符号图像，则必须提供图像含义的文本说明。由于您无法在 <span>、<div> 等元素上使用 alt 属性，并且 ARIA 建议不允许为通用元素指定可访问的名称，因此为了赋予表情符号可访问的名称，它们被定义为带有 role="img" ARIA 属性的图像，然后您可以使用 aria-label 属性创建可访问的名称。

role="img" 属性用于标识构成单个有意义图像的元素集合的容器。替代文本是一种单词或短语，其编码方式使得辅助技术可以将其与特定的非文本对象关联，并传达与非文本对象相同的信息。

Success

1<abbr title="sad">:(</abbr>
2<span aria-label="sad" role="img">:(</span>
3<img alt="sad" src="./sad.png">
4
5<div role="img" aria-label="scared face">(ㆆ _ ㆆ)</div>

Fail

1<div role="img">(ㆆ _ ㆆ)</div>

始终致力于提供清晰且有意义的替代文本，既能传达表情符号、表情符号、ASCII 艺术或黑客语言的精髓，又能保持预期的情感或表达基调。

Figure and figcaption

<figure> 元素用于容纳 <img> 和 <figcaption>，它是独立的，通常作为与文档主流程分离的单个块引用。<figure> 可以与文档主流程分离，而不会影响其含义。

<figure> 与其包含的 <figcaption> 建立语义关联，从而提供图形的摘要或附加信息，并/或将其与文档关联起来。但是，<img> 仍然需要替代文本，并且为了避免冗余，此信息不应通过 <figcaption> 传递。

1<figure>
2    <img src="./sunset.jpg" alt="Sunset on the sea" />
3    <figcaption>Sunset on the sea</figcaption>
4</figure>

如何使用 Aspose.HTML for .NET 检查图像的替代文本

让我们看一下与检查图像和标签的替代文本相关的代码片段。要检查页面的替代文本和无障碍标准，您需要遵循以下步骤：

使用 WebAccessibility() 构造函数创建负责 Web 无障碍验证的 WebAccessibility 类的实例。
使用 webAccessibility 对象的 Rules 属性，该属性提供对 Web 无障碍规则集合的访问。
调用 CreateValidator() 方法创建验证器对象。您实际上是在设置一个验证器，它将根据您指定的特定无障碍指南及其成功标准来检查网页内容。
使用 HTMLDocument() 构造函数之一加载 HTML 文档。
使用 Validate(document) 方法检查 HTML 文档的无障碍性。结果存储在 validationResult 变量中。
检查验证是否成功。打印有关错误的详细信息，包括相关的 HTML 元素。

以 HTML 文件 alt-tag.html 为例：

 1<html>
 2    <body>
 3        <img src="./resourses/login.png" alt="Login icon">
 4
 5        <label>Enter login:</label>
 6        <!--error: for input missing label with for="login" -->
 7        <input type="text" id="login">
 8
 9        <label for="password">Enter password:</label>
10        <input type="password" id="password">
11    
12        <!--error: for image alt attribute must not be empty -->
13        <img src="./resourses/sign.png" alt="">
14    </body>
15</html>

以下 C# 代码片段演示了创建验证器、加载 HTML 文档并根据 Web 可访问性要求对其进行验证的基本步骤，即"1. Perceivable"、“1.1 Text Alternatives"规则：

 1// Validate HTML image alt text accessibility with detailed error reporting using C#
 2
 3// Prepare a path to a source HTML file
 4string documentPath = Path.Combine(DataDir, "alt-tag.html");
 5
 6// Initialize webAccessibility container
 7WebAccessibility webAccessibility = new WebAccessibility();
 8
 9// Get from the rules list Principle "1. Perceivable" by code "1" and get guideline "1.1 Text Alternatives"
10Guideline guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.1");
11
12// Create an accessibility validator - pass the found guideline as parameters and specify the full validation settings
13AccessibilityValidator validator = webAccessibility.CreateValidator(guideline, ValidationBuilder.All);
14
15// Initialize an HTMLDocument object
16using (HTMLDocument document = new HTMLDocument(documentPath))
17{
18    ValidationResult validationResult = validator.Validate(document);
19    if (!validationResult.Success)
20    {
21        // Get all the 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                // Get an errors list 
28                foreach (ITechniqueResult result in ruleResult.Errors)
29                {
30                    // Check the type of the erroneous element, in this case, we have an error in the HTML Element
31                    if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
32                    {
33                        HTMLElement rule = (HTMLElement)result.Error.Target.Item;
34                        Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
35                        Console.WriteLine("HTML Element: {0}", rule.OuterHTML);
36                    }
37                }
38            }
39        }
40    }
41}

Example-CheckHtmlImageAltTextAccessibility.cs hosted with ❤ by GitHub

文件检查的结果将是一个包含一个 IError 类型错误的结果列表。程序将输出到控制台：

1    Error in rule H37 : Img element missing an alt attribute. The value of this attribute is referred to as "alt text".
2    HTML Element: <img src="./resourses/sign.png" alt="">
3    Error in rule H44 : Check that the label element contains for attribute.
4    HTML Element: <label>Enter login:</label>
5    Error in rule H65 : Check that the title attribute identifies the purpose of the control and that it matches the apparent visual purpose.
6    HTML Element: <input type="text" id="login">
7    Error in rule F65 : Absence of an alt attribute or text alternative on img elements, area elements, and input elements of type "image".
8    HTML Element: <img src="./resourses/sign.png" alt="">

参考

另请参阅

在 Web 无障碍访问检查 一章中，您将学习如何使用 Aspose.Html.Accessibility 和 Aspose.Html.Accessibility.Results 命名空间中的类和方法，检查网站无障碍访问是否符合所有 WCAG 标准，或仅检查特定标准。
如果您想了解如何根据 WCAG 标准（Web 无障碍访问领域的全球权威标准）正确调整 Web 内容的对比度，请参阅文章 颜色对比度无障碍访问。您将了解如何使用 C# 测试颜色对比度无障碍访问，并使您的 Web 内容易于所有用户阅读。
如果您想了解如何让多媒体内容更具包容性，并让包括残障人士在内的更广泛的受众都能访问，请参阅 多媒体无障碍 一文。本文包含一些 C# 示例，用于根据 WCAG 标准检查多媒体无障碍最佳实践。
在 无障碍验证器 一文中，您将了解 AccessibilityValidator 类，该类可用于测试 Web 无障碍规则，例如原则、指南和标准。
文章 错误和警告 讨论了在网站无障碍测试期间帮助收集错误和警告信息的类和接口。它重点介绍了报告错误的失败标准和方法，并提供了一个 C# 示例，用于在测试 HTML 文档后检索 Web 无障碍错误。

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