¿Cómo crear materiales digitales accesibles para todos?

José María Fernández Gil

7 de junio de 2019. REDES-INNOVAESTIC

Universidad de Alicante

Programa Accesibilidad Digital UA

Iniciativa de promoción, concienciación y formación

En materia de ccesibilidad digital y tecnologías accesiblle

Objetivos

  • Romper barreras digitales
  • Crear directrices para la elaboración de contenido digital accesible
  • Asesorar y formar a la comunidad universitaria en el uso de tecnologías accesibles.
  • Detectar oportunidades de emprendimiento a través de la investigación en accesibilidad,
  • Y la creación de canales de comunicación para su divulgación.

https://web.ua.es/accesibilidad

¿Qué es la accesibilidad?

  • La accesibilidad es el grado en el que todas las personas pueden percibir, comprender y navegar por la información contenida en un documento digital independientemente de sus capacidades técnicas, cognitivas o físicas.

¿Y cómo accede una persona con discapacidad al contenido?

  • Si no puedo ver, utilizo un lector de pantalla.
  • Si mi visión es limitada, utilizo un magnificador de pantalla.
  • Si no puedo escuchar una película, leo los subtítulos.
  • Si no tengo movilidad en las manos puedo dictar y dar órdenes.
  • Si me cuesta comprender lo que leo, puedo configurar el texto a mis necesidades.

¿Quién utiliza tecnologías accesibles?

¡La respuesta puede sorprender...!

No son sólo las personas sin visión o audición, sino que también incluye:

  • Personas con dislexia (10% de la población)
  • Personas con problemas visuales temporales o derivados de la edad (9M mayores en España)
  • Personas que leen subtítulos de un video para no molestar a sus compañeros de trabajo
  • Personas que navegan a través del teclado porque lo encuentran más eficiente
  • Y más

Diseño Universal

  • Cambio de paradigma.
  • No se trata de adaptar contenidos para unos colectivos de personas con discapacidad u otros.
  • Se trata de diseñar contenidos teniendo en cuenta desde el principio que puedan ser percibidos, entendidos y navegables por el mayor número de personas posible.
  • Las barreras digitales son difíciles de percibir

¿Cómo crear contenidos accesibles? 👨🏻‍💻

Vamos a prepararnos para trabajar...

Descarga documento (DOCX 251KB)

Descarga transparencias (PPTX 2,2MB)

Texto claro

  • Crea textos simples con un lenguaje sencillo
  • Usa tamaños de letra como mínimo de 12 puntos
  • Utiliza fuentes de tipo Sans Serif como Arial o Verdana
    Captura de Microsoft Word de la barra de herramienta de fuente donde está seleccionado el tipo de letra Arial y tamaño 12 puntos
    • ️

Formato de texto

  • Usa un interlineado suficiente; al menos 1,5 líneas
  • No abuses del texto centrado o en MAYÚSCULAS
    • No justifiques el texto a ambos lados . Dificulta su lectura y por tanto, su comprensión 👿, sobre todo a personas con dislexia o baja visión.

Idioma

  • Especifica el idioma principal del documento y los cambios de idioma presentes en el texto
  • En caso contrario, la pronunciación no será correcta y perderemos información.

Establecer idioma predeterminado:
Archivo -> Opciones -> Idioma

Captura de pantalla establecer idioma de Microsoft Word. Ir a Archivo - Opciones - Idioma - Predeterminado

Establecer idioma de un fragmento de texto:
Seleccionar texto -> barra de idioma

Ventana de selección de idioma de Word, que se accede desde la barra de idioma o desde Archivo - opciones - idioma para establecer el idioma por defecto

Títulos y estructura

  • Estructura el contenido en apartados, mejora la comprensión y facilita la navegación.
  • No simules títulos cambiando el aspecto del texto, utiliza estilos.
Sección de estilos en la barra de herramientas. Se ven seleccinados Ttiulo1 y Titulo2 para demostrar la importancia de usar los títulos para jerarquizar documentos

Panel de navegación

Vista -> Panel de navegación. Tiene doble función:

  1. Nos hacemos una idea de qué trata el documento
  2. Navegamos por él con facilidad
Panel de navegación de Word donde podemos desplazarnos por los diferentes apartados del documento. Se habilita desde Vista -> Panel de navegación

Imágenes y elementos no textuales

  • Incluye una descripción textual en imágenes y elementos no textuales.
  • La descripción no debe ser superficial y debe responder a estas preguntas:
    1. ¿Qué es?
    2. ¿Cuál es su propósito?
    3. ¿Qué transmite?

¿Qué elementos debemos describir?

  • Imágenes
  • Fórmulas matemáticas
  • Gráficas
  • Esquemas
  • Tablas

