20241112_UB_IL3_InclusionAccesibilidad

INCLUSIÓN Y ACCESIBILIDAD EN LA CREACIÓN DE CONTENIDOS DIGITALES

Dra. Silvia Andrea Cristian Ladaga

Directora del Máster en Accesibilidad Digital para Educación, Comunicación y Diseño. Facultad de Educación - Universidad de Barcelona.

Creación de contenidos en editores

Nociones de video accesible

Principios básicos de accesibilidad

Conclusiones

Introducción

• Directora del Máster en Accesibilidad Digital para Educación, Comunicación y Diseño, Universidad de Barcelona

• Profesora en la Facultad de Educación, Universidad de Barcelona
• Consultora e investigadora de Accesibilidad Web.

https://eared.org/ y https://ladaga.net/

Objetivo

La sesión abordará condiciones y conceptos para la creación de contenidos digitales accesibles, en base a criterios del DUA y las pautas WCAG.

Accesibilidad Digital

Es la perspectiva que estudia y establece las características que deben tener los productos digitales (y su contenido) para que puedan ser utilizados por todas las personas , en condiciones de autonomía, seguridad y sencillez.

IMPLICA:

• Percibir los contenidos (ver, escuchar)
• Entender la información (simplicidad)
• Comprender el camino (moverse, navegar la interfaz)
• Interaccionar con los objetos (activar)

Páginas web / Plataformas

Apps

1. Los entornos de aprendizaje...

1. ...
2. Los contenidos

Documentos / Archivos

¿Quién crea contenido accesible?

• Usuarios editores / Creadores de contenidos
• Desarrolladores

Institución

LMS

Desarrolladores plataforma

Desarrolladores internos

Rol editor. Creador de contenido

Sitio / página de interacción con los estudiantes

Usuario editor Creador de Contenidos

PARA TODAS LAS PERSONAS

Impedimentos:

• contextos de uso,
• situaciones discapacitantes,
• circunstancias temporales

Discapacidades:

• crónicas
• temporales

(físicas, intelectuales, emocionales)

Visual / baja visión, ceguera total. Auditiva/ sordera. Motriz/ lesión medular, traumatismos Del Habla/ disfasia, TEL (trastorno de desarrollo lingüístico o disfasia de desarrollo). Cognitiva/ dislexia, trastorno del espectro autista (TEA).

Visual / cirugía, flash lumínico, conjuntivitis Auditiva/ volumen alto, barotrauma (*) (avión, montaña, etc.). Motriz/ de pie en el bus, impedimento por manos ocupadas. Del Habla/ biblioteca, hospital. Cognitiva/ stress, trastornos del sueño.

Imagen de jcomp en Freepik

(*) Lesión causada por cambios barométricos, es decir, de la presión del aire o del agua.

Estándares:

Pautas de Accesibilidad para el Contenido Web (WCAG).

• Perceptible
• Comprensible
• Operable
• Robusto

(Web Content Accessibility Guidelines - WCAG) son unos recomendaciones que explican cómo hacer el contenido Web accesible para personas con discapacidad creados por la W3C. World Wide Web Consortium (W3C), es un consorcio internacional que genera recomendaciones y estándares que aseguran el crecimiento de la World Wide Web a largo plazo. Fué creado el 1 de octubre de 1994, por Tim Berners-Lee en el Instituto Tecnológico de Massachusetts.

https://www.w3.org/TR/WCAG22/

Imagen de jcomp en Freepik

Estándares:

COGA

«Cognitive and Learning Disabilities Accessibility Task Force» o en castellano: Grupo de Trabajo sobre Accesibilidad para Discapacidades Cognitivas y del Aprendizaje. Proporciona patrones de diseño y pautas técnicas para hacer que el contenido sea útil para personas con discapacidades cognitivas y de aprendizaje. Está desarrollando varias líneas de trabajo y documentos con el fin de entender las dificultades específicas de públicos con necesidades de accesibilidad cognitiva y proponer pautas de aplicación para que las webs cubran esas necesidades.

Imagen de jcomp en Freepik

Documentos de texto y presentaciones

• Elección tipográfica
• Estructura y semántica de documentos.

• Títulos nivel 1, 2, 3...
• Párrafos
• Enlaces
• Imágenes
• Uso color

Tipos sin serif o palo seco

TIPOGRAFÍAS

Tipos con y sin serif

Las letras "paloseco", de "palo seco", "sans serif" o "sin gracias" son aquellas que carecen de las pequeñas terminaciones llamadas remates, gracias o serifas.

• Fuentes usuales.
• No más de dos tipografías por presentación.
• Usar decorativas solo si las necesitamos para enfatizar.

TIPOGRAFÍAS

interacción

interacción

"... se da entre los miembros de una comunidad de aprendizaje mediante la participación auténtica y comprometida de los participantes con los tutores, con los otros participantes y con la tarea de aprendizaje en las listas de distribución o en los foros electrónicos".

