Accessibilité du lecteur d'écran – Vérifier l'accessibilité du texte alt et du multimédia dans Java

Aspose.HTML for Java comprend le paquet com.aspose.html.accessibility, qui est conçu pour toutes les manipulations et vérifications liées à l’accessibilité du web.

Accessibilité des lecteurs d’écran – Améliorer l’expérience Web de tous les utilisateurs

L’accessibilité des lecteurs d’écran est une composante essentielle de l’accessibilité du web, garantissant que les sites web et les applications numériques peuvent être utilisés par les personnes aveugles, malvoyantes ou souffrant de handicaps cognitifs. Un lecteur d’écran est une technologie d’assistance qui convertit le contenu numérique, y compris le texte, les images et les éléments interactifs, en parole ou en braille, ce qui permet aux utilisateurs de naviguer et d’interagir efficacement avec les pages web. Pour prendre en charge les lecteurs d’écran, les développeurs doivent respecter les Directives pour l’accessibilité des contenus web (WCAG), notamment en fournissant un texte alternatif clair et descriptif (alt text) pour toutes les images informatives, les boutons et les éléments multimédias.

Dans cet article, nous verrons comment utiliser la bibliothèque Aspose.HTML for Java pour vérifier l’accessibilité d’un site web ou de tout autre document HTML pour les lecteurs d’écran, c’est-à-dire s’il contient un texte alternatif (alt text) clair et descriptif pour toutes les images, tous les boutons et tous les éléments multimédias informatifs.

Dans l’article Accessibilité des lecteurs d’écran – Vérifier le texte alternatif, vous apprendrez à concevoir votre site web en tenant compte de l’accessibilité des lecteurs d’écran et à utiliser différentes méthodes pour mettre en place un texte alternatif sur votre site web, notamment pour les images, les boutons, les éléments <objet>, les contrôles de formulaire, les emojis, et bien d’autres choses encore.

L’article Accessibilité du Web multimédia explore la manière de rendre le contenu multimédia inclusif et accessible à un public plus large, y compris aux personnes handicapées. Cet article fournit des exemples de meilleures pratiques d’accessibilité multimédia conformes aux normes WCAG.

Comment vérifier le texte Alt d’une image

Examinons un extrait de code relatif à la vérification du texte alternatif pour les images et les étiquettes. Pour vérifier que votre page contient un texte alternatif et respecte les critères d’accessibilité, 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 permet d’accéder à 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 des WCAG.
Appelez la méthode createValidator() pour créer un objet validator. Il s’agit essentiellement de configurer un validateur qui vérifiera le contenu Web en fonction des directives d’accessibilité spécifiques et des critères de réussite associés à la directive que vous avez spécifiée.
Charger 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é.

Prenons l’exemple du fichier 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>

L’extrait de code Java suivant montre les étapes de base pour créer un validateur, charger un document HTML et le valider par rapport aux exigences d’accessibilité du web, à savoir les règles “1. Perceivable” et “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}

Example_CheckAltText.java hosted with ❤ by GitHub

Le résultat de la vérification du fichier sera une liste de résultats contenant des erreurs. Le programme affichera une sortie sur la 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="">

Vérifier l’accessibilité du multimédia

Cet exemple vérifie la conformité d’un document HTML avec tous les critères de la ligne directrice “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}

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

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

Vous trouverez des conseils utiles sur l’évaluation et l’amélioration de la visibilité du texte dans l’article Accessibilité du contraste des couleurs, qui couvre la vérification du contraste basée sur les WCAG à l’aide d’Aspose.HTML for Java.
Si vous souhaitez savoir comment afficher les résultats de la validation et identifier les problèmes d’accessibilité du web, consultez l’article Résultats de la validation.
Dans l’article Vérification de l’accessibilité du web – Erreurs et avertissements, vous apprendrez comment collecter par programmation en Java des informations sur les erreurs et les avertissements lors de la vérification de l’accessibilité d’un site web.

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.

Résultats de la validation Contrôler le contraste des couleurs