屏幕阅读器辅助功能 – 在 Java 中检查 alt 文本和多媒体辅助功能
Aspose.HTML for Java 包含 com.aspose.html.accessibility 软件包,该软件包用于所有与网络辅助功能相关的操作和检查。
屏幕阅读器的无障碍性 – 为所有用户提升网络体验
屏幕阅读器无障碍性是网络无障碍性的重要组成部分,可确保盲人、视障者或认知障碍者能够使用网站和数字应用程序。屏幕阅读器是一种辅助技术,可将数字内容(包括文本、图像和互动元素)转换为语音或盲文,从而使用户能够有效地浏览网页并与之互动。为支持屏幕阅读器,开发人员应遵循《网页内容可访问性指南》(WCAG)](2),特别是为所有信息图像、按钮和媒体元素提供清晰、描述性的替代文本(alt 文本)。
在本文中,我们将介绍如何使用 Aspose.HTML for Java 库来检查网站或任何其他 HTML 文档的内容对屏幕阅读器的可访问性,即是否为所有信息图像、按钮和媒体元素提供了清晰、描述性的替代文本(alt 文本)。
在 屏幕阅读器辅助功能 – 检查替代文本 一文中,您将了解如何在设计网站时考虑屏幕阅读器辅助功能,以及如何使用各种方法在网站上实现替代文本,包括图像、按钮、"<对象>“元素、表单控件、表情符号等。
多媒体网络无障碍 一文探讨了如何使多媒体内容具有包容性,让更多受众(包括残障人士)能够无障碍地访问多媒体内容。本文举例说明了符合 WCAG 标准的多媒体无障碍最佳实践。
如何检查图片的 Alt 文本
让我们来看看与检查图像和标签的 alt 文本有关的代码片段。要检查页面的替代文本和可访问性标准,您需要遵循以下步骤:
- 使用 WebAccessibility() 构造函数创建一个负责网络可访问性验证的 WebAccessibility 类实例。
- 使用 “webAccessibility “对象的 Rules属性来访问网络无障碍规则集合。调用 AccessibilityRules 类的 getPrinciple() 方法和 Principle 类的 getGuideline() 方法,通过代码从《无障碍网页内容指引》中获取所需的原则。
- 调用 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>下面的 Java 代码片段演示了创建验证器、加载 HTML 文档并根据网络无障碍要求(即 “1. Perceivable”、“1.1 Text Alternatives"规则)进行验证的基本步骤:
1// Validate HTML image alt text accessibility with detailed error reporting
2
3// Prepare a path to a source HTML file
4String documentPath = "alt-tag.html";
5
6// Initialize webAccessibility container
7WebAccessibility webAccessibility = new WebAccessibility();
8
9// Get from the rules list Principle "1. Perceivable"
10// by code "1" and get guideline "1.1 Text Alternatives"
11Guideline guideline = webAccessibility.getRules()
12 .getPrinciple("1").getGuideline("1.1");
13
14// Create an accessibility validator - pass the found guideline
15// as parameters and specify the full validation settings
16AccessibilityValidator validator = webAccessibility.createValidator(
17 guideline,
18 ValidationBuilder.getAll()
19);
20
21// Initialize an HTMLDocument object
22final HTMLDocument document = new HTMLDocument(documentPath);
23ValidationResult validationResult = validator.validate(document);
24
25if (!validationResult.getSuccess()) {
26 // Get all the result details
27 for (RuleValidationResult ruleResult : validationResult.getDetails()) {
28 // If the result of the rule is unsuccessful
29 if (!ruleResult.getSuccess()) {
30 // Get an errors list
31 for (ITechniqueResult result : ruleResult.getErrors()) {
32 // Check the type of the erroneous element, in this case,
33 // we have an error in the HTML Element
34 if (result.getError().getTarget().getTargetType() == TargetTypes.HTMLElement) {
35 HTMLElement rule = (HTMLElement) result.getError().getTarget().getItem();
36
37 System.out.println(String.format("Error in rule %s : %s",
38 result.getRule().getCode(),
39 result.getError().getErrorMessage()
40 ));
41
42 System.out.println(String.format("HTML Element: %s",
43 rule.getOuterHTML()
44 ));
45 }
46 }
47 }
48 }
49}文件检查的结果将是一个包含错误的结果列表。程序将输出到控制台:
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="">检查多媒体辅助功能
此示例检查 HTML 文档是否符合 “1.2 Time-based Media"指南中的所有标准。
1// Validate HTML for multimedia accessibility using Java
2
3// Initialize a webAccessibility container
4WebAccessibility webAccessibility = new WebAccessibility();
5
6// Get from the rules list Principle "1.Perceivable" by code "1"
7// and get guideline "1.2 Time-based Media"
8Guideline guideline = webAccessibility.getRules()
9 .getPrinciple("1").getGuideline("1.2");
10
11// Create an accessibility validator, pass the found guideline
12// as parameters, and specify the full validation settings
13AccessibilityValidator validator = webAccessibility.createValidator(
14 guideline,
15 ValidationBuilder.getAll()
16);
17
18// Initialize an HTMLDocument object
19final HTMLDocument document = new HTMLDocument("https://www.youtube.com/watch?v=Yugq1KyZCI0");
20ValidationResult validationResult = validator.validate(document);
21
22// Checking for success
23if (!validationResult.getSuccess()) {
24 // Get all result details
25 for (RuleValidationResult ruleResult : validationResult.getDetails()) {
26 // If the result of the rule is unsuccessful
27 if (!ruleResult.getSuccess()) {
28 // Get an errors list
29 for (ITechniqueResult result : ruleResult.getErrors()) {
30 // Check the type of the erroneous element
31 if (result.getError().getTarget().getTargetType() == TargetTypes.HTMLElement) {
32 HTMLElement rule = (HTMLElement) result.getError().getTarget().getItem();
33
34 System.out.println(String.format("Error in rule %s : %s",
35 result.getRule().getCode(),
36 result.getError().getErrorMessage()
37 ));
38
39 System.out.println(String.format("HTML Element: %s",
40 rule.getOuterHTML()
41 ));
42 }
43 }
44 }
45 }
46}例如,要检查是否有音频描述,您必须选择所需的标准并对其进行检查。
1 // Get the principle "1. Perceivable" by its code and retrieve the guideline "1.2 Time-based Media"
2 Guideline guideline = webAccessibility.getRules().getPrinciple("1").getGuideline("1.2");
3
4 // Get the specific criterion: 1.2.3 Audio Description or Media Alternative (Prerecorded)
5 Criterion criterion = guideline.getCriterion("1.2.3");
6
7 // Create an accessibility validator with the found criterion and full validation settings
8 AccessibilityValidator validator = webAccessibility.createValidator(criterion, ValidationBuilder.getAll());
9
10 ...请记住,关键是要确保残障用户能够访问多媒体内容并有效理解其上下文。结合多种无障碍技术,如字幕、文字稿和音频描述,可以为所有用户提供全面的包容性体验。
另请参见
- 如何满足 WCAG 要求(快速参考)
- H2:合并同一资源的相邻图像和文本链接
- H24:为影像地图的区域要素提供文本备选方案
- H30:为锚元素提供说明链接目的的链接文本
- H35:在小程序元素上提供文本替代
- H36:在用作提交按钮的图像上使用 alt 属性
- H37:在 img 元素上使用 alt 属性
- H44:使用标签元素将文本标签与表单控件关联
- H53:使用对象元素的主体
- H65:无法使用标签元素时使用 title 属性标识表单控件
- H67:对辅助技术应忽略的图像,在 img 元素上使用空 alt 文本和无 title 属性
- H86:为表情符号、表情符号、ASCII 艺术和 leetspeak 提供文本替代
- H95:使用轨道元素提供字幕
- H96:使用轨道元素提供音频说明
- H46:使用嵌入式 noembed
- 您可以在 无障碍色彩对比度 一文中找到评估和改善文本可见性的有用技巧,该文章涉及使用 Aspose.HTML for Java 根据 WCAG 进行对比度检查。
- 如果您想了解如何查看验证结果和识别网络可访问性问题,请参阅 验证结果一文。
- 在
网站可访问性检查 – 错误和警告 一文中,您将了解如何在检查网站的可访问性时以 Java 编程方式收集错误和警告信息。
Aspose.HTML 提供免费的在线 网页可访问性检查器。该工具可扫描网页、验证网页是否符合 WCAG 标准、发现问题并提出改进建议。您可以即时了解网站的合规性,确定必要的修正范围,以及网站或 HTML 文档的当前状态与 WCAG 要求之间的差距。
