Tutorial sobre usabilidad y accesibilidad usando eXeLearning

1. eXeLearning: usabilidad y accesibilidad
Contenido
Introducción ............................................................................................................................. 1
Usabilidad ................................................................................................................................. 1
¿Qué es la usabilidad? ........................................................................................................... 1
Elementos a tener en cuenta sobre usabilidad ...................................................................... 1
Accesibilidad ............................................................................................................................. 2
¿Qué es la accesibilidad? ....................................................................................................... 2
Elementos a tener en cuenta sobre accesibilidad .................................................................. 3
Imágenes .......................................................................................................................... 3
Texto ................................................................................................................................. 5
Tablas ............................................................................................................................... 7
Índice de cuadros ...................................................................................................................... 9

2. 1
Introducción
Tanto la accesibilidad como la usabilidad en el diseño webs están destinados a que puedan acceder a los contenidos que publiquemos el mayor número de personas posibles. Esto incluye:
- personas con diversos tipos de impedimentos y dificultades, así como que
- el diseño del sitio web esté adaptado al tipo de público al que va destinado (niños, personas mayores, con un nivel cultural alto/bajo…).
Hay aspectos “automáticos” de los que se encargará eXeLearning, pero hay otros que dependen del diseñador.
Usabilidad
¿Qué es la usabilidad?
Cuando hablamos de usabilidad en Internet nos referimos a que nuestro sitio web se pueda usar por aquellos a los que va destinada. Si una persona entra a nuestra web, tiene que saber de forma rápida y sencilla qué contiende y cómo llegar a aquello que le interesa. Además, tiene que ser capaz de comprender nuestros contenidos (textos, imágenes, tablas, gráficos…).
Elementos a tener en cuenta sobre usabilidad
- Lenguaje adecuado al público al que se dirige (no es igual un niño que un estudiante de máster).
- Estructura de menús y contenidos coherentes y que se mantengan iguales en todo el sitio:
o eXeLearning se encargará de que el menú de contenidos sea el mismo nos encontremos en el apartado que nos encontremos, pero
o nosotros somos los encargados de que esté bien estructurado, con:
 apartados y subapartados adecuados, y
 títulos apropiados para cada uno de ellos.
- Control sobre la navegación independiente del navegador. Evitar que se tengan que usar el botón “Atrás” del navegador. Si diseñamos un sitio en el que el usuario no sepa cómo llegar a algún apartado sin usar el botón “Atrás”, lo estamos haciendo mal. Si quiere usarlo, que lo use, pero que no se vea obligado. Un ejemplo importante:
o Si queremos enlazar a un sitio externo al nuestro, que ese enlace se abra en una pestaña/ventana aparte (avisando antes de que se abrirá de ese modo, cuestión que tiene que ver con la accesibilidad). Así no tienen que salir de nuestro sitio para ir al otro. (ver Cuadro 1).
Cuadro 1. Enlace en pestaña/ventana aparte en eXeLearning Situamos el cursor en el texto o imagen que tiene el enlace y pinchamos en el botón . En la ventana que nos aparece, pestaña “General”, apartado “Destino”, elegimos “Abrir en ventana nueva (_blank)”:

3. 2
Accesibilidad
¿Qué es la accesibilidad?
La accesibilidad en Internet tiene que ver con facilitar el acceso a los contenidos a todas las personas, independientemente de si tienen o no alguna discapacidad y del tipo de dispositivo que utilicen para navegar.
Podemos resumir casi todos los aspectos que vamos a tratar sobre accesibilidad en los dos principios siguientes:
- Si existe una opción para un propósito, la usaremos cada vez que queramos cumplir ese propósito.
- Si una opción tiene un propósito, hay que usarla únicamente con ese propósito.
Por ejemplo: El editor de textos que proporciona eXeLearning incluye la opción “Cita” . Por lo tanto, cuando queramos citar lo que alguien dijo, tenemos que formatear el texto citado con esa opción. Pero no podemos aplicar el formato cita para algo que no sea una cita.

4. 3
Elementos a tener en cuenta sobre accesibilidad
Imágenes
Texto alternativo
Toda imagen que incluyamos en nuestros contenidos deben contar con un texto alternativo que describa la imagen, en caso de que:
- la imagen no cargue adecuadamente o se ha borrado del servidor, o
- se utilice un dispositivo/herramienta de lectura para personas ciegas o con visibilidad muy reducida.
En ambos casos, el usuario no podrá ver la imagen, pero sabrá qué muestra gracias al texto alternativo.
Cuadro 2. Texto alternativo para imágenes en eXeLearning Tanto para insertar una imagen como para editar la que ya hemos incluido, pulsamos el botón En la ventana que nos aparece, pestaña “General”, apartado “Descripción de la imagen”, escribimos nuestro texto alternativo:
Tamaño de la imagen
eXeLearning incluye por defecto el tamaño de la imagen en el código HTML. Esto no cumple las pautas de accesibilidad, puesto que el tamaño es una característica de presentación y estas

