Texto alternativo – Accesibilidad web – ejemplos de C#

Lector de pantalla como tecnología de asistencia

La accesibilidad del lector de pantalla es un aspecto crucial de la accesibilidad web que se centra en hacer que el contenido digital, en particular los sitios web y las aplicaciones, sea accesible para las personas ciegas o con discapacidad visual.

Un lector de pantalla es una tecnología de asistencia diseñada para leer contenido en línea en voz alta. Convierte el texto digital y el contenido visual en voz o Braille, lo que permite a los usuarios con discapacidad visual navegar, interactuar y comprender el contenido digital. Los lectores de pantalla son necesarios no sólo para las personas ciegas y con discapacidad visual, sino también para los usuarios con discapacidad cognitiva, a quienes les resulta más fácil procesar la información de oído.

Los lectores de pantalla pueden leer cualquier contenido de una página. Por ejemplo, texto de párrafos y encabezados, listas, descripciones de imágenes alternativas, enlaces, botones de opción y otros elementos interactivos. Por lo tanto, para que los lectores de pantalla lean información que sea accesible y comprensible para el usuario, es necesario proporcionar texto alternativo, así como títulos informativos.

Utilice las siguientes recomendaciones basadas en WCAG para garantizar que su sitio web sea accesible para las personas que dependen de lectores de pantalla. Esto es importante no sólo para las personas con discapacidad. Mejorará la experiencia del usuario para todos y permitirá que su sitio tenga una clasificación más alta en los resultados de los motores de búsqueda.

Texto alternativo

Los lectores de pantalla no pueden traducir una imagen en palabras que el usuario pueda leer, incluso si la imagen solo consta de texto. Para la accesibilidad web, las imágenes deben tener texto alternativo breve y descriptivo para que los usuarios de lectores de pantalla comprendan claramente el contenido y el propósito de la imagen. Además de la importancia del texto alternativo para personas con problemas de visión, cumple otras funciones esenciales:

• El navegador muestra texto alternativo en lugar de la imagen si no está cargada o bloqueada.
• Los motores de búsqueda utilizan texto alternativo y lo consideran al evaluar el propósito y el contenido de una página.

Texto alternativo para imágenes: atributo alt en la etiqueta img

Asegúrese de que todos los elementos informativos <img> tengan texto alternativo breve y descriptivo, y que todos los elementos decorativos <img> tengan atributos alt vacíos (por ejemplo, alt=""). Al escribir texto alternativo, recuerde que su propósito es transmitir información a los usuarios ciegos sobre el contenido y el propósito de la imagen para que obtengan tanta información del texto alternativo como un usuario vidente obtiene de la imagen misma. El texto alternativo debe indicar la intención, el propósito y el significado de la imagen.

En el siguiente ejemplo, el contenido de la imagen le dice al usuario que el retrato es de una niña y cómo luce:

<img src="girl_with_perl.png" alt="A European girl is depicted in an exotic dress, oriental turban and with a very large pearl as an earring">

Para asegurarse de que su texto alternativo no moleste a las personas que usan lectores de pantalla, use un mínimo de palabras, sea específico y no rellene el texto alternativo con frases de palabras clave. Este no es el lugar para poner palabras clave. No anuncie que se trata de una imagen. La tarea principal es describir con palabras y ayudar a las personas ciegas a comprender el propósito de la imagen en la página.

Atributo alt en Botones – texto alternativo del botón

Usar el atributo alt en botones y botones de imagen es una práctica crucial de accesibilidad web. Los botones de imagen utilizan el atributo alt como etiqueta. El valor del atributo alt debe ser proporcionado y claro, conciso y representativo de la acción realizada cuando el usuario activa el botón, no una descripción de la imagen en sí. Este texto es leído en voz alta por lectores de pantalla, lo que hace posible que las personas ciegas o con discapacidad visual comprendan e interactúen con la funcionalidad del botón.

Verifique que <input type="image"> tenga un atributo alt que no esté vacío.

<input type="image" src="print.jpg" name="submit" alt="Print">

Utilice descripciones específicas y significativas. Evite términos genéricos como “botón” o “imagen”. Si el botón realiza una acción, describe esa acción. Por ejemplo, “Enviar”, “Buscar” o “Ver detalles”. Si el botón es decorativo y no tiene una función, use un atributo alt vacío (alt="") o elimine el atributo alt por completo.

<button type="submit">
    <img src="submit-button.png" alt="Submit Form">
</button>

Texto alternativo para contenido representado usando un elemento <object>

El elemento <object> incorpora contenido externo, como imágenes, videos o aplicaciones interactivas, en una página web. Para que este contenido sea accesible para personas con discapacidades, debe utilizar el atributo alt en el tipo de contenido incrustado.

