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

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)”:

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.

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

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.

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…).

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 .

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

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.

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