"... se da entre los miembros de una comunidad de aprendizaje mediante la participación auténtica y comprometida de los participantes con los tutores, con los otros participantes y con la tarea de aprendizaje en las listas de distribución o en los foros electrónicos".

TEXTOS DE PÁRRAFO

• Fuentes sin serif
• Tipo normal o semibold
• Tamaño 12 / 14 puntos
• No utilizar párrafos justificados completos
• Justificación a la izquierda
• Interlineado 1,5
• Separación de párrafos
• Utilizar estilos
• Longitud de líneas entre 40 / 60 caracteres
• No recomendadas cursivas y subrayados
• Utilizar may/min de preferencia, mayúsculas para títulos cortos

• Títulos y subtítulos: usar los estilos de títulos predefinidos o de generación propia (como Título 1, Título 2, etc.). Los títulos crean una jerarquía que permite dividir el contenido en secciones, facilita la navegación y comprensión del documento o la presentación.
• Listas: Para organizar ideas o elementos, utilizar listas con viñetas o numeradas a partir de la herramienta del editor. En Word, los estilos de lista añaden semántica, permitiendo a los lectores de pantalla identificar rápidamente que se trata de una lista, lo cual es fundamental para accesibilidad.
• Secciones y sub-secciones: En Word, los saltos de sección permiten dividir el contenido en partes claras (por ejemplo, Saltos de Página o de Sección). En PowerPoint, cada diapositiva o sección de diapositivas también debería seguir una secuencia lógica para guiar al lector o espectador.
• Elementos Visuales (como tablas, imágenes o gráficos): Estos deben ser ubicados y organizados de forma coherente y con títulos descriptivos, lo que facilita que el lector o el usuario de un lector de pantalla entienda el propósito de cada visual.

Estructura y semántica de documentos.

• Personas con ceguera o baja visión
• Personas con discapacidad intelectual
• Tecnologías asistivas

Jerarquía de títulos

• H1
• H2

• H3
• H4

Etiquetas H (del inglés Headings) o Encabezados (html) son parte del lenguaje de programación que establece la jerarquía (o importantes) de las diferentes secciones de un texto

• Usar los estilos y herramientas directos de los editores: No simular un título cambiando solo el tamaño o formato de la fuente; hay que usar los estilos de título. Lo mismo aplica para listas.
• Dar sentido a cada tipo de contenido: Por ejemplo, si se presenta una lista de elementos, es importante que sea reconocida como lista; si se muestra un gráfico, debe incluir un título descriptivo que ayude a comprender el dato visual. En presentaciones (ej.: PowerPoint), los elementos deben tener títulos y notas explicativas para guiar el recorrido.
• Evitar espacios en blanco o tabulaciones para crear estructura: En Word, no se debe simular una columna o un salto de página mediante espacios o tabulaciones. En PowerPoint, la organización de objetos en una diapositiva debe tener un flujo claro, evitando mover el contenido de manera desordenada o dispersa.

• Añadir metadatos y texto alternativo: En todos los editores, las imágenes y gráficos deben incluir texto alternativo que describa su contenido, haciendo el documento más accesible.

Estructura y semántica de documentos.

• Personas con ceguera o baja visión
• Personas con discapacidad intelectual
• Tecnologías asistivas

Correspondencia color - valor

FUNCIÓN CROMÁTICA

• Contraste entre figura y fondo
• Crear jerarquías
• Codificar
• Continuidad visual
• Pero…
• NO generar información sólo apoyada en el uso del color

equivalencia escala grises con escala cromática

Validador color Contrast Ratio

Asegurarse de que la información también esté disponible en formato no visual, ni transmitida únicamente a través del color.

FUNCIÓN CROMÁTICA

Evitar dependencia del color

El ratio de contraste es la medida de la diferencia de luminosidad entre dos colores que puede tener un valor en una escala de 1 a 21. Un ratio de contraste más alto indica que hay una mayor diferencia entre los dos colores y, por ende, una mayor legibilidad

• Selecciona el botón verde

• Sobre el campo azul encontrarás las palabras correctas

• Selecciona los íconos verdes para correcto y rojo para incorrecto

Validador color Contrast Ratio

Evitar dependencia del color

FUNCIÓN CROMÁTICA

TEXTO ALTERNATIVO («alt»)

TEXTO ALTERNATIVO («alt»)

ENLACES ACCESIBLES