Si el contenido es una imagen, utilice el atributo alt dentro del elemento <object> para proporcionar texto alternativo. El texto alternativo debe describir el propósito del contenido o dar una descripción significativa. Por ejemplo:

<object >
    <img src="aspose.gif" alt="Logo Aspose company" />
</object> 

<object data="companylogo.gif" type="image/gif">
    <p>Company name</p>
</object>

Si el contenido es puramente decorativo y no transmite información significativa, considere usar un atributo alt vacío u omitirlo.

Elementos <label> como etiquetas de texto asociadas con controles de formulario

El uso de elementos <label> para asociar etiquetas de texto con controles de formulario es una práctica fundamental en el desarrollo web y un aspecto esencial de la accesibilidad web. Este método mejora la usabilidad y garantiza que los usuarios, incluidas las personas con discapacidades, puedan comprender e interactuar eficazmente con los formularios.

Utilice el elemento <label> para asociar un control de formulario con una etiqueta explícitamente. La etiqueta se adjunta a un control de formulario particular utilizando el atributo for. El valor del atributo for debe ser el mismo que el del atributo id del control de formulario.

<label for="firstname">First name:</label>
<input type="text" id="firstname">

<label for="password">Enter password:</label>
<input type="password" id="password">

El lector de pantalla anuncia una etiqueta cuando el control recibe atención, lo que proporciona a los usuarios discapacitados contexto y comprensión del propósito del control. Las etiquetas son importantes para varios tipos de controles de formulario, como entradas de texto, botones de opción, casillas de verificación y menús desplegables. Utilice siempre etiquetas para estos controles para garantizar una experiencia de usuario clara y accesible. Se utilizan etiquetas explícitamente asociadas para todos los elementos <input> excepto:

• botones – los botones se autoetiquetan
• hidden inputs – entradas con el atributo de tipo value de oculto, por ejemplo, type="hidden"
• input type=“image” – la etiqueta la proporciona el atributo alt
• input type=“reset” – la etiqueta la proporciona el atributo value
• input type=“submit” – la etiqueta la proporciona el atributo value.

Atributo title para identificar controles de formulario cuando no se puede utilizar un elemento <label>

Utilice el atributo title para proporcionar un nombre accesible para los controles de formulario cuando el diseño visual no incluya texto en pantalla que pueda asociarse con el control como una etiqueta. Los agentes de usuario, incluidas las tecnologías de asistencia, pueden pronunciar este atributo de title.

Éxito

Payment card details

<fieldset><legend>Payment card details</legend>
<input id="cardnumber" name="cardnumber" title="Enter Card number" type="text" >
<input id="cvc" name="cvc" title="Enter CVC code" type="text" >
</fieldset>

Fallar

No hay ningún enlace de etiqueta para el campo de entrada y también falta el atributo de título:

<label>Search for:</label>
<input id="searchTerm" type="text" value="" name="searchTerm">

Texto alternativo para emojis, emoticonos, arte ASCII y leetspeak

Debido a que las tecnologías de asistencia como los lectores de pantalla no pueden interpretar imágenes directamente, dependen de texto alternativo para comunicar el significado del contenido que no es texto a los usuarios. Si se utiliza una imagen ASCII, emoji o emoticón, también deben tener una explicación textual de qué es la imagen. Debido a que no se puede usar un atributo alt en <span>, <div>, etc., y la recomendación ARIA no permite nombres accesibles para elementos genéricos, para dar nombres accesibles a emoji, se definen como imágenes. con la propiedad ARIA role="img", que luego le permite crear un nombre accesible usando esta propiedad aria-label.

El atributo role="img" se utiliza para identificar el contenedor de una colección de elementos que juntos forman una única imagen significativa. El texto alternativo es una palabra o frase que está codificada de manera que las tecnologías de asistencia puedan asociarla con un objeto no textual específico y transmite la misma información que el objeto no textual.

Éxito

