Accesibilidad del lector de pantalla – Comprobar la accesibilidad del texto alternativo y multimedia en Java

Aspose.HTML for Java incluye el paquete com.aspose.html.accessibility, diseñado para todas las manipulaciones y comprobaciones relacionadas con la accesibilidad web.

Accesibilidad del lector de pantalla: mejora de las experiencias web para todos los usuarios

La accesibilidad de los lectores de pantalla es un componente esencial de la accesibilidad web, ya que garantiza que los sitios web y las aplicaciones digitales puedan ser utilizados por personas ciegas, con discapacidad visual o con discapacidades cognitivas. Un lector de pantalla es una tecnología de asistencia que convierte el contenido digital, incluido el texto, las imágenes y los elementos interactivos, en voz o Braille, lo que permite a los usuarios navegar e interactuar con las páginas web de forma eficaz. Para ayudar a los lectores de pantalla, los desarrolladores deben seguir las Pautas de Accesibilidad al Contenido en la Web (WCAG), en concreto proporcionando un texto alternativo (alt text) claro y descriptivo para todas las imágenes informativas, botones y elementos multimedia.

En este artículo, veremos cómo utilizar la biblioteca Aspose.HTML for Java para comprobar la accesibilidad del contenido de un sitio web o de cualquier otro documento HTML para lectores de pantalla: si contiene texto alternativo claro y descriptivo (texto alt) para todas las imágenes informativas, botones y elementos multimedia.

En el artículo Texto alternativo – Accesibilidad web, aprenderás a diseñar tu sitio web teniendo en cuenta la accesibilidad para lectores de pantalla y a utilizar varias formas de implementar texto alternativo en tu sitio web, incluyendo imágenes, botones, elementos <object>, controles de formularios, emojis, etc.

El artículo Accesibilidad multimedia explora cómo hacer que los contenidos multimedia sean inclusivos y accesibles para un público más amplio, incluidas las personas con discapacidad. Este artículo ofrece ejemplos de buenas prácticas de accesibilidad multimedia acordes con las normas WCAG.

Cómo comprobar el texto alternativo de una imagen

Veamos un fragmento de código relacionado con la comprobación del texto alternativo de imágenes y etiquetas. Para revisar el texto alternativo de su página y los criterios de accesibilidad, debe seguir estos pasos:

Utilice el constructor WebAccessibility() para crear una instancia de la clase WebAccessibility responsable de la validación de accesibilidad web.
Utilice la propiedad Rules del objeto webAccessibility que proporciona acceso a una colección de reglas de accesibilidad web. Llame al método getPrinciple() de la clase AccessibilityRules y al método getGuideline() de la clase Principle para obtener el principio requerido por código de WCAG.
Llame al método createValidator() para crear un objeto validator. Esencialmente estás configurando un validador que comprobará el contenido web con las pautas de accesibilidad específicas y los criterios de éxito asociados con la pauta que has especificado.
Cargue un documento HTML utilizando uno de los constructores HTMLDocument().
Utilice el método validate(document) para comprobar la accesibilidad del documento HTML. El resultado se almacena en la variable validationResult.
Comprueba si la validación se ha realizado correctamente. Imprime la información detallada sobre los errores, incluyendo el elemento HTML asociado.

Considere un ejemplo del archivo 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>

El siguiente fragmento de código Java muestra los pasos básicos para crear un validador, cargar un documento HTML y validarlo según los requisitos de accesibilidad web, concretamente las reglas “1. Perceivable”, “1.1 Text Alternatives”:

 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

El resultado de la comprobación del archivo será una lista de resultados con errores. El programa mostrará el resultado en la consola:

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

Comprobar accesibilidad multimedia

Este ejemplo comprueba si un documento HTML cumple todos los criterios de la directriz “1.2 Time-based Media”.

 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

Para comprobar, por ejemplo, la presencia de audiodescripción, debe seleccionar el criterio deseado y hacer una comprobación sobre él.

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

Recuerde que la clave está en garantizar que los usuarios con discapacidad puedan acceder al contenido multimedia y comprender su contexto de forma eficaz. La combinación de varias técnicas de accesibilidad, como subtítulos, transcripciones y audiodescripciones, puede proporcionar a todos los usuarios una experiencia completa e integradora.

Véase también

Ver también

Encontrará consejos útiles para evaluar y mejorar la visibilidad del texto en el artículo Accesibilidad del contraste de color, que aborda la comprobación de contraste basada en WCAG con Aspose.HTML for Java.
Si desea aprender a ver los resultados de la validación e identificar problemas de accesibilidad web, consulte el artículo Resultados de la validación.
En el artículo Comprobación de accesibilidad web – Errores y advertencias, aprenderá cómo recopilar programáticamente en Java información de errores y advertencias mientras se verifica la accesibilidad de un sitio web.

Aspose.HTML ofrece gratuitamente Comprobador de accesibilidad web. Esta herramienta escanea páginas web, valida su conformidad con las WCAG, identifica problemas y sugiere mejoras. Obtenga información instantánea sobre la conformidad de su sitio web, lo que le permitirá determinar el alcance de las correcciones necesarias y el desfase entre el estado actual de su sitio web o documento HTML y los requisitos WCAG.

Resultados de la validación Comprobar el contraste de color