Accesibilidad multimedia – ejemplos de C#

Multimedia accesible

La accesibilidad web multimedia se refiere a garantizar que el contenido multimedia, como vídeos, archivos de audio y presentaciones interactivas, sea accesible para todas las personas, incluidas aquellas con discapacidades. El contenido multimedia prevalece en Internet y todos deben acceder y comprender la información transmitida. Los medios accesibles deben satisfacer todas las necesidades de las personas con discapacidad y deben incluir:

Los subtítulos son versiones de texto del contenido de audio sincronizadas con el video. Son esenciales para las personas sordas o con problemas de audición y también benefician a las personas que aprenden un nuevo idioma o a quienes se encuentran en entornos ruidosos.
Transcripciones son transcripciones de texto del contenido hablado en un archivo de video o audio que permite a los usuarios acceder a la información en formato de texto. Esto es valioso para las personas que no pueden escuchar el audio y para la optimización de los motores de búsqueda.
Descripciones de audio: son narraciones que describen el contenido visual dentro de un video o presentación. Son esenciales para personas ciegas o con discapacidad visual y les ayudan a comprender los elementos visuales del contenido.
Controles del reproductor son controles accesibles que permiten a los usuarios pausar, reproducir, rebobinar y ajustar el volumen mediante atajos de teclado o tecnologías de asistencia.
Accesibilidad del teclado es cuando los elementos interactivos dentro del contenido multimedia son navegables y utilizables con un teclado. Esto incluye botones, enlaces y menús.

El multimedia accesible está personalizado para tecnologías de asistencia. Esto significa que las personas ciegas ya no tienen que depender de que otros les lean. Simplemente abren el navegador e interactúan con el contenido por su cuenta, ya que el software lector de pantalla está diseñado para leer contenido en línea en voz alta.

Sin un título para un archivo de audio, las personas sordas no pueden reconocer la información significativa que transmite el audio. Pero los subtítulos, si están bien escritos y sincronizados con el contenido de audio, proporcionan descripciones de acciones y detalles visuales críticos en multimedia.

Ya cubrimos cómo verificar el texto alternativo en busca de imágenes, botones y más en el artículo Accesibilidad del lector de pantalla. Aquí, veremos la importancia de utilizar un elemento <track> para la accesibilidad multimedia.

Elemento `<track>` para proporcionar descripciones de audio y video

Las personas con discapacidad visual no pueden ver el contenido de vídeo y las personas con discapacidad auditiva no pueden escuchar el contenido de audio. El propósito principal del elemento <track> es proporcionar títulos y subtítulos para contenido de video y audio. Si bien no está diseñado para proporcionar descripciones de audio directamente, se puede utilizar junto con otros métodos para que las descripciones de audio estén disponibles para personas con discapacidad visual.

Subtítulos para vídeo

El uso del texto alternativo del vídeo no es una práctica estándar ni recomendada en HTML. El atributo alt se utiliza principalmente para proporcionar texto alternativo para imágenes y no está destinado a elementos <video>. Sin embargo, existen enfoques alternativos para hacer que el contenido de vídeo sea accesible.

Los subtítulos del video incluyen una descripción textual de todos los ruidos de fondo esenciales y otros sonidos y el texto de todos los diálogos y narraciones. El elemento <video> debe incluir un elemento <track> con la propiedad kind="captions". Los subtítulos deben transmitir toda la información auditiva relevante del video, incluidos diálogos, pistas musicales, efectos de sonido y otros datos vitales para los usuarios sordos. A continuación se explica cómo puede utilizar el elemento <track> para accesibilidad multimedia:

1<video poster="myvideo.png" controls>
2    <source src="myvideo.mp4" srclang="en" type="video/mp4">
3    <source src="myvideo.webm" srclang="fr" type="video/webm">
4    <source src="myvideo.webm" srclang="ua" type="video/webm"> 
5    <track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
6    <track src="myvideo_fr.ttml" kind="captions" srclang="fr" label="French">
7    <track src="mvideo_ua.vtt" kind="captions" srclang="ua" label="Ukrainian">
8</video>

Veamos la línea 5 del código HTML. El atributo src del elemento <track> especifica el nombre del archivo de pista y apunta al archivo WebVTT (“myvideo_en.vtt”) que contiene los títulos o subtítulos. El atributo kind describe el contenido del archivo. El atributo srclang especifica el idioma del archivo de pista. El atributo label especifica el nombre de la pista. Ninguno de estos atributos, excepto src, es obligatorio. Sin embargo, son muy recomendables ya que mejoran la claridad.

Subtítulos para audio

Asegúrese de que todos los elementos con contenido de audio en el sitio web tengan un título utilizando el elemento <track> con la propiedad kind="captions". Los subtítulos son texto (sincronizado con el archivo de audio) del diálogo, la narración y cualquier información auditiva importante, para beneficio de los usuarios sordos. El siguiente código muestra cómo agregar dos pistas diferentes, una en inglés y otra en español:

1<audio>
2   <source src="mySpeech.mp3" type="audio/mp3">
3   <track src="captions_en.vtt" kind="captions" srclang="en" label="english_captions">
4   <track src="captions_es.vtt" kind="captions" srclang="es" label="spanish_captions">
5</audio>

Descripción de audio para elementos `<video>`

