Guía rápida - Universidad de Alicante

Formación Maquetación HTML Accesible
Guía rápida de evaluación
Página 1 de 5
Imágenes
1. Detectar el tipo de imagen:
o Decorativas: No transmiten información importante, no llevan descripción
(alternativa textual).
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 redundantes).
 No poseen contenido textual (Ej. Una fotografía).
Texto alternativo  Contenido que representa dependiendo del contexto.
 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).
2. 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.
o No poner texto alternativo en una imagen que funciona como enlace.
3. Evaluación:
o Web Developer Toolbar:
 Images  Disable images  Disable all. (Acordaros siempre de dejarlo como
estaba ;-).
 Images  Display Alt attributes.
o WAVE:
 Text Only
Vídeo embebido en una página

Proporcionar una descripción con el título del vídeo, al insertarlo en una página.

Proporcionar un resumen junto al vídeo de lo que se muestra en el vídeo, destacando lo
más importante del mismo.
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
05/11/2015
Formación Maquetación HTML Accesible
Guía rápida de evaluación
Página 2 de 5
Enlaces

Comprobar que los enlaces son suficientemente descriptivos para tener sentido fuera
de contexto, además tienen que ir en consonancia con la información de la página a la
que apuntan. (Enlaces: pinche aquí, más información, enlace, etc… no son descriptivos).

Comprobar que los enlaces tienen una descripción adecuada. No todos los enlaces
tienen que llevar una descripción (título del enlace), a no ser que sea necesaria. Si
necesitan de una descripción:
o No repetir el texto del enlace.
o No incluir las palabras “Enlace a”.

Si enlazamos a un archivo de formato PDF, Word, etc.. indicarlo en el texto del enlace y
si conocemos el peso del archivo y lo incluimos mejor.

Enlaces que abran en una nueva ventana indicarlo en el título del enlace (campo
descripción). Ej: “Abre en nueva ventana.” Si son páginas de un sitio web (unidad, centro,
etc.) nunca deberían abrir una nueva ventana.

Enlaces que provoquen un cambio de contexto indicarlo en el título del enlace (campo
descripción) Ej: “Visitar sitio web….”.
No incluir la dirección web (URL) como texto del enlace a no ser que refiera a la de la
página de entrada al sitio.


Enlaces consecutivos, separarlos con un carácter imprimible o crear una lista.


Imagen + texto => en el mismo enlace.
Comprobar las dos consideraciones:
o Dos o más enlaces con la misma página destino tienen que tener el mismo texto
del enlace.


o Dos o más enlaces con el mismo texto referidos a diferentes destinos hay que o
modificar el texto del enlace para hacerlos distinguibles o especificar un valor
diferente en el campo descripción de cada uno de ellos (Ej. Leer más).
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 Web Developer Toolbar:
 Information  Display Title Attributes.
o WAVE:
 Text-Only
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
05/11/2015
Formación Maquetación HTML Accesible
Guía rápida de evaluación
Página 3 de 5
Encabezados




Marcar todos los encabezados de sección necesarios en la página (Apartado h4 y
subapartado h5).
Anidarlos de forma correcta.
Fallos más comunes:
o Usar los encabezados para dar estilos al texto.
o Encabezados vacíos.
o Encabezados que no “encabezan” contenidos.
Evaluación:
o Web Developer Toolbar:
 Information  View document outline
o WAVE:


Structure Order
Outline.
Listas




Marcar todos los elementos relacionados entre sí como listas.
Anidar las listas correctamente.
Fallos más comunes:
o Simular listas mediante párrafos con guiones, asteriscos o números.
o Listas vacías o mal anidadas.
Evaluación:
o WAVE: Structure Order
Citas en línea – Citas en bloque






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.
Fallos más comunes:
o Usar las citas en bloque para realizar una sangría.
Evaluación:
o WAVE: Structure Order
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.
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
05/11/2015
Formación Maquetación HTML Accesible
Guía rápida de evaluación
Página 4 de 5


Proporciona un resumen a la tabla de datos que indique la relación entre las celdas.
Evaluación:
o Web Developer Toolbar:

Outline -> Outline Tables -> Outline Tables (marca con una línea roja las
tablas).
o WAVE:

Structure Order, nos tenemos que fijar en el icono
.
Marcar abreviaturas





La primera vez que aparezca en el documento dar la versión abreviada y extendida si es
el caso.
o EJ. Instituto Interuniversitario de Desarrollo Social y Paz de la Universidad de
Alicante (IUDESP)
Si marcamos una abreviatura o acrónimo hemos de proporcionar en el título la versión
extendida.
Utilizar para ambos casos abreviaturas y acrónimos: ABBR.
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 (párrafo, palabra(s),
cita, abreviatura, etc.).
 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 (jergas, extranjerismos…), 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.
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
05/11/2015
Formación Maquetación HTML Accesible
Guía rápida de evaluación
Página 5 de 5
Edición de texto o aspecto visual

Importante: Comprobar que el orden lógico de lectura es correcto.
o Evaluación:
 WAVE: Text Only

No usar los estilos de color, tamaño de letra para dar aspecto visual al texto, excepto
donde se requiera.
No usar imágenes basadas en el color (ej. Gráficos).
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.




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 evaluación
 WAVE para Firefox
http://wave.webaim.org/toolbar/
 Web Developer Toolbar para Firefox
https://addons.mozilla.org/es/firefox/addon/web-developer/
 WAVE Chrome Extension at the Google Web Store
https://chrome.google.com/webstore/detail/wave-evaluationtool/jbbplnpkjmmeebjpijfedlgcdilocofh
 Web Developer Chrome Extension at the Google Web Store
https://chrome.google.com/webstore/detail/webdeveloper/bfbameneiokkgbdmiekhjnmfkcnldhhm
 Lector de pantalla NVDA
http://www.nvaccess.org/download/
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
05/11/2015