No es sólo para personas ciegas:

  • Otros problemas de visión
  • Problemas cognitivos

Introduce el texto alternativo

Foto de pinguinos jugando en la arena, se ve como se pulsa con el botó nderecho del ratón y en el menú contextual se pulsa en formato de imagen para especificar texto alternativo
Se muestra panel de formato de imagen, tras haber pulsado en diseño y propiedades y texto alterantivo, se muestra la descripción introducida: Tres pinguinos juegan animadamente en la arena.

Demostración de descripciones

Formas y SmartArt

  • No son elementos textuales, aunque lo parezcan e introduzcamos texto, al final son imágenes sin texto alternativo.
Esquema de SmartArt: De un rectángulo con el texto estudiar sale una flecha al rectangulo exámen y de éste otra flecha al rectángulo aprobar

Describiendo un esquema

Incluir texto alternativo a una forma o SmartAart, botón derecho sobre el elemento y pulsamos en formato de objeto, seguimos los mismos pasos que para incluir descripción a una imagen

Tablas

Tabla no accesible, no tiene título y tiene dos celdas combinadas. La tabla es la distribución de notas de prácticas, de teoria y final de una serie de alumnos

Tablas bien estructuradas

  • Tablas sencillas sin muchas agrupaciones
  • Utilizarlas solo para mostrar contenido, no para maquetar contenido
  • Tablas uniformes: ni combinar ni dividir celdas
  • No dejar celdas vacías: poner texto Vacío

Insertar título a tablas (e ilustraciones) facilita la comprensión y el propósito de los datos.

Instrucciones para insertar un título a una tabla, seleccionarla y con el botón derecho seleccionar insertar título
Ventana de diálogo de insertar título. Se indica que en tablas, el título debería aparecer arriba de la misma y en imágenes debajo

Marcar filas de encabezado

En la pestaña diseño de tabla, seleccionar la casilla de verificación Encabezados de tabla para los encabezados

Diseño claro

En diseño de tabla, se muestran los diferentes estilos de tablas para utilizar una comibnación de colores y estructura adecuada <

Repetir encabezado en cada página

Ventana propiedades de Tabal, se muestra como se activa la casilla repetir encabezado en cada nueva página

¡Ahora sí!

Tabla accesible con el título: Tabla 1: notas finales del curso de accesibilidad. Es una tabla bien estructurada, con un buen contraste de color

Gráficas

Se muestra gráfica de tipo tarta con la distribución de estudiantes por género, Mujeres: 63% y hombres 53%. No es accesible porque solo transmite información a través del color

Describiendo gráficas

  • Como elemento no textual, debemos incluir una descripción.
  • Da igual si es una gráfica en imagen o hecha desde Word / Excel; el objeto resultante no es accesible.
Se muestra panel del area de gráfico en word, pulsamos en diseño y propiedades y después en texto alternativo para incluir la descripción. En este caso la descripción pone: distribución de estudiantes por género: Mujerse 63%, hombres 37%

Diseño accesible

  • No debemos transmitir información únicamente con el color.
  • Debemos elegir un estilo accesible
Barra de herramientas de la pestaña diseño cuando se ha seleccionado una gráfica, se muestan las diferentes posibilidades para dar un estilo diseño a una gráfica

¡Ahora sí!

La gráfica de distribución de estudiantes por género ahora es accesible ya que no solamente se incluyen los valores con el color.

No transmitas información solo con el color

Visión general

Gráfica de líneas, en rojo y verde, se usan cuadros para una linea y otro objeto para la otra progresión de línea

Persona daltónica

Gráfica de líneas que muestra las dos líneas con el mismo color gris, simulando como vería la gráfica una persona con daltonismo

Uso del color

Utilizar un contraste suficiente entre color del texto y color del fondo

Se ven diferentes textos con bajo contraste entre color de texto y del fondo para demostrar lo dificil que es leerlos.

Calculadora de contraste

No transmitir información únicamente con el color

Se muestra una pregunta de exámen corregida, la respuesta correcta se marca con una X además que del color verde.

Enlaces

  • El texto de un enlace debe transmitir claramente su propósito, incluso fuera del contexto del texto que lo rodea.
  • Prohibido: Haz click aquí 🙁, En este enlace 🙄, etc.
  • Hay usuarios navegan por listas de enlaces 🤓

Toda información es valiosa

  • Indicar el formato y el tamaño en el enlace
  • Podemos utilizar herramienta Info en pantalla para +info
Se muestra un fragmento de texto que contiene un enlace. Está el cursor situado sobre el enlace y aparece información en pantalla sobre que pasará cuando se pulse en ese enlace.

¿Cómo comprobar la accesibilidad de un documento? 👨🏻‍💻

Comprobar accesibilidad en Word o PowerPoint