• Diferencia los enlaces de los botones. Un botón hace algo, permite llevar a cabo una acción. Un enlace lleva a algún sitio, permite navegar.
• Evita links en palabras como “click aquí”, (deben ser significativos, describir hacia donde llevará ese enlace).
• No uses solo el color para indicar un enlace. No usar únicamente el color para codificar es un principio de accesibilidad. No olvidar subrayar los enlaces. (Criterio de éxito 1.4.1 WCAG)
• Especifica cuándo el link se abre en una pestaña nueva. Abrir una ventana nueva sin avisar puede desorientar a los usuarios de lectores de pantalla, especialmente si se abre un PDF en nueva pestaña sin avisar. La solución es avisar de antemano que el enlace se abrirá en una nueva pestaña.

• Clic aquí
• enlace
• seguir el enlace
• acceder
• acceder clic aquí

Ladaga, S.A.C. y Rangel Alanís, L. (Ed.) (2022). Accesibilidad: comunicación y educación para todas las personas (nueva pestaña). Barcelona: LMI. (Colección Transmedia XXI)

Listado de enlaces no desriptivos de un sitio.

ENLACES ACCESIBLES

Universia Fundación. (2021) «Universidad y Discapacidad. V estudio sobre el grado de inclusión del sistema universitario español respecto de la realidad de las personas con discapacidad.» Tabla 26 Distribución por tipo de discapacidad, pág. 22. https://sid-inico.usal.es/documentacion/v-estudio-sobre-el-grado-de-inclusion-del-sistema-universitario-espanol-respecto-de-la-realidad-de-las-personas-con-discapacidad/

Universia Fundación. (2021) «Universidad y Discapacidad. V estudio sobre el grado de inclusión del sistema universitario español respecto de la realidad de las personas con discapacidad(nueva pestaña)» Tabla 26 Distribución por tipo de discapacidad, pág. 22.

IMÁGENES EN MOVIMIENTO

IMÁGENES EN MOVIMIENTO

«Umbral de tres destellos o menos» --> no implementar este recurso si supera las tres veces por segundo de movimiento, como manera de prevenir ataques en personas que presentan desórdenes convulsivos por fotosensibilidad (epilepsia foto-sensitiva). De preferencia: las imágenes animadas como los GIF, que no excedan los 5 segundos de destello/movimiento ya que son distractivas para las personas con déficit de atención o problemas cognitivos. (WCAG, nivel A 2.3.1)

INFORME DE ACCESIBILIDAD

ppt

Word

Pruebas con tecnologías asistivas

INFORME DE ACCESIBILIDAD

Verificar la percepción de la información con lectores de pantalla y otras herramientas de asistencia.

Software y hardware informáticos:

• programas de reconocimiento de voz,
• lectores de pantalla (ej. NVDA)
• aplicaciones de ampliación de pantalla

ayudan a las personas con discapacidades sensoriales y de movilidad a usar computadoras y dispositivos móviles.

Video Accesible

Crear de manera accesible el contenido multimedia es necesario proporcionar de forma sincronizada contenido alternativo: subtítulos, audiodescripción o transcripción. A partir de estas alternativas, los usuarios con diversas discapacidads o quienes no pueden acceder al canal de audio por impedimento o contexto de uso podrán acceder al contenido.

VIDEO ACCESIBLE

• Personas con discapacidades visuales
• Personas con discapacidades auditivas
• Personas con discapacidades cognitivas
• Personas de edad avanzada
• Personas extranjeras sin dominio del idioma del contenido audiovisual

Colectivos beneficiados:

VIDEO ACCESIBLE

• Subtitulados: personas con sordera, con discapacidad auditiva (SPS)
• Transcripción textual: personas con sordera, con discapacidad auditiva (SPS), o cognitiva.
• Audiodescripción: personas con sordera, con discapacidad visual (AD)
• Interpretación en lengua de signos: (ILS)

Más allá de los usos por impedimentos circunstanciales es importante para muchas personas.

VIDEO ACCESIBLE

• Subtitulados:

• Subtítulos abiertos: Estos subtítulos están integrados en el vídeo y no se pueden desactivar. Esto significa que son inseparables del vídeo.
• Subtítulos cerrado: Este tipo de subtítulos puede ser activado o desactivado fácilmente por el espectador

• Transcripción textual: Es el proceso de convertir el habla de un video en texto. Puede hacerse con tecnología de reconocimiento automático del habla, con un transcriptor humano. • Audiodescripción: Descripción clara, sucinta y gráfica de lo que ocurre en las producciones audiovisuales. Durante los espacios en blanco del diálogo, un narrador describe lo que sucede visualmente en la pantalla. • Interpretación en lengua de signos (no obligatorio)

Video subtítulos abiertos

Estos subtítulos están integrados en el vídeo y no se pueden desactivar. Esto significa que son inseparables del vídeo.

15' con el Dr. Jordi Adell Entrevista, Año 2020.

Video subtítulos cerrados

Este tipo de subtítulos puede ser activado o desactivado fácilmente por el espectador.

Asignatura: Recursos educativos interactivos y en línea. Sincrónica: 06/03/2024 Prof. Dr. Antonio Bartolomé Título: «Educar en Línea. Claves de un cambio».

