1. Educación

Formación Maquetación HTML Accesible
Página 1 de 4
Guía rápida
Antes de comenzar con la evaluación de cada uno de los elementos hacer un
vistazo rápido a los posibles errores con:
WAVE  Errors, Features and Alerts
Inclusión de imágenes




Tipos de imágenes:
o Decorativas: No es necesario texto alternativo.
o Necesarias: Obligatorio el texto alternativo a no ser que el contenido que
transmite la imagen se encuentra en un texto junto a ella.
 No poseen contenido textual (Ej. Una fotografía).
Texto alternativo  Contenido que representa.
 Poseen contenido textual
Texto alternativo  El mismo texto que en la imagen.
Nota: No poner “Logo de”
 Imágenes que funcionan como enlaces
Texto alternativo  Función que realiza y depende del texto del enlace
(ejemplo impresora, función “imprimir”).
 Imágenes complejas (Ej. gráficos)
Texto alternativo (indicar ubicación descripción larga) + Descripción larga
(a continuación o en una página aparte).
Texto alternativo:
o Breve y conciso (no más de 150 caracteres).
o Lo más significativo posible con lo que representa la imagen.
o No redundante.
Fallos más comunes:
o incluir como alternativa textual el nombre del archivo, o la palabra foto o imagen,
o textos de relleno genéricos.
o Cometer redundancia, incluir en la imagen que compaña al texto del enlace un
texto alternativo.
Evaluación:
o Web Developer Toolbar:
 Images  Disable images  Disable all. (Acordaros siempre de dejarlo
como estaba ;-).
o
 Images  Display Alt attributes.
WAVE:
 Text Only
Inclusión de enlaces




Texto del enlace descriptivo de su destino, cumpla con su propósito y sea comprensible
fuera de contexto.
Si el destino del enlace es un sitio web diferente al nuestro hemos de indicárselo al
usuario (Ej, Enlace externo….).
Dos enlaces con el mismo texto referidos a diferentes destinos hay que distinguirlos
especificando un valor diferente en el campo descripción de cada uno de ellos (Ej. Leer
más).
Enlaces consecutivos deben de ir separados por caracteres imprimibles.
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
15/10/2014
Formación Maquetación HTML Accesible
Página 2 de 4




No es aconsejable la apertura de nuevas ventanas, si fuese necesario hay que
especificárselo al usuario “Abre en nueva ventana”.
Destino del enlace posee un idioma diferente del documento hay que indicarlo en las
propiedades del enlace (no soportado de momento por Vualà.), indicarlo en el campo
descripción del enlace.
Inclusión de ficheros en otros formatos PDF, Excel, Word, etc.
o Indicar preferiblemente en el texto y sino en la descripción del enlace el formato
del archivo.
o Si se conoce el tamaño indicarlo, por ejemplo (PDF, 116kb).
Evaluación:
o Navegar con el tabulador para detectar si el enlace tiene sentido fuera del
contexto.
o Web Developer Toolbar:
 Information  Display Title Attributes.
o WAVE:
 Text-Only
Encabezados





Marcar todos los encabezados de sección necesarios en la página (Apartado h4 y
subapartado h5).
Anidarlos de forma correcta.
No usar los encabezados para dar estilos al texto.
Comprobar que no existan encabezados vacíos.
Evaluación:
o Web Developer Toolbar:
 Information  View document outline
o WAVE:


Structure Order
Outline.
Inclusión de listas





Marcar todos los elementos relacionados entre sí como listas.
No simular listas mediante párrafos con guiones, asteriscos o números.
Anidar las listas correctamente.
Comprobar que no existan listas vacías.
Evaluación:
o
WAVE: Structure Order
Identificar citas





Las citas tanto en línea como en bloque deben marcarse correctamente.
No se debe usar el marcado de citas para provocar efectos de estilo tales como sangría.
Marcar cambio de idioma si es requerido.
Comprobar que no existan citas vacías.
Evaluación:
o
WAVE: Structure Order
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
15/10/2014
Formación Maquetación HTML Accesible
Página 3 de 4
Tablas





No usar tablas para maquetar sólo para tablas de datos.
No incluir tablas dentro de tablas.
No usar plantillas para tablas de datos.
Proporciona un resumen a la tabla de datos que indique la relación entre las celdas.
Marcar la fila (de encabezados) como encabezado de la tabla.
Marcar abreviaturas y acrónimos




La primera vez que aparezca en el documento dar la versión abreviada y extendida.
o EJ. Instituto Interuniversitario de Desarrollo Social y Paz de la Universidad de
Alicante (IUDESP)
Marcar abreviaturas y acrónimos cuando aparezcan en el texto, como mínimo la
primera vez.
Marcar cambio de idioma si es requerido.
Evaluación:
o Web Developer Toolbar:
 Information  Display Abbreviation o Display Title Attributes.
Cambio de idioma
 Marcar el cambio de idioma cada vez que se produzca en el texto (no soportado por
Vualà).
 Cuando un enlace provoque un cambio de idioma indicarlo o en el texto o en al

campo descripción del enlace.
Evaluación:
o Web Developer Toolbar:
 Information  Element information.
Lenguaje claro y sencillo



Limitarse a una idea principal por párrafo.
Encabezados informativos y descripciones de los vínculos claras y precisas.
No usar palabras inusuales, en otro caso:
o Incluir en el mismo texto la definición de la palabra inusual.
o Incluir al pie de la página las definiciones de la palabra inusual realizando
enlaces
o Crear un glosario de términos y enlazar la palabra con su definición.
o Incluir un enlace a un diccionario donde aparezca la definición.
Edición de texto o aspecto visual






No usar los estilos de color, tamaño de letra para dar aspecto visual al texto, excepto
donde se requiera.
No usar gráficos basados en el color.
No referirse a imágenes por su posición, “como vemos en la imagen de la
izquierda…”
No simular espacios en blanco con párrafos vacíos.
Enfatizar aquellas palabras que se resalten con color.
Evaluación:
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
15/10/2014
Formación Maquetación HTML Accesible
Página 4 de 4
o
o
Visual: Fijarnos que la distancia entre dos párrafos no supere su espaciado
normal.
WAVE: Text Only
Pegar texto de fuentes externas

Es preferible generar el documento directamente con el gestor de contenidos. Si esto
no es posible usar el botón
(pegar desde Word).
Metadatos: Posicionamento SEO
Herramientas de validación para FIREFOX

DEVELOPER TOOLBAR: https://addons.mozilla.org/es/firefox/addon/web-developer/

WAVE: http://wave.webaim.org/toolbar
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
15/10/2014