Screen Reader Accessibility – Check alt text and multimedia accessibility in Java

Aspose.HTML for Java includes the com.aspose.html.accessibility package, which is designed for all manipulations and checks related to web accessibility.

Screen reader accessibility is an essential component of web accessibility, ensuring that websites and digital applications can be used by people who are blind, visually impaired, or have cognitive disabilities. A screen reader is an assistive technology that converts digital content, including text, images, and interactive elements, into speech or Braille, allowing users to navigate and interact with web pages effectively. To support screen readers, developers should follow the Web Content Accessibility Guidelines (WCAG), specifically by providing clear, descriptive alternative text (alt text) for all informative images, buttons, and media elements.

In this article, we will look at how to use the Aspose.HTML for Java library to check a website or any other HTML document for content accessibility for screen readers – whether it contains clear, descriptive alternative text (alt text) for all informative images, buttons, and media elements.

In the article Screen Reader Accessibility – Check alt text, you will learn how to design your website with screen reader accessibility in mind and how to use various ways to implement alternative text on your website, including for images, buttons, <object> elements, form controls, emojis, and more.

The Multimedia Web Accessibility article explores how to make multimedia content inclusive and accessible to a broader audience, including people with disabilities. This article provides examples of multimedia accessibility best practices that are according to WCAG standards.

How to Check Alt Text of an Image

Let’s look at a code snippet related to checking alt text for images and labels. To review your page for alternative text and accessibility criteria, you need to follow these steps:

Use the WebAccessibility() constructor to create an instance of the WebAccessibility class responsible for web accessibility validation.
Use the Rules property of the webAccessibility object that provides access to a collection of web accessibility rules. Call the getPrinciple() method of the AccessibilityRules class and getGuideline() method of the Principle class to get required principle by code from WCAG.
Call the createValidator() method to create a validator object. You are essentially setting up a validator that will check web content against the specific accessibility guidelines and success criteria associated with the guideline you’ve specified.
Load an HTML document using one of the HTMLDocument() constructors.
Use the validate(document) method to check the HTML document for accessibility. The result is stored in the validationResult variable.
Check whether the validation was successful. Print the detailed information about errors, including the associated HTML element.

Consider an example of the HTML file 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>

The following Java code snippet demonstrates the basic steps to create a validator, load an HTML document, and validate it against web accessibility requirements, namely the “1. Perceivable”, “1.1 Text Alternatives” rules:

 1// Prepare a path to a source HTML file
 2String documentPath = "alt-tag.html";
 3
 4// Initialize webAccessibility container
 5WebAccessibility webAccessibility = new WebAccessibility();
 6
 7// Get from the rules list Principle "1. Perceivable"
 8// by code "1" and get guideline "1.1 Text Alternatives"
 9Guideline guideline = webAccessibility.getRules()
10        .getPrinciple("1").getGuideline("1.1");
11
12// Create an accessibility validator - pass the found guideline
13// as parameters and specify the full validation settings
14AccessibilityValidator validator = webAccessibility.createValidator(
15        guideline,
16        ValidationBuilder.getAll()
17);
18
19// Initialize an HTMLDocument object
20final HTMLDocument document = new HTMLDocument(documentPath);
21ValidationResult validationResult = validator.validate(document);
22
23if (!validationResult.getSuccess()) {
24    // Get all the 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, in this case,
31                // we have an error in the HTML Element
32                if (result.getError().getTarget().getTargetType() == TargetTypes.HTMLElement) {
33                    HTMLElement rule = (HTMLElement) result.getError().getTarget().getItem();
34
35                    System.out.println(String.format("Error in rule %s : %s",
36                            result.getRule().getCode(),
37                            result.getError().getErrorMessage()
38                    ));
39
40                    System.out.println(String.format("HTML Element: %s",
41                            rule.getOuterHTML()
42                    ));
43                }
44            }
45        }
46    }
47}

Example_CheckAltText hosted with ❤ by GitHub

The result of the file check will be a list of results containing errors. The program will output to the console:

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="">

Check Multimedia Accessibility

This example checks an HTML document for compliance with all the criteria in the “1.2 Time-based Media” guideline.

 1// Initialize a webAccessibility container
 2WebAccessibility webAccessibility = new WebAccessibility();
 3
 4// Get from the rules list Principle "1.Perceivable" by code "1"
 5// and get guideline "1.2 Time-based Media"
 6Guideline guideline = webAccessibility.getRules()
 7        .getPrinciple("1").getGuideline("1.2");
 8
 9// Create an accessibility validator, pass the found guideline
10// as parameters, and specify the full validation settings
11AccessibilityValidator validator = webAccessibility.createValidator(
12        guideline,
13        ValidationBuilder.getAll()
14);
15
16// Initialize an HTMLDocument object
17final HTMLDocument document = new HTMLDocument("https://www.youtube.com/watch?v=Yugq1KyZCI0");
18ValidationResult validationResult = validator.validate(document);
19
20// Checking for success
21if (!validationResult.getSuccess()) {
22    // Get all result details
23    for (RuleValidationResult ruleResult : validationResult.getDetails()) {
24        // If the result of the rule is unsuccessful
25        if (!ruleResult.getSuccess()) {
26            // Get an errors list
27            for (ITechniqueResult result : ruleResult.getErrors()) {
28                // Check the type of the erroneous element
29                if (result.getError().getTarget().getTargetType() == TargetTypes.HTMLElement) {
30                    HTMLElement rule = (HTMLElement) result.getError().getTarget().getItem();
31
32                    System.out.println(String.format("Error in rule %s : %s",
33                            result.getRule().getCode(),
34                            result.getError().getErrorMessage()
35                    ));
36
37                    System.out.println(String.format("HTML Element: %s",
38                            rule.getOuterHTML()
39                    ));
40                }
41            }
42        }
43    }
44}

Example_ValidateMultimedia hosted with ❤ by GitHub

To check, for example, the presence of audio description, you must select the desired criterion and make a check on it.

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

Remember that the key is to ensure that users with disabilities can access the multimedia content and understand its context effectively. Combining multiple accessibility techniques, such as captions, transcripts, and audio descriptions, can provide all users with a comprehensive and inclusive experience.

Screen Reader Accessibility – Check alt text and multimedia accessibility in Java

Screen Reader Accessibility – Enhancing Web Experiences for All Users

How to Check Alt Text of an Image

Check Multimedia Accessibility

See Also