<abbr title="sad">:(</abbr>
<span aria-label="sad" role="img">:(</span>
<img alt="sad" src="./sad.png">

<div role="img" aria-label="scared face">(ㆆ _ ㆆ)</div>

Fallar

<div role="img">(ㆆ _ ㆆ)</div>

Busque siempre un texto alternativo claro y significativo que transmita la esencia del emoji, emoticón, arte ASCII o leetspeak mientras mantiene el tono emocional o expresivo deseado.

<figure> y <figcaption>

Un elemento <figure>, diseñado para albergar <img> y <figcaption>, es autónomo y generalmente se hace referencia a él como un solo bloque desde el flujo principal del documento. La <figura> se puede separar del flujo principal del documento sin afectar su significado.

La <figura> crea una asociación semántica con la <figcaption> que contiene, que puede proporcionar un resumen o información adicional sobre la figura y/o relacionarla con el documento. Sin embargo, <img> aún necesita texto alternativo y, para evitar redundancia, esta información no debe pasarse a través de <figcaption>.

<figure>
    <img src="./sunset.jpg" alt="Sunset on the sea" />
    <figcaption>Sunset on the sea</figcaption>
</figure>

Cómo verificar el texto alternativo de una imagen con Aspose.HTML for .NET

Aspose.HTML for .NET proporciona el espacio de nombres Aspose.Html.Accessibility, que está destinado a todas las manipulaciones y comprobaciones relacionadas con la accesibilidad web. Veamos un fragmento de código relacionado con la verificación del texto alternativo en busca de imágenes y etiquetas. Para revisar su página en busca de texto alternativo y criterios de accesibilidad, debe seguir estos pasos:

1. Utilice el constructor WebAccessibility() para crear una instancia de la clase WebAccessibility responsable de la validación de la accesibilidad web.
2. Utilice la propiedad Rules del objeto webAccessibility que proporciona acceso a una colección de reglas de accesibilidad web.
3. Llame al método CreateValidator() para crear un objeto validador. Básicamente, está configurando un validador que comparará el contenido web con las pautas de accesibilidad específicas y los criterios de éxito asociados con la pauta que ha especificado.
4. Cargue un documento HTML usando uno de los constructores HTMLDocument().
5. Utilice el método Validate(document) para comprobar la accesibilidad del documento HTML. El resultado se almacena en la variable validationResult.
6. Verifique si la validación fue exitosa. Imprima la información detallada sobre los errores, incluido el elemento HTML asociado.

Considere un ejemplo del archivo HTML alt-tag.html:

<html>
    <body>
        <img src="./resourses/login.png" alt="Login icon">

        <label>Enter login:</label>
        <!--error: for input missing label with for="login" -->
        <input type="text" id="login">

        <label for="password">Enter password:</label>
        <input type="password" id="password">
    
        <!--error: for image alt attribute must not be empty -->
        <img src="./resourses/sign.png" alt="">
    </body>
</html>

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

// Prepare a path to a source HTML file
string documentPath = Path.Combine(DataDir, "alt-tag.html");

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

// Get from the rules list Principle "1. Perceivable" by code "1" and get guideline "1.1 Text Alternatives"
var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.1");

// Create an accessibility validator - pass the found guideline as parameters and specify the full validation settings
var validator = webAccessibility.CreateValidator(guideline, ValidationBuilder.All);

// Initialize an HTMLDocument object
using (var document = new HTMLDocument(documentPath))
{
    var validationResult = validator.Validate(document);
    if (!validationResult.Success)
    {
        // Get all the result details 
        foreach (var ruleResult in validationResult.Details)
        {
            // If the result of the rule is unsuccessful           
            if (!ruleResult.Success)
            {
                // Get an errors list 
                foreach (var result in ruleResult.Errors)
                {
                    // Check the type of the erroneous element, in this case, we have an error in the HTML Element
                    if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
                    {
                        var rule = (HTMLElement)result.Error.Target.Item;
                        Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
                        Console.WriteLine("HTML Element: {0}", rule.OuterHTML);
                    }
                }
            }
        }
    }
}

El resultado de la verificación del archivo será una lista de resultados que contienen un error de tipo IError. El programa saldrá a la consola:

    Error in rule H37 : Img element missing an alt attribute. The value of this attribute is referred to as "alt text".
    HTML Element: <img src="./resourses/sign.png" alt="">
    Error in rule H44 : Check that the label element contains for attribute.
    HTML Element: <label>Enter login:</label>
    Error in rule H65 : Check that the title attribute identifies the purpose of the control and that it matches the apparent visual purpose.
    HTML Element: <input type="text" id="login">
    Error in rule F65 : Absence of an alt attribute or text alternative on img elements, area elements, and input elements of type "image".
    HTML Element: <img src="./resourses/sign.png" alt="">

References

• How to Meet WCAG (Quick Reference)
• H2: Combining adjacent image and text links for the same resource
• H24: Providing text alternatives for the area elements of image maps
• H30: Providing link text that describes the purpose of a link for anchor elements
• H35: Providing text alternatives on applet elements
• H36: Using alt attributes on images used as submit buttons
• H37: Using alt attributes on img elements
• H44: Using label elements to associate text labels with form controls
• H53: Using the body of the object element
• H65: Using the title attribute to identify form controls when the label element cannot be used
• H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore
• H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak