Formación en accesibilidad para editores web

Formación Maquetación HTML Accesible
Página 1 de 6
GUÍA RÁPIDA
IMÁGENES

Tipos de imágenes:
o Decorativas: No poseen 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 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).
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.

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
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
15/10/2015
Formación Maquetación HTML Accesible
Página 2 de 6

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.
ENLACES

Texto del enlace descriptivo con 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, Visitar sitio web, 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).

Dos enlaces referidos al mismo destine deben tener igual texto del enlace.

Enlaces consecutivos deben de ir separados por caracteres imprimibles o marcarlos en
forma de lista, etc.

No es aconsejable la apertura de nuevas ventanas, si fuese necesario hay que
especificárselo al usuario “Abre en nueva ventana”.

No incluir direcciones Web largas (URL) como texto 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).
Fallos más comunes:
o No todos los enlaces tienen que llevar un título, sólo cuando haya que
complementar la información.
o No usar enlaces tipo: “pinche aquí”.

Evaluación:
o Web Developer Toolbar:

Information  Display Title Attributes.
o WAVE:

Text-Only
ENCABEZADOS
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
15/10/2015
Formación Maquetación HTML Accesible
Página 3 de 6

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.
INCLUSIÓN DE 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
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.

Fallos más comunes:
o Usar las citas en bloque para realizar una sangría.
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
15/10/2015
Formación Maquetación HTML Accesible
Página 4 de 6

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.

Proporciona un resumen a la tabla de datos que indique la relación entre las celdas.
MARCAR ABREVIATURAS Y ACRÓNIMOS

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 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, en otro caso:
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
15/10/2015
Formación Maquetación HTML Accesible
Página 5 de 6
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 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.

“Importante”: Comprobar que el orden lógico de lectura es correcto.

Evaluación:
o 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 EVALUACIÓN
• WAVE para Firefox
http://wave.webaim.org/toolbar/
• Web Developer Toolbar para Firefox
https://addons.mozilla.org/es/firefox/addon/web-developer/
Ester Serna Berná
Responsable técnico desarrollo Web
Taller Digital de la Universidad de Alicante
[email protected]
15/10/2015
Formación Maquetación HTML Accesible
Página 6 de 6
• 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]
15/10/2015