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