Agregar descripciones de audio a los elementos <video> es una práctica de accesibilidad crucial, que garantiza que las personas con discapacidad visual puedan comprender y disfrutar completamente el contenido del video. Si bien las personas ciegas pueden escuchar el contenido de audio de los vídeos sin problemas, se pierden los aspectos visuales de las películas, como las expresiones faciales y las escenas. En las películas que son completamente visuales, suceden muchas cosas, sin ningún componente auditivo. Por ejemplo, una persona puede hacer una expresión facial pero no hablar. Las descripciones de audio proporcionan información narrada sobre los elementos visuales de un vídeo, como escenas, acciones y gestos.

El siguiente código muestra cómo agregar dos descripciones de audio diferentes, una en inglés y otra en español:

1<video width="300" height="200">
2    <source src="myVideo.mp4" type="video/mp4">
3    <track src="audio_desc_en.vtt" kind="descriptions" srclang="en" label="english_description">
4    <track src="audio_desc_es.vtt" kind="descriptions" srclang="es" label="spanish_description">
5</video>

Verifique la accesibilidad multimedia con Aspose.HTML

Para comprobar que su sitio web cumpla con los criterios de accesibilidad multimedia, debe seguir estos pasos:

Utilice el constructor WebAccessibility() para crear una instancia de la clase WebAccessibility responsable de la validación de la 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 Principio para obtener el principio requerido por código de WCAG.
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.
Cargue un documento HTML usando 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.
Verifique si la validación fue exitosa. Imprima la información detallada sobre los errores, incluido el elemento HTML asociado.

En este ejemplo, puede verificar que un documento HTML cumpla con todos los criterios de la directriz “1.2 Time-based Media”.

 1// Validate HTML for multimedia accessibility using C#
 2
 3// Initialize a webAccessibility container
 4WebAccessibility webAccessibility = new WebAccessibility();
 5
 6// Get from the rules list Principle "1.Perceivable" by code "1" and get guideline "1.2 Time-based Media"
 7Guideline guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.2");
 8
 9//Create an accessibility validator, pass the found guideline as parameters, and specify the full validation settings
10AccessibilityValidator validator = webAccessibility.CreateValidator(guideline, ValidationBuilder.All);
11
12// Initialize an HTMLDocument object
13using (HTMLDocument document = new HTMLDocument("https://www.youtube.com/watch?v=Yugq1KyZCI0&t=4s"))
14{
15    // Check the document
16    ValidationResult validationResult = validator.Validate(document);
17
18    // Checking for success
19    if (!validationResult.Success)
20    {
21        // Get all result details
22        foreach (RuleValidationResult ruleResult in validationResult.Details)
23        {
24            // If the result of the rule is unsuccessful
25            if (!ruleResult.Success)
26            {
27
28                // Get an errors list
29                foreach (ITechniqueResult result in ruleResult.Errors)
30                {
31                    // Check the type of the erroneous element
32                    if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
33                    {
34                        HTMLElement rule = (HTMLElement)result.Error.Target.Item;
35                        Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
36                        Console.WriteLine("HTML Element: {0}", rule.OuterHTML);
37                    }
38                }
39            }
40        }
41    }
42}

Example-ValidateMultimediaAccessibility.cs hosted with ❤ by GitHub

Para comprobar, por ejemplo, la presencia de una audiodescripción, debe seleccionar el criterio deseado y comprobarlo.

 1    // Get from the rules list Principle "1.Perceivable" by code "1" and get guideline "1.2 Time-based Media"
 2    var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.2");
 3
 4    // Get criterion – 1.2.3 Audio Description or Media Alternative (Prerecorded)
 5    var criterion = guideline.GetCriterion("1.2.3");
 6    
 7    // Create an accessibility validator – and pass the found guideline as parameters and specify the full validation settings
 8    var validator = webAccessibility.CreateValidator(criterion, ValidationBuilder.All);
 9
10    ...

Recuerde que la clave es garantizar que los usuarios con discapacidad puedan acceder al contenido multimedia y comprender su contexto de manera efectiva. La combinación de múltiples técnicas de accesibilidad, como subtítulos, transcripciones y descripciones de audio, puede brindar a todos los usuarios una experiencia integral e inclusiva.

Ver también

En el capítulo Comprobación de Accesibilidad Web, aprenderá a comprobar la accesibilidad de un sitio web para garantizar el cumplimiento de todas las directrices WCAG o solo para cumplir criterios específicos mediante clases y métodos de los espacios de nombres Aspose.Html.Accessibility y Aspose.Html.Accessibility.Results.
El artículo Cómo Mejorar la Accesibilidad de un Sitio Web explica cómo hacer que su sitio web sea accesible para los usuarios y cómo comprobar su cumplimiento de las directrices WCAG mediante la API Aspose.HTML for .NET.
El artículo Accesibilidad del Lector de Pantalla explica cómo diseñar un sitio web para la accesibilidad del lector de pantalla de acuerdo con las directrices WCAG mediante la API Aspose.HTML for .NET.
En el artículo Validador de Accesibilidad, aprenderá sobre la clase AccessibilityValidator, que permite probar reglas de accesibilidad web, como principios, directrices y criterios.
El artículo Errores y Advertencias analiza las clases e interfaces que ayudan a recopilar información sobre errores y advertencias durante las pruebas de accesibilidad web. Se centra en los criterios de fallo y los métodos que informan sobre errores, y proporciona un ejemplo en C# para recuperar errores de accesibilidad web tras probar un documento HTML.

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