Comprobar la accesibilidad en Word y power point, lo ejecutamos desde Archivo - Información -> comprobar si hay problemas -> comprobar accesibilidad
Se muestra el copmrobador de accesibilidad una vez ejecutado. Se muestran varios errores como falta texto alternativo, o no se especifica fila de encabezado.

¿Cómo realizo una presentación accesible con PowerPoint? 👨🏻‍💻

Contenidos accesibles

  • Los conceptos del diseño universal vistos anteriormente se aplican exactamente igual a Word y PowerPoint:
  • Texto sencillo, marcar idioma.
  • Descripciones de imágenes y elementos no textuales:
  • Gráficas, tablas, esquemas…
  • Correcta utilización del color
  • Tablas accesibles
  • Enlaces significativos

Todas las diapositivas deberían tener un título descriptivo 1

  • Los usuarios con lector de pantalla necesitan los títulos para navegar y acceder al contenido con rapidez.
Se muestra el panel de diapositivas con tres diapositivas y el cursor situado sobre una diapositiva y aparece el título de la misma en un cuadro sobrepuesto

Insertar y ocultar títulos

Si nuestra diapositiva no tiene título (por una plantilla que no los incluye) podemos incluirlo pulsando en Restablecer

En la pestaña inicio de powerpoint, pulsamos en Reestablecer para poner un título a nuestra diapositiva

Si queremos ocultar el título, vamos a Organizar 👉🏻 Panel de selección ⬇️

Se muestra el panel de selección, que habrimos desde la pestaña inicio, botón Organizar y luego panel de selección. Se muestra el orden de lectura de los elementos y hay un icono de un ojo para hacer invisible los elementos.

Orden de lectura

  • Debemos asegurar que el orden de lectura de los elementos es correcto.
  • En el panel de selección se listan los elementos en el orden inverso de lectura.
  • Podemos modificar el orden cambiando la posición de los elementos.
    • Se muestra el panel de selección, que habrimos desde la pestaña inicio, botón Organizar y luego panel de selección. Se muestra el orden de lectura de los elementos y hay un icono de un ojo para hacer invisible los elementos. También podemos modificar el orden de lectura cambiando el orden de los elementos de la lsita

Alineación de texto y capas

  • El orden de lectura se suele alterar al copiar y pegar o copiamos elementos -como imágenes- y se quedan “flotando”.
  • También podemos utilizar Traer al frente / Enviar al fondo para modificar el orden.
  • Pulsamos botón derecho sobra la imagen ⬇️
    • Se muestra el menú contextual tras pulsar con el botón derecho en una imagen que es una gráfica, se ven las opciones de traer al frente y enviar al fondo para incluir las imágenes en el orden de lectura de una diapositva

Crea y rehutiliza plantillas

  • Incluir imágenes de fondo como fondo de la plantilla.
  • Mejor si trabajamos sobre una base que nos asegure diapositivas con títulos, correcto orden de lectura, etc.
  • Las plantillas de Office son adecuadas por su cuidado en la accesibilidad.
  • También podéis utilizar otras plantillas accesibles, como la de los ejercicios 😃

Consideraciones finales

  • No incluyas texto imprescindible en las notas de PowerPoint, no todos los usuarios saben cómo ver las notas.
  • En caso de incluir notas y ser importantes debe especificarse claramente en el documento.
  • No abusar de las animaciones y las transiciones
  • Debemos acostumbrarnos a describir los elementos no textuales de la presentación.

¿Cómo creo un PDF de forma accesible? 👨🏻‍💻

Documentos PDF

  • Si hemos tenido en cuenta los aspectos del diseño universal, cuando guardemos nuestro documento de Word o PowerPoint a PDF, éste conservará las opciones de accesibilidad y será accesible. En caso contrario, no.
  • No debemos guardar como PDF con los típicos programas tipo ‘Impresora PDF’ puesto que hacen que el PDF resultante pierda características de accesibilidad.

Guardar como PDF

Guardar un PDF desde Word o PowerPoint, pulsamos en Archivo, Guardar como
En la ventana de guardar archivo, seleccinamos tipo de archivo PDF y tenemos que pulsar sobre el botón opciones, seguir en la siguiente diaposita

Opciones guardar PDF

  • Marcar Crear marcadores usando ➡️ Títulos.
  • Marcar Etiquetas de la estructura del documento para accesibilidad.
  • Propiedades del documento
  • Desmarcar Texto de mapa de bits cuando las fuentes no estén incrustadas.
Ventana de opciones de guardar como PDF. Se muestran las casillas que hay que activar, leer en esta misma diapositiva dichas opciones.

Ejemplo multimedia

Referencias

web.ua.es/accesibilidad

¡Muchas gracias!

josema.fernandez@ua.es

@jmfdz

https://josemariafernandez.es">