VIDEO ACCESIBLE

Recomendaciones básicas

• Asegura que el audio incluye una alternativa de texto a ese audio (subtítulos o transcripciones).
• Asegura que el vídeo incluya una alternativa de audio para el contenido visual del vídeo.
• Evita añadir contenido parpadeante. Puede provocar convulsiones.
• En la medida de lo posible, proporciona interpretación de lengua de señas ára el contenido de audio y vídeo.

Oncins Noguer Estel·la (2024)

VIDEO ACCESIBLE

VIDEO

Recomendaciones básicas

AUDIO

• Evitar los sonidos o ruidos de fondo.
• Hablar de manera modulada, con claridad y lentamente para facilitar el procesamiento de la información.
• Utilizar un lenguaje claro de entender.
• Ofrecer una explicación a los elementos sonoros.

• Evitar agregar objetos parpadeantes.
• Asegurar que el texto sea visible y no se oculte tras otros objetos.
• Planificar la audidescripción de los contenidos visuales.
• Hablante visible (lectura de labios).
• Tener en cuenta la incorporación del intérprete de lengua de signos.

Cómo crear subtítulos

(audio, video y chat)

• Automática: plataforma de reproducción

• Manual:

• Extraer el audio del vídeo
• Realizar la transcripción
• Corregir errores
• Crear un documento de texto.

IA...?

Tipología del texto subtitulado

• Corregir faltas y errores de ortografia.
• 32 carácteres máximo por renglón (líneas cortas)
• Una frase por linea
• Intentar que cada frase tenga sentido

1. Tipografía legible y tamaño de fuente suficiente.
2. Contraste adecuado entre texto y fondo.
3. Uso adecuado de texto alternativo para imágenes.
4. Uso de colores sin depender solo de ellos para transmitir información.
5. Estructura clara y consistente en los encabezados.
6. Incorporación de subtítulos o transcripciones para contenido multimedia.
7. Uso de descripciones para gráficos o tablas.
8. Evitar parpadeos o animaciones rápidas.
9. Uso correcto de enlaces con descripciones claras.
10. Verificación de accesibilidad mediante herramientas integradas.

Conclusiones

Condiciones básicas

...Garantizar la transmisión de la información, a todas las personas, por canales de comunicación accesibles:

IMPLICA:

• Percibir los contenidos (ver, escuchar)
• Entender la información (simplicidad)
• Comprender el camino (moverse, navegar la interfaz)
• Interaccionar con los objetos (activar)

Hacia la inclusión...

Eliminar

las barreras de participación.

Abolir

el concepto de audiencia ideal, somos personas con facultades, contextos y capitales culturales diferentes.

Igualar

las oportunidades, no discriminar.

Incluir

las diferentes capacidades físicas, cognitivas y funcionales.

100% Completado

Inclusión

Referencias:

• Centro para el Diseño Universal, N.C. State University. “Principios del diseño universal” Compilado por defensores del diseño universal, en orden alfabético: Bettye Rose Connell, Mike Jones, Ron Mace, Jim Mueller, Abir Mullick, Elaine Ostroff, Jon Sanford, Ed Steinfeld, Molly Story & Gregg Vanderheiden. Versión 2.0 – 4/1/97.Accesibilidad en la Web. Universidad Nacional de Córdoba. Disponible en https://blogs.unc.edu.ar/accesibilidad/accesibilidad/principios-de-diseno-universal/

• Oncins Noguer Estel·la (2024) Vídeos accesibles: ¿Cómo sabemos que los vídeos son accesibles?- Proyecto LenguAccesibles: Vídeos divulgativos sobre la accesibilidad en la enseñanza de lenguas Coordinadora Elena Martín Monje. Canal UNED. España.

• Universia Fundación. (2021) “Universidad y Discapacidad. V estudio sobre el grado de inclusión del sistema universitario español respecto de la realidad de las personas con discapacidad.” En colaboración con Fundación ONCE; Ministerio de Derechos Sociales y Agenda 2030, Gobierno de España; Comité Español de Representantes de personas con discapcidad (CERMI); Universidades Españolas (CRUE). Disponible en:

• Chamorro, M. F., Duarte Caballero, A., Calderón Giménez, N. M., Duarte Masi, S., & Jiménez Chávez, V. E. (2021). Accesibilidad de información en la web de instituciones oficiales de Paraguay. Palabra Clave (La Plata, Argentina), 10(2), e129. https://doi.org/10.24215/18539912e129

• World Wide Web Consortium (W3C) Principios de Accesibilidad

Imágenes: www.freepik.es

cladaga@ub.edu Silvia Andrea Cristian Ladaga Directora Máster Accesibilidad Digital en Educación, Comunicación y Diseño www.eared.org, Universidad de Barcelona.

¡Muchas gracias!

Noviembre 2024