Comprobación de accesibilidad web – Errores y advertencias

Cómo comprobar la accesibilidad de un sitio web

Comprobar la accesibilidad de un sitio web significa asegurarse de que todo el mundo, incluidas las personas con discapacidad, puede utilizar su sitio web o aplicación. Esto implica comprobar su contenido según directrices como WCAG, que describen cómo hacer que las experiencias digitales sean más inclusivas. Con Aspose.HTML for Java, puede automatizar este proceso analizando HTML y CSS en busca de problemas de accesibilidad, ya sea con respecto al conjunto completo de normas WCAG o centrándose en criterios específicos.

En este artículo, aprenderás a evaluar la accesibilidad de un sitio web para comprobar que cumple las WCAG utilizando las clases y métodos de los paquetes com.aspose.html.accessibility y com.aspose.html.accessibility.results. Exploraremos varias clases e interfaces que ayudan a recopilar información sobre errores y advertencias al comprobar la accesibilidad de un sitio web. Se prestará especial atención a los criterios de fallo y a los métodos para informar de errores, junto con un ejemplo Java que demuestra cómo recuperar errores de accesibilidad web después de validar un documento HTML.

Veamos un fragmento de código relacionado con la validación de accesibilidad web. El siguiente código comprueba la accesibilidad de una página HTML remota utilizando todas las reglas de validación WCAG e imprime los detalles de cualquier regla que no se haya cumplido correctamente:

1. Utilice el constructor WebAccessibility() para crear una instancia de la clase WebAccessibility responsable de la validación de accesibilidad web.
2. Llame al método createValidator() para crear un objeto validador.
3. Cargar una página HTML utilizando el constructor HTMLDocument(Url).
4. Utilice el método validate(document) para comprobar la accesibilidad de la página web. El resultado se almacena en la variable validationResult.
5. Comprueba si la validación se ha realizado correctamente. Para cada problema de accesibilidad, imprime información sobre el código de la regla, la descripción de la regla y si la validación ha tenido éxito o ha fallado.

// Check website for WCAG compliance in Java

// Initialize webAccessibility container
WebAccessibility webAccessibility = new WebAccessibility();

// Create an accessibility validator with static instance
// for all rules from repository that match the builder settings
AccessibilityValidator validator = webAccessibility.createValidator(ValidationBuilder.getAll());

// Initialize an HTMLDocument object
final HTMLDocument document = new HTMLDocument("https://products.aspose.com/html/net/generators/video/");
ValidationResult validationResult = validator.validate(document);

// Checking for success
if (!validationResult.getSuccess()) {
    // Get a list of Details
    for (RuleValidationResult detail : validationResult.getDetails()) {
        System.out.println(String.format("%s: %s = %s",
                detail.getRule().getCode(),
                detail.getRule().getDescription(),
                detail.getSuccess()
        ));
    }
}

Errores y advertencias

La detección de errores ayuda a identificar las barreras que pueden impedir a las personas con discapacidad utilizar e interactuar con los contenidos web de forma eficaz. Los errores y advertencias orientan sobre lo que hay que hacer para mejorar la accesibilidad web. Sirven de hoja de ruta para que desarrolladores y diseñadores realicen los cambios necesarios.

IError

El IError es una interfaz pública que contiene información sobre el error de validación. Esto significa una comprobación errónea, es decir, que la regla no se ha superado – y su resultado no coincide con Accessibility.

La interfaz IError describe los detalles de un problema de validación encontrado durante las comprobaciones de accesibilidad. Proporciona información clave sobre el error, incluyendo un mensaje legible por humanos a través de getErrorMessage(), el estado del resultado con getSuccess(), y el tipo de error como un valor numérico (getErrorType()) y un nombre descriptivo (getErrorTypeName()), como Error o Warning. Además, getTarget() devuelve el elemento HTML o CSS específico en el que se ha encontrado el problema, lo que permite identificar y corregir con precisión los problemas de accesibilidad. Esta interfaz es esencial para interpretar e informar eficazmente de los resultados de las comprobaciones de accesibilidad.

El objeto IError tiene estos significados

* ErrorType = 1 and Success = false – this means that the error is critical, and the result of the check is not performed.
* ErrorType = 2 and Success = true – this means that the error is not critical but has an informational character and displays hints for possible improvement. 

El tipo de error viene determinado por el tipo de técnica:

• Si una técnica no cumple un criterio de éxito exigido, y ese criterio es necesario para cumplirla, el resultado se marcará como fallo crítico, con el resultado ErrorType=1 y Success=false, y es un Error.
• Si una técnica no es estrictamente necesaria, o si se trata más de una práctica recomendada o de una sugerencia de mejora que de una infracción grave de las normas, se marcará como ErrorType=2 y Success=true, y se tratará de una Warning.

Target

La clase Target representa un elemento HTML o CSS específico en el que se ha detectado un error o advertencia de accesibilidad durante la validación. Proporciona dos propiedades clave: Item, que devuelve el objeto real (como una etiqueta HTML o una regla CSS) que causó el problema, y TargetType, que determina si el origen del problema es un elemento HTML o un componente CSS.

TargetTypes

La enumeración TargetTypes define los posibles tipos de objetos de un documento HTML en los que se puede encontrar un error o advertencia de accesibilidad. Ayuda a clasificar el origen del problema, facilitando su identificación y resolución. La enumeración incluye tres valores:

