Cinco prácticas esenciales para un contenido digital más accesible: soluciones de aprendizaje

by | J de Jun de 2023 | Blog, eLearning

En el aprendizaje electrónico, accesibilidad significa que el contenido está diseñado e implementado de una manera que garantiza la igualdad de acceso y participación para todos los alumnos. Sin embargo, una de las preguntas más comunes sobre la accesibilidad en eLearning es: «¿Por dónde empiezo?» En este artículo, comparto cinco prácticas esenciales que te permiten crear contenido digital más accesible, ¡a partir de hoy! Estas prácticas se pueden integrar a la perfección en su proceso de diseño sin agregar trabajo innecesario y mejorarán la experiencia de aprendizaje para todos.

#1: Agrega texto alternativo a las imágenes

El texto alternativo, abreviatura de «texto alternativo», se refiere a una descripción de imagen utilizada por los lectores de pantalla para brindar accesibilidad a las personas. Todos pueden beneficiarse del texto alternativo, no solo aquellos que usan un lector de pantalla. Por ejemplo, cada vez que hay un problema con la carga de una imagen en una página, este es un ejemplo de lo que podría aparecer con y sin texto alternativo:

Captura de pantalla del lugar donde debería estar una imagen con un pequeño ícono que representa la imagen y el texto alternativo

Figura 1: Se ingresó texto alternativo para esta imagen, por lo que puede identificar cuál es la imagen aunque la página no se haya cargado correctamente

Captura de pantalla del lugar donde debería estar una imagen con un pequeño ícono que representa la imagen y un texto alternativo de marcador de posición que dice

Figura 2: No se ingresó texto alternativo para esta imagen, por lo que se completa el texto alternativo del marcador de posición

¿Cómo se agrega texto alternativo?

La configuración para agregar texto alternativo variará según su herramienta de creación. Por lo general, seleccionará la imagen y luego ingresará el texto en un campo designado.

Este es un ejemplo en Articulate Rise.

Captura de pantalla de Articulate Rise Editar configuración de imagen y texto con

figura 3: Primero, seleccione la opción «Editar» para la imagen y seleccione «Editar etiqueta alt»

Captura de pantalla del cuadro de diálogo

Figura 4: A continuación, ingrese el texto alternativo para su imagen en el campo «Agregar texto» y seleccione «Aceptar»

Me gusta mantener un marcador de posición para el texto alternativo en mi guión gráfico para poder planificar esto al principio del diseño. Es una forma fantástica de averiguar si una imagen realmente agrega valor. Si tiene dificultades para describir una imagen, es posible que no sea la imagen adecuada para su contenido instructivo o que no la necesite en absoluto.

Consejos para escribir un buen texto alternativo

  1. Sea breve pero específico, describiendo exactamente lo que ve en la imagen.
  2. Nunca comience el texto alternativo con «imagen de…» o «imagen de…», pero agregue el tipo de imagen como «captura de pantalla» o «icono».
  3. Incluya cualquier texto que esté en la imagen en su texto alternativo. Por ejemplo, describa las etiquetas y cómo se superponen en un diagrama de Venn.
  4. No repita el texto que ya está en la pantalla, como cuando ya ha descrito la imagen en el contenido o título.
  5. Algunas herramientas de creación le permitirán omitir una imagen decorativa, como un separador de página o un fondo. Alternativamente, puede etiquetarlo como «decorativo».

#2: Revisa el color y el contraste

Una de las formas más comunes de garantizar la claridad para las personas daltónicas es evitar usar solo el rojo y el verde como indicadores o diferenciadores. Por ejemplo, un semáforo en la mayor parte de los EE. UU. tiene rojo en la parte superior y verde en la parte inferior, por lo que incluso si una persona no puede diferenciar entre los dos colores, aún puede identificar qué luz es detener (arriba) o avanzar (abajo). ). En algunas ciudades, sin embargo, los semáforos son horizontales. Si eres daltónico y no sabes que el verde está a la derecha y el rojo a la izquierda, ¡podrías estar en problemas!

Luz de freno vertical con verde iluminado en la parte inferior

Figura 5: Las luces de freno verticales tienen la luz verde en la parte inferior

Autor de la foto: https://www.pxfuel.com/es/foto-gratis-juuyi

Semáforo horizontal con verde iluminado en el extremo derecho

Figura 6: Los semáforos horizontales tienen la luz verde a la derecha

Autor de la foto: https://www.rawpixel.com/image/3299132/free-photo-image-traffic-light-background-cars