5. 4
deben ir incluidas en el código CSS. Como no podemos modificar el código CSS1 desde el mismo eXeLearning, la solución para que nuestro contenido sea accesible necesita dos pasos:
1. Que la imagen original ya tenga el tamaño con el que queremos que sea mostrada (que no tengamos que aumentarla o disminuirla en eXeLearning).
2. Eliminar el tamaño del código HTML que por defecto incluye eXeLearning (ver Cuadro 3)
Cuadro 3. Tamaño de las imágenes en eXeLearning Tanto para insertar una imagen como para editar la que ya hemos incluido, pulsamos el botón En la ventana que nos aparece, pestaña “Apariencia”, apartado “Dimensiones”, eliminamos los valores y dejamos los cuadros en blanco:
1 Sí podemos modificar los atributos CSS utilizando el botón “Propiedades” , pero necesitaríamos conocimientos de CSS que no son objeto de este tutorial.

6. 5
Texto
Títulos
HTML (y el editor de textos de eXeLearning) permiten controlar distintos niveles de títulos:
- El Título 1 / Encabezado 1 es el que funciona como título principal.
o El Título 2 / Encabezado 2 funciona como subtítulo del Título 1.
 El Título 3 / Encabezado 3 funciona como subtítulo del Título 2.
 … hasta el Título 6 que es subtítulo del Título 5.
Debemos aplicarlos correctamente para crear una estructura de contenidos lógica y coherente (ver Cuadro 5).
Cuadro 4. Aviso sobre formato de títulos automático en eXeLearning Aviso importante: eXeLearning aplica formato de Título 1 / Encabezado 1 automáticamente a los títulos que le damos a cada apartado del proyecto, a cada página de nuestro proyecto. Por lo tanto, si queremos incluir algún apartado dentro de ese título principal, deberemos aplicar el formato desde el Encabezado 2 (tres si incluimos otro subapartado dentro y así sucesivamente…).

7. 6
Cuadro 5. Títulos en eXeLearning Para aplicar formato de título al texto en el editor de eXeLearning, desplegamos el menú “Formato” y elegimos de la lista desplegable el tipo de encabezado adecuado:
Listas ordenadas y desordenadas
Siempre que queramos añadir una lista de elementos, deberemos aplicar el formato para ello. De este modo, indicaremos tanto de forma visual como estructural que nos encontramos ante una lista y los lectores (humanos y automáticos) podrán identificarla como tal.
Podemos elegir entre listas ordenadas (con números, letras…) y desordenadas (con viñetas) y, además, anidarlas unas dentro de otras. Además, tenemos varios estilos de viñetas para las desordenadas y de tipos de numeración para las ordenadas.
Cuadro 6. Listas en eXeLearning Para aplicar el formato de lista desordenada, utilizaremos el botón y para lista ordenada, el botón . Si queremos aplicar estilos distintos a los preestablecidos, pulsaremos las flechitas de la derecha de cada uno de los botones () y se desplegarán los respectivos menús: Para anidar una lista dentro de otra, podemos utilizar la tabulación del teclado o los botones de aumento y disminución de sangría .

8. 7
Citas y referencias
Dado que tanto el código HTML como el editor de textos de eXeLearning permiten indicar cuándo estamos citando texto y cuándo incluimos una referencia, debemos usar estas opciones.
Cuadro 7. Citas y referencias en eXeLearning
Otros formatos de texto
En el Cuadro 8 podemos ver otras opciones y formatos de texto disponibles y que debemos aplicar cuando los necesitemos.
Cuadro 8. Otros formatos de texto en eXeLearning - Subíndices y superíndices: - Abreviaturas y acrónimos: - Dirección de un lugar:
Tablas
Una tabla en HTML puede constar de hasta tres tipos de filas: encabezado, cuerpo y pie. Además, el contenido de cada celda puede ser de tipo encabezado o datos. Debemos definir todas estas características en la estructura de la tabla para que esta pueda ser interpretada correctamente.
Cuadro 9. Estructura de una tabla

9. 8
Cuadro 10. Estructura de tablas en eXeLearning Para definir el tipo de fila, utilizaremos el botón “Propiedades de la fila” . En la ventana que nos aparece, pestaña “General”, apartado “Tipo de fila”, elegimos la opción correspondiente: Podemos establecer varias filas como encabezado, como cuerpo o como pie. Para definir el tipo de contenido de cada celda, utilizaremos el botón “Propiedades de la celda” . En la ventana que nos aparece, pestaña “General”, apartados “Tipo de celda” y “Alcance”, elegimos las opciones correspondientes: El alcance define si ese tipo de contenido (encabezado o datos) afecta a la misma fila de la celda, su misma columna, su grupo de filas o su grupo de columnas.

10. 9
Índice de cuadros
Cuadro 1. Enlace en pestaña/ventana aparte en eXeLearning ................................................... 1
Cuadro 2. Texto alternativo para imágenes en eXeLearning ...................................................... 3
Cuadro 3. Tamaño de las imágenes en eXeLearning .................................................................. 4
Cuadro 4. Aviso sobre formato de títulos automático en eXeLearning ....................................... 5
Cuadro 5. Títulos en eXeLearning .............................................................................................. 6
Cuadro 6. Listas en eXeLearning ................................................................................................ 6
Cuadro 7. Citas y referencias en eXeLearning ............................................................................ 7
Cuadro 8. Otros formatos de texto en eXeLearning ................................................................... 7
Cuadro 9. Estructura de una tabla ............................................................................................. 7
Cuadro 10. Estructura de tablas en eXeLearning........................................................................ 8