Name	Value	Description
HTMLElement	0	The element containing the HTMLElement from a document: standard HTML elements such as <img> or <button>.
CSSStyleRule	1	The element containing the CSSStyleRule from a document: specific CSS rules in stylesheets.
CSSStyleSheet	2	The element containing the CSSStyleSheet from a document: entire CSS stylesheets.

Esta enumeración funciona en conjunción con la clase Target para indicar exactamente qué tipo de elemento causó el resultado de la validación.

Generar informe completo de accesibilidad

Veamos el código Java para iterar por los resultados de la comprobación de accesibilidad web, prestando especial atención a los criterios de fallo y a los detalles de los métodos que informan de los errores. Ejemplo de obtención de detalles de errores y elementos de un documento HTML:

1. Utilice la clase RuleValidationResult e itere a través de los objetos ruleResult contenidos en validationResult.getDetails(). Estos representan diferentes criterios de accesibilidad.
2. Imprima el código y la descripción del criterio y si ha tenido éxito o no. Para ello, utilice las propiedades Code y Description de la interfaz IRule.
3. Utiliza la propiedad Success para comprobar el criterio.
4. Utilice los objetos ITechniqueResult – ruleDetail contenidos en ruleResult.getErrors(). Los objetos ITechniqueResult representan resultados de reglas individuales para el criterio que informó errores.
5. Imprime la información sobre el método, incluyendo el código del método, el estado de éxito y la descripción.
6. Utilice la propiedad IError para obtener el objeto error del ruleDetail. El ruleDetail representa un problema de accesibilidad específico, y el objeto error contiene información sobre ese problema.
7. Utilice la propiedad Target para recuperar el objeto target asociado al error. El objeto target suele representar el elemento HTML específico, la regla CSS u otro contenido que ha provocado el error de accesibilidad.
8. Imprime información sobre el error. Incluye el tipo de error error.getErrorTypeName() y el mensaje de error error.getErrorMessage().
9. Utilice la propiedad TargetType de la clase Target para comprobar el tipo del objeto de destino. Dependiendo del tipo del objeto de destino, se extrae información específica y se imprime en la consola.

// Check HTML for WCAG compliance and output failed rule codes and error messages

// Initialize a webAccessibility container
WebAccessibility webAccessibility = new WebAccessibility();

// Create an accessibility validator with static instance
// for all rules from repository that match the builder settings
AccessibilityValidator validator = webAccessibility.createValidator(ValidationBuilder.getAll());

String documentPath = "input.html";

// Initialize an object of the HTMLDocument class
final HTMLDocument document = new HTMLDocument(documentPath);
ValidationResult validationResult = validator.validate(document);

for (RuleValidationResult ruleResult : validationResult.getDetails()) {
    //  list only unsuccessful rule
    if (!ruleResult.getSuccess()) {
        // print the code and description of the rule
        System.out.println(String.format("%s: %s = %s",
                ruleResult.getRule().getCode(),
                ruleResult.getRule().getDescription(),
                ruleResult.getSuccess()
        ));

        // print the results of methods with errors
        for (ITechniqueResult ruleDetail : ruleResult.getErrors()) {
            // print the code and description of the method
            StringBuilder str = new StringBuilder(String.format("\n{0}: {1} - {2}",
                    ruleDetail.getRule().getCode(),
                    ruleDetail.getSuccess(),
                    ruleDetail.getRule().getDescription()
            ));
            // get an error object
            IError error = ruleDetail.getError();
            // get a target object
            Target target = error.getTarget();
            // get error type and message
            str.append(String.format("\n\n\t%s : %s",
                    error.getErrorTypeName(),
                    error.getErrorMessage()
            ));

            if (target != null) {
                // Checking the type of the contained object for casting and working with it
                if (target.getTargetType() == TargetTypes.CSSStyleRule) {
                    ICSSStyleRule cssRule = (ICSSStyleRule) target.getItem();
                    str.append(String.format("\n\n\t%s",
                            cssRule.getCSSText()
                    ));
                }
                if (ruleDetail.getError().getTarget().getTargetType() == TargetTypes.CSSStyleSheet) {
                    str.append(String.format("\n\n\t%s",
                            ((ICSSStyleSheet) target.getItem()).getTitle()
                    ));
                }
                if (ruleDetail.getError().getTarget().getTargetType() == TargetTypes.HTMLElement) {
                    str.append(String.format("\n\n\t%s",
                            ((HTMLElement) target.getItem()).getOuterHTML()
                    ));
                }
            }
            System.out.println(str);
        }
    }
}

Para cada criterio fallido, el código enumera las descripciones de las reglas, los métodos fallidos, los mensajes de error y destaca el elemento HTML o CSS exacto en el que se encontró el problema. Este enfoque es ideal para generar un informe de accesibilidad completo y preciso, que incluya el contexto del error y diagnósticos técnicos para los desarrolladores.

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.
• Para obtener instrucciones sobre cómo comprobar la compatibilidad del contenido web con lectores de pantalla, consulte el artículo Accesibilidad de lectores de pantalla. Aprenderá a comprobar el texto alternativo y otros elementos clave.
• 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.
  

Aspose.HTML ofrece una herramienta en línea gratuita Comprobador de contraste de color para comprobar las relaciones de contraste en tus diseños web. Esta herramienta proporciona información sobre si los colores elegidos cumplen las normas de accesibilidad.