Comparemos esto con un ejemplo simple de eLearning. Está diseñando pantallas de comentarios para una pregunta de verificación de conocimientos. Puede parecer más simple usar el verde para lo correcto y el rojo para lo incorrecto, pero las personas con daltonismo no podrán diferenciar los dos. En su lugar, puede optar por incluir la palabra «correcto» o «incorrecto» y un icono de «marca de verificación» o «x».

Un ejemplo de retroalimentación correcta delineada en un recuadro verde y retroalimentación incorrecta delineada en un recuadro rojo.

Figura 7: Un ejemplo de comentarios correctos e incorrectos sin cambios de accesibilidad

Un ejemplo de retroalimentación correcta delineada en un cuadro verde con una marca de verificación verde y la palabra

Figura 8: Un ejemplo de comentarios correctos e incorrectos con cambios de accesibilidad

Este no es el único ejemplo de cómo el daltonismo puede ser un desafío para sus alumnos. Hay varios tipos de daltonismo, como la deuteranopía (verde, amarillo y rojo), la tritanopía (azul/amarillo), la protanopía (rojo, naranja y amarillo) y la acromatopsia (escala de grises). Afortunadamente, hay herramientas disponibles para verificar rápidamente su contenido y verificar si es visible para las personas con distintos tipos de daltonismo. Aquí hay algunos:

Antes

Capturas de pantalla de dos cursos de eLearning: uno con un cheque Deutan que muestra el cambio de color de verde azulado brillante a un azul apagado y un cheque tritan que muestra el cambio de color de amarillos y marrones apagados a tonos de rosa.

Después

Capturas de pantalla de dos cursos de eLearning: uno con un cheque Deutan que muestra el cambio de color de verde azulado brillante a un azul apagado y un cheque tritan que muestra el cambio de color de amarillos y marrones apagados a tonos de rosa.Figura 9: Ejemplos de cursos antes y después del filtro de daltonismo aplicado en Pilestone Color Blind Vision Simulator

Yendo más allá, es común encontrar un contraste de color deficiente en eLearning. A menudo, se agrega texto a un fondo donde la elección del color y/o el tamaño del texto dificultan la lectura. Puede utilizar el comprobador de contraste WebAIM WebAIM: Comprobador de contraste para saber si su contraste de color pasa las WCAG (Pautas de Accesibilidad al Contenido Web) AA y/o AAA. Tu objetivo debe ser pasar todos los niveles.

Capturas de pantalla del verificador de contraste con la comparación del código hexadecimal #FFFFFF texto blanco en primer plano con código hexadecimal #F68B1F texto de fondo naranja versus código hexadecimal #000000 texto negro en primer plano sobre el mismo fondo naranja.  El texto blanco falla WCAG AA y AAA, pero el texto negro pasa.

Figura 10: observe cómo falla el texto blanco sobre este fondo naranja, mientras que el texto negro pasa todos los niveles

Aquí hay dos herramientas adicionales de verificación de contraste que le permitirán cargar una captura de pantalla de su imagen en lugar de seleccionar manualmente los colores de primer plano y de fondo:

https://colorcontraste.cc/ y https://contrastchecker.com/

#3: Probar contenido usando un lector de pantalla

Recientemente trabajé con una empresa que brinda capacitación en braille y otras oportunidades de aprendizaje a personas con pérdida de visión o ceguera. Nuestro objetivo era abordar los desafíos tecnológicos identificados durante las pruebas de accesibilidad para los módulos de aprendizaje electrónico que crearon en Articulate Storyline.

A medida que se implementaba cada solución, un paso esencial en la prueba era verificar el orden de tabulación o la secuencia en la que un lector de pantalla lee el contenido. Para garantizar la compatibilidad con el uso predominante de los dispositivos Apple por parte de los alumnos, utilicé VoiceOver. El proceso es simple: mantén presionado el botón de encendido y dile a Siri que active VoiceOver. Navegue por el módulo y verifique el orden correcto. Luego, repite la pulsación larga y pide a Siri que apague VoiceOver. (Más información sobre el uso de VoiceOver)

Como uso un Apple MacBook Pro, también puedo usar VoiceOver para probar en mi escritorio. Sin embargo, hay muchos lectores de pantalla disponibles en la actualidad de forma gratuita, como el complemento del navegador Google Chrome. Lector de pantalla.

Duendecito es otro excelente complemento de Google Chrome para realizar pruebas, ya que le permite alternar controles como la velocidad y el texto resaltado.

Captura de pantalla de la superposición de la configuración del complemento Pixie en una página web.

Figura 11: Pixie le permite controlar muchas funciones de accesibilidad activándolas según sea necesario

Importante: asegúrese de no tener lectores de pantalla de la competencia ejecutándose al mismo tiempo. Esto puede causar que la funcionalidad de uno interfiera con el otro. Si pruebas uno y no te da buenos resultados, desinstálalo y prueba con otra opción.

Al probar con un lector de pantalla real, puede verificar rápida y fácilmente que su eLearning se lea en el orden apropiado y que no se salte ninguna información. También lo ayuda a identificar el texto alternativo faltante o con una redacción extraña para las imágenes.

#4: Proporcione subtítulos y guiones de audio

Al desarrollar un curso de aprendizaje electrónico sobre el PTSD para agentes de policía, me aseguré de que los clips de audio tuvieran transcripciones y los videos incluyeran guiones de audio y subtítulos. Aunque normalmente se requiere que los oficiales aprueben pruebas de visión y audición, las características de accesibilidad como subtítulos y guiones de audio aún los benefician. Por ejemplo, pueden estar en un entorno ruidoso sin acceso a auriculares. Es bastante fácil incluir ambos para asegurarse de que está siendo lo más inclusivo posible.

Para satisfacer esta necesidad utilicé una herramienta llamada Describir para transcribir los archivos de audio y crear subtítulos para los videos. Para obtener más información sobre cómo crear subtítulos, consulte este artículo: Cómo agregar subtítulos a sus videos.

Durante este proyecto sucedió algo inesperado: un video no producía una transcripción. Vi el video y descubrí que la razón por la que no había transcripción era que había no hay palabras habladas en todo el video. Los efectos del PTSD se demostraron en el video a través de sonidos como sirenas, un portazo, el sonido de fuegos artificiales y otros ruidos que pueden provocar que alguien sufra de PTSD. Ese día aprendí una lección importante: la diferencia entre subtítulos y subtítulos.

Si bien pueden parecer similares, los subtítulos ocultos y los subtítulos tienen propósitos distintos. Los subtítulos proporcionan una transcripción del audio, incluyendo palabras habladas y efectos de sonido. Pueden ser particularmente útiles para los espectadores sordos o con dificultades auditivas, ya que les permite comprender el contenido y el contexto del video. Los subtítulos solo transcriben las palabras habladas y normalmente se utilizan con fines de traducción.

Al crear videos instructivos, los subtítulos son la mejor opción. Hacen que el video sea más accesible e inclusivo para una gama más amplia de espectadores.

¿Qué significó eso para mi video de PTSD? Necesitaba crear subtítulos que describieran lo que se podía escuchar en todo momento, teniendo en cuenta la relevancia de esos sonidos para el contenido.

Captura de pantalla del video de PTSD con un subtítulo cerrado que dice: “[flashback: announcement coming over a radio]”

Figura 12: Captura de pantalla del video de PTSD con subtítulos que describen el ruido de fondo para el alumno

#5: Evite el uso de mayúsculas en títulos y texto

Al escribir títulos y texto en su contenido de eLearning, se pueden usar varios tipos de casos. Examinemos cada tipo de caso usando el título de ejemplo «texto alternativo para accesibilidad».

Todo en mayúsculas: TEXTO ALTERNATIVO PARA ACCESIBILIDAD

Caso mixto o caso de oración: Texto alternativo para accesibilidad

Titulo del caso: Texto alternativo para accesibilidad

Un error de accesibilidad común en eLearning es el uso inapropiado de mayúsculas en los títulos y el texto. Cuando usa mayúsculas, algunos lectores de pantalla pueden asumir que es un acrónimo y leer cada letra. También es más difícil desde la perspectiva de la legibilidad, especialmente para las personas con dislexia, TDAH y personas con autismo. Además, ¿gritar en mayúsculas es realmente el tono que desea establecer para su eLearning?

En lugar de usar mayúsculas, considere usar mayúsculas o minúsculas para los encabezados. Tenga en cuenta que su organización puede tener pautas de estilo sobre el uso de títulos, por lo que esto puede ser algo para discutir con las personas responsables de los estándares de la empresa aplicables.

Práctica de diseño accesible

Al incorporar estas cinco prácticas esenciales en su proceso de diseño, puede ayudar a mejorar la accesibilidad en eLearning. ¡Pero espero que su viaje de aprendizaje no termine aquí! Explore estos recursos de accesibilidad para llevar su práctica de diseño accesible aún más lejos:

[Traducido automáticamente]
Publicación Original

Publicar capacitación

Publique su primera capacitación en Online Education Center totalmente gratis.

Newsletter

Diariamente enviamos un newsletter con los últimos artículos publicados.