Guía para editores web: Accesibilidad y Contenidos Web

Guía para editores TYPO3:
Accesibilidad y Contenidos Web
Última actualización: 12/01/2011
Autor: Dpto. Web ICTI Internet Passion

Archivo: Guía para editores: Accesibilidad y Contenidos Web
Autor: Departamento Web de ICTI Internet Passion Pág. 1

Pautas básicas sobre
estilos y legibilidad web


Sobre Estilos y Legibilidad Web
1. Algunas consideraciones para editores web
Objetivo de este manual Diseño y estilo de la web Accesibilidad

Esta guía para editores de TYPO3, trata de: A menudo, existe una gran diferencia entre lo que Es indudable la importancia de hacer accesible
al diseñador le gustaría que fuese la web, y lo que nuestra web, algo que en portales oficiales es
●
Dar unas nociones básicas sobre cómo se han de realmente acaba siendo una vez que tiene el obligatorio por Ley, y de que todos sus elementos
tratar los contenidos en la web para que cumpla contenido real cargado. lo sean por igual, tanto el material escrito (textos,
las principales normas de accesibilidad y para que PDF y documentos word/odt) como el audiovisual
ésta no pierda su estética y forma. Esto es debido a que los editores normalmente no (imágenes, vídeos...).
tienen el mismo gusto y estética, ni tampoco
●
Asegurar una coherencia gráfica perdurable, reparo, por ejemplo, en poner un titular de La web entregada cumple el nivel de conformidad
punto crítico tanto en usabilidad como noticia con 4 líneas de texto, cosa que a un doble A (AA) de la Guía de Estilo de Accesibilidad
accesibilidad. diseñador nunca se le ocurriría o, al menos, Web 2.0 (WCAG 2.0), pero si realmente nos
trataría de evitar. importan los usuarios con discapacidad, debemos
●
Garantizar a los usuarios la correcta trabajar todos los días para mantenerla.
visualización de los contenidos, Las guías de estilo de la web
independientemente del navegador utilizado. Uno de los puntos donde la mayoría de los
En el diseño y arquitectura de la web se han portales fallan, es ahí: diseñan y trabajan la web
Los editores web definido unas guías de estilo que deben seguirse para que cumpla los criterios y normas de
para que todo el site tenga la misma estética y no accesibilidad cuando se presenta, pero en el
Llamamos editores web, editores de contenido o pierda su identidad. mantenimiento diario dejan de considerarse estas
simplemente editores, a aquellas personas que se normas y los nuevos contenidos dejan de ser
encargan de cargar la web de contenido real, con Estas guías establecen el tipo, el tamaño y el color accesibles.
fotos y textos definitivos, durante las fases de de la fuente que se ha de utilizar; así como de los
preproducción y producción del proyecto. títulos, hiperenlaces, destacados...; el tamaño de
Sustituyen nuestro “Lorem ipsum”, por texto real. los párrafos, las distancias entre los diferentes
elementos de las páginas (texto, imágenes,
Además, son los que actualizan y generan nuevos márgenes...).
contenidos dentro de la web.
Por ello, es necesario seguir estrictamente una
serie de normas que definiremos más adelante.


2. Pautas básicas sobre estilos y legibilidad web
Respetar los diseños de páginas que se No justificar textos Encabezados de los contenidos
hayan definido
En general, en medios on-line hay que evitar en Para hacer apartados dentro de los textos pueden
HOME (sólo para la portada principal de la web), lo posible el uso de la justificación de textos a utilizarse encabezados a modo títulos o
SUBHOME (para las páginas principales de cada ambos lados y a la derecha: por legibilidad y subtítulos, pero siguiendo el orden diseñado y
sección) e INTERIOR (para cualquier página accesibilidad. (Ver apartado correspondiente en escalonado, es decir, seguir la jerarquía de
interior). Si usamos alguna de ellas en otro lugar Accesibilidad) encabezados y no saltar del H3 al H5 en el
podríamos confundir al usuario. siguiente titular.
Para resaltar algo
Respetar el lugar establecido para cada flex Las pautas generales suelen ser:
(Contenido Flexible) Deben utilizarse las cursivas y negritas o los flex y ●
H1-Encabezado 1: se usa sólo para el título del
cajas de destacados diseñados para ello, y que web site, por lo que no debe usarse.
Cuando añadimos un nuevo elemento de pueden ubicarse en diferentes partes de la ●
H2-Encabezado 2: encabezado oculto para
contenido a las páginas éste tiene un lugar páginas: superior, centro, laterales... estructurar contenidos, no debe utilizarse.
preestablecido y no es modificable. Esto es
●
H3-Encabezado 3: para el titular de la página en
especialmente constatable en los Flex. Cada uno No introducir párrafos en blanco o la que estamos, tampoco debe usarse.
de ellos cuenta con una imagen y un breve tabulaciones
●
Para los titulares deben utilizarse los
descripción de para qué se usa, su tamaño y en encabezados a partir de H4-Encabezado4 y
qué lugar debe estar. Es muy importante No deben introducirse párrafos en blanco para siempre en orden descendente y jerarquizado.
respetarlo porque si se pusiera en algún otro separar los textos, ni tampoco tabulaciones entre
lugar diferente del indicado, cambiaría su aspecto, las palabras. Además,por legibilidad, los titulares no deberían
forma, estilo y funcionalidades. tener más de 75 caracteres.
Si se quiere dejar un espacio a la izquierda o
No utilizar tablas para maquetar contenidos derecha del texto puede utilizarse la sangría, o Uso de mayúsculas
también distinguirlos con la lista ordenada o de
Siguiendo las normas y pautas de accesibilidad, topos. Evitar, o al menos restringir, el uso de mayúsculas,
las tablas sólo pueden utilizarse para tablas de pues así facilitaremos la legibilidad de los textos.
datos como tal, pero no para poner contenidos No cambiar la fuente ni tamaño de los Poner mucho texto en mayúscula satura al
dentro de ellas. Si necesitamos columnas para usuario. Como ya hemos comentado, para
textos
maquetar, podemos utilizar el flex diseñado para resaltar deben utilizarse negritas y encabezados.
ese fin. Para los contenidos de la página el editor de texto
ya tiene predefinido el tipo de texto: "Párrafo".


2. Pautas básicas sobre estilos y legibilidad web
No pegar textos directamente en el editor En resumen: el editor de texto enriquecido de
de texto enriquecido de TYPO3 TYPO3, es para enriquecer el texto sin formato
que traeremos desde el bloc de notas. Si pegamos
Uno de los errores más frecuentes de los editores directamente, el editor interpretará las
web, por comodidad, falta de tiempo o de características del texto de origen y éstas
conocimientos, es copiar los textos desde Word o sustituirán a las nuestra web.
desde la propia web y pegarlos directamente en
el editor de texto enriquecido que ofrece TYPO3. Ancho de las líneas de texto

Esto supone un grave problema pues Por legibilidad y accesibilidad, el ancho total de
arrastraremos formatos que nos resultarán muy las líneas de texto no debe superar los 100
difíciles de modificar y limpiar, y que modificarán caracteres, que equivaldrían a unas 14 ó 16
el estilo que tenemos definido para nuestras palabras, independientemente de la resolución
páginas, además de recargar de código oculto que se utilice para el diseño de la web.
excesivo nuestro portal.
Si añadimos más caracteres a las líneas de texto,
El procedimiento ideal es copiar nuestro texto y muchos usuarios pueden tener dificultad en
pegarlo previamente en un editor de texto plano, volver al principio de la línea siguiente.
como puede ser el Bloc de Notas de Windows
(Notepad en inglés), para borrar de este modo el
código oculto innecesario que añade Word.

Una vez tengamos nuestro texto bien formado en
el editor de texto plano (bloc de notas), lo
copiaremos y nos lo llevaremos, esta vez sí, al
editor de texto enriquecido de TYPO3, en el que
le podremos dar el formato que queramos
(negritas, cursivas, listas, enlaces, etc.).


Sobre accesibilidad web


Sobre Accesibilidad Web
1. Accesibilidad de los archivos y PDF
Relevancia de sus contenidos Integrar bien los PDF Otras recomendaciones

Estos documentos pueden ampliar la información Es necesario, en primer lugar, darles un nombre Acompañar el enlace al PDF con un esquema,
que mostramos o dar la opción de guardar los adecuado (acorde a su contenido y descriptivo); y texto explicativo o resumen de su contenido (en
contenidos en este formato para consultarlos más aportar al usuario la mayor información posible el que se encuentren las máximas palabras clave
adelante o imprimirlos. Tienen, pues, la misma del documento al que le remitimos, por lo que posibles), lo que permitirá al usuario saber si le
relevancia que el resto de contenidos de nuestra debemos indicar: interesa o no.
web.
●
Que es un enlace a un PDF (mediante un texto o Ofrecer una versión alternativa al PDF siempre
Pero al hablar de accesibilidad no nos referimos icono reconocible) que sea posible (en este sentido hay que tener en
sólo a que puedan consultarlos personas que cuenta que los formatos RTF y DOC no son
posean una discapacidad. Si alguien consulta el ●
Que para su visualización es necesario un lector opciones demasiado accesibles porque siguen
documento en un móvil o en un ordenador en el de PDF, e indicaciones sobre cómo obtenerlo e necesitando software externo para abrirlos y
que no esté instalado un lector PDF, y no tenga instalarlo (dónde descargar el programa) además no son libres) o, al menos, que pueda
posibilidad de descargarlo ni instalarlo, tampoco exportarse como HTML, XML y TXT.
podrá acceder a esta información. ●
Su tamaño (y advertir si este es elevado, para
quien utilice una conexión de baja velocidad) Sobre el resto de formatos de documentos
Es aconsejable utilizar los PDF sólo para:
●
Si para su visualización se abrirá una nueva Al remitir al usuario a la descarga de un
●
Ampliar información sobre un tema ventana o se cargará en la misma (pues la opción documento habría que ofrecer varias alternativas
●
Contenidos demasiado extensos para ser leídos de abrir o guardar el PDF dependerá del del mismo como word, open office, bloc de
en la web navegador y del sistema operativo que estemos notas...; pues si el programa con el que se ha
●
Conservar un formato y características concretas utilizando, entre otros factores) generado el mismo no estuviera instalado en su
(manuales, documentos oficiales, plantillas...) ordenador, no podría acceder a esa información.
●
Ser imprimidos (como impresos y formularios)
●
Ejemplo: Incluir un enlace a la ley de
prevención de malos tratos. No podemos llamar
Pero siempre usados con moderación, pensando al PDF "5-2001.pdf". Lo correcto sería "Abre en
siempre en la utilidad que tendrán para el usuario una ventana nueva un PDF con la Ley 5/2001 de
y no en aumentar el "espacio" de nuestra web, Prevención de Malos Tratos y Protección de las
pues no por tener más contenidos estos van a ser Mujeres Maltratadas (564 KB)" o "Abre en
mejores. ventana nueva la Ley 5/2001, en PDF (564 KB)"


2. Accesibilidad de los enlaces: consideraciones generales
Los enlaces deben distinguirse de los elementos y Enlace a páginas internas o externas Enlace a un email
texto que les rodean. Si utiliza el color para
diferenciar los enlaces, use una forma adicional Además, hay que indicar: Para añadir una dirección de correo electrónico,
para distinguirlos (por ejemplo, se subrayan cuando deben seguirse las mismas pautas que para añadir
se sitúa el cursor sobre ellos). ●
Si abre o no en una ventana nueva enlaces, especialmente indicar que es una dirección
●
Nombre de la web, título de la página a la que de email y a quién se envía.
Los enlaces, tanto internos (a nuestras propias apunta el enlace o breve descripción de la misma.
páginas) como externos (a otras web o a email), Ejemplo: "Envía un correo electrónico a
deben seguir también unas especificaciones Ejemplo: Debemos insertar un enlace a la página info@jccm.es"
similares a los PDF. de la JCCM. Deberíamos poner "Abre una ventana
nueva con la Web oficial de la Junta de
Para empezar, no debemos utilizar frases Comunidades de Castilla-La Mancha" o "Abre en
genéricas como "leer más", o "pinche aquí", sino una ventana nueva la web www.jccm.es"
que debemos identificar claramente el objetivo de
cada enlace. Algunos ejemplos
El orden de la navegación por los enlaces deberá
ser lógico e intuitivo.

Siempre que no sean ambiguos para los usuarios en
general, los enlaces (o botones de imagen en un
formulario, o zonas activas en un mapa de imagen)
serán lo suficientemente descriptivos como para
identificar su objetivo o destino directamente
desde el texto enlazado o, en su caso, desde el
enlace en su contexto (por ejemplo, en los párrafos
que lo rodean, elementos de una lista, celdas o
encabezados en una tabla, etc.).


2. Accesibilidad de los enlaces: evitar ventanas nuevas en la navegación
Principales razones Dar libertad al usuario
●
Viola la Guía de Estilo de Accesibilidad Web Si tus usuarios quieren abrir un enlace en una
nueva ventana, él o ella pueden hacerlo
La principal razón es que abrir un enlace en una fácilmente en la mayoría de los navegadores
ventana nueva, sin que haya una necesidad expresa (botón derecho: “Abrir enlace en una nueva
y muy justificada de hacerlo, viola la Guía de Estilo pestaña o ventana”); no hay una necesidad de
de Accesibilidad Web (en concreto la norma 3.2 forzar este gesto a todos los usuarios.
que dice “Realizar páginas web que funcionen de
modo predecible”), y si vives en un país que Estamos hablando de dar libertad al usuario de
disponga de una legislación antidiscriminatoria, elegir su modo de navegar por el portal, que
puedes entrar en conflicto con ella. siempre será el más cómodo para él, y al que esté
acostumbrado.
●
Desorientan a quienes usan lectores de pantalla

Cambios radicales en el foco de la navegación,
hechos sin el consentimiento del usuario, como es
el caso de abrir una ventana nueva sin motivo
aparente, desorientan extremadamente a aquellos
que utilizan lectores de pantalla, y esto puede ser
considerado una discriminación contra usuarios
con problemas visuales importantes.

●
Rompe la línea de navegación

Además, abrir una ventana nueva rompe la línea de
navegación, impidiendo que el botón “Volver” del
propio navegador funcione adecuadamente. Esto
también ocurre en navegadores que utilizan
pestañas para mostrar páginas web.


3. Accesibilidad de las imágenes
Como ya hemos comentado, todos los contenidos Normas obligatorias Errores a evitar
de la web deben ser accesibles para todos los
usuarios, ya tengan o no alguna discapacidad. ●
Si la misma representación visual puede
realizarse usando sólo texto, no deben usarse
En las imágenes es todavía más notable. Si, por imágenes para representar ese texto.
ejemplo, el tamaño de una letra es muy pequeño,
nuestros navegadores nos permiten ampliar el ●
Todas las imágenes, botones de imagen de los
tamaño o imprimir el documento; pero en el caso formularios y las zonas activas de los mapas de
de las imágenes, si las ampliamos, se pierde calidad imagen, tendrán un texto alternativo adecuado.
y, en ocasiones, podemos no distinguir nada.
●
Las imágenes que no transmitan contenidos,
Si ponemos un texto relevante en una imagen, un sean decorativas o con el contenido ya presente
usuario invidente no podrá verlo, pero tampoco como texto se ofrecerán con el texto alternativo
muchas personas con dificultades de visión. vacío (alt="") o aplicadas como fondos de imagen
CSS.
Por lo general debemos evitar:
●
Todas las imágenes que contengan un enlace
●
Poner textos en imágenes contarán con un texto descriptivo alternativo
(TITLE).
●
Sustituir textos por imágenes
●
El contenido o texto equivalente alternativo para
●
Poner imágenes de tamaño muy pequeño o de las imágenes complejas se ofrecerá en una página
baja calidad aparte (enlazada o referenciada mediante
longdesc).
Si por cualquier circunstancia nos viéramos
obligados a incumplir algunas de estas normas, ●
Todo movimiento automático, parpadeo o
deberíamos, al menos, ofrecer una versión texto de desplazamiento de más de tres segundos deberá
la imagen que hemos puesto o poner en el ALT de poderse pausar, parar u ocultar por el usuario. El
la imagen una descripción de la misma (ver movimiento, parpadeo, o desplazamiento podrá
apartado de Accesibilidad y TYPO3: Para imágenes) usarse para llamar la atención del usuario o
destacar un contenido si dura menos de tres
segundos.


5. Accesibilidad del audio y vídeo
Si parte de nuestros contenidos están en audio o En resumen
vídeo, personas con dificultades o discapacidades
auditivas o visuales no tendrán acceso a él. Para que el vídeo sea accesible debe:

Para facilitarles estos contenidos debemos seguir ●
Tener subtítulos sincronizados con la imagen.
unas pautas. Los subtítulos no pueden ocultar información visual
importante.
Audio pregrabado (no en directo)
●
Tener un breve resumen del vídeo, en 5 ó 6
●
Se ofrecerá una transcripción descriptiva, líneas. Esta breve descripción, si se desea, puede
incluyendo todas las pistas e indicadores visuales y ofrecerse en formato audio, con un enlace que diga
auditivos. "escuchar descripción del vídeo".

Vídeo pregrabado (no en directo) basados en ●
Poner un enlace a la transcripción escrita (texto
web que contiene tanto los diálogos como información
relevante del vídeo: "se apaga la luz", "sale por la
puerta el joven", "al abuelo se le caen las gafas y
●
Se ofrecerá una descripción auditiva o textual
entonces su nieto le dice"...).
para los vídeos grabados sin audio (por ejemplo,
vídeos que no incluyen pistas de audio) ●
Proporcionar controles al usuario, mínimo para
pausar, parar y reiniciar el vídeo, así como para
●
Se ofrecerán subtítulos (vídeos de YouTube, etc.)
controlar el volumen; todo ello manejable desde
ratón y teclado.
Vídeo o audio en directo

●
Se ofrecerán subtítulos sincronizados con el
audio para todo el contenido multimedia ofrecido
en directo (emisiones sólo audio, web cast,
videoconferencias, animaciones Flash, etc.)


6. Accesibilidad de los textos: consideraciones generales
●
La página web deberá tener un título descriptivo ●
Evitar o restringir el uso de abreviaturas, Errores a evitar:
e informativo de la misma. acrónimos, siglas, etc.; y si se han de usar varias
veces en la página, la primera vez que se haga
●
El orden de navegación y lectura será lógico e debe contener una descripción de las mismas.
intuitivo (evitar saltos innecesarios dentro de la
página). ●
Si algunas secciones tienen contenidos en un
idioma diferente al principal, éste deberá estar
●
El orden de la navegación por los enlaces, identificado utilizando el atributo lang (por
elementos de los formularios, etc. deberá ser ejemplo, <p lang="en">).
lógico e intuitivo.
●
Si la misma representación visual puede
●
Las instrucciones no dependerán de la forma, realizarse usando sólo texto, no deben usarse
tamaño o ubicación visual (por ejemplo, "Haga imágenes para representar ese texto.
clic en el icono cuadrado para continuar" o "Las
instrucciones están en la columna de la derecha"). ●
Todo movimiento automático, parpadeo o
desplazamiento de más de tres segundos deberá
●
Las instrucciones no dependerán del sonido poderse pausar, parar u ocultar por el usuario. El
(por ejemplo, "Un sonido beep le indica que movimiento, parpadeo, o desplazamiento podrá
puede continuar"). usarse para llamar la atención del usuario o
destacar un contenido si dura menos de tres
●
No use el color como el único método para segundos.
transmitir el contenido o distinguir elementos
visuales. ●
Se deberán proporcionar las suficientes
etiquetas, avisos e instrucciones necesarios para
●
Crear contenidos legibles y fáciles de entender. los elementos interactivos. Use para ello
instrucciones, ejemplos...


6. Accesibilidad de los textos: justificación de textos
En general, se desaconseja el uso del En la mayoría de las páginas, escribir bien y tener ¿Qué hacen los principales medios de
justificado, en pro de la legibilidad y cierta consideración con los lectores es la única comunicación?
accesibilidad del portal. "justificación" que se necesita.
Los principales medios de comunicación de todo
Por legibilidad Por accesibilidad el mundo (El País, El Mundo, BBC,
New York Times, Financial Times, CNN, etc), no
El texto justificado se utiliza en libros, boletines, Aunque actualmente casi todos los diseñadores han hecho caso omiso a estas recomendaciones,
periódicos y revistas en papel, para crear un ritmo desaconsejan su uso en web por muchísimas y han optado por no justificar nunca los textos en
horizontal que guíe a los ojos por la página. Pero razones, aquí no nos importan sólo las estéticas, la web. Y ellos mejor que nadie conocen bien a
esta justificación requiere una cuidada elección sino las de accesibilidad. los lectores. Por algo será.
de elementos que ofrecen las herramientas
profesionales con las que se crean estas Esta cita de una prestigiosa web de accesibilidad y En resumen
publicaciones: tipo y tamaño de letra, ancho de la usabilidad lo explica claramente:
página, longitud del bloque de texto, separación En general, se desaconseja el uso del justificado,
de sílabas, idioma, el propio texto del contenido, "La mayoría de los usuarios con dificultades de en pro de la legibilidad y accesibilidad del portal.
etc. lectura, encuentran problemas con el texto
justificado a ambos lados, y justificado a la El uso de texto justificado, sólo está justificado en
Desafortunadamente, en una página web no se derecha. El irregular espacio en blanco que se muy contadas ocasiones. Hay que evitar, en lo
puede controlar ninguno de estos elementos, por produce entre palabras, puede causar "ríos de posible, el uso de la justificación de textos a
lo que las justificaciones de texto rara vez están espacios blancos" hacia abajo, provocando una ambos lados, y a la derecha, en medios online.
justificadas, ya que es más fácil que el resultado lectura difícil y en algunos casos imposible para
sea peor de lo esperado. Los navegadores no algunos lectores".
están preparados para justificar textos, no pueden
partir palabras y crean unos ríos de espacios en Esto le ocurre especialmente a la gente con
blanco horrorosos. mucha dislexia.

La justificación se suele utilizar para "parecer Un estudio realizado sobre dos grupos de
formal, serio y autoritario", pero existen muchas usuarios a los que se dio a leer un texto por
otras formas más recomendables para ello que no pantalla justificado a ambos lados, y otro
comprometen la accesibilidad ni la legibilidad. justificado sólo a la izquierda; demostró que la
justificación de texto a ambos lados dificultaba la
lectura en la mayoría de los casos.


Accesibilidad y TYPO3


1. Enlaces a archivos o páginas web
Tras seleccionar la/s palabra/as que deben
enlazar, pinchamos sobre el icono y nos abrirá la
ventana que hay en la imagen.

Antes de nada, debemos elegir la pestaña
correspondiente: "Página" (si es un enlace a una
página interna de nuestra web), "Archivo" si es un
PDF, word o similar; "URL externo" si es una web
distinta a la nuestra o "Email" si indicamos una
dirección de correo electrónico.

Antes de seleccionar la página o archivo al que
debemos enlazar, hay que completar el formulario.

●
En "Destino" especificaremos si el enlace abre en
una nueva ventana o en la misma.

●
"Abrir en ventana" y "Estilo" se dejarán igual
que aparecen, pues sus valores e asignan
automáticamente.

●
En "Título" pondremos la descripción de la
página a la que apunta el enlace tal y como hemos
indicado antes.

●
Por ejemplo: "Abre una ventana nueva con la
Web oficial de la Junta de Comunidades de Castilla-
La Mancha".

●
Por último, seleccionaremos la página o archivo
de destino desde el árbol de navegación que
aparece más abajo.


2. Insertar imágenes accesibles
Para añadir imágenes accesibles, TYPO3 nos ofrece
un completo panel de etiquetas que se añaden a
los atributos de las imágenes automáticamente al
guardarlas.

Para ellos, tras seleccionar la imagen, hay que
completar varios campos:

●
"Texto alternativo" (ALT) con una descripción lo
más precisa posible sobre esa imagen (no valdría
"Foto de Violencia" o "Mujer") porque su objetivo
es ofrecer una descripción de la imagen a personas
que no puedan verla.

●
"Texto de título" (TITLE) sólo debemos rellenarlo
si la imagen lleva un enlace. Sirve para detallar ese
enlace, y deberíamos poner lo mismo que en el
apartado 1.2., por ejemplo: "Enlaza a la web de
Navegador@ (ventana nueva)"

●
El campo "URL de descripción larga" se utilizaría
si la descripción del enlace al que apuntamos es
demasiado larga. Entonces no rellenaríamos la
casilla anterior (Texto de título) y pondríamos aquí
ese texto.

●
Si por necesidades de espacio, debemos reducir
el tamaño de la imagen (que podemos hacer en el
campo Image Dimensions), deberíamos marcar la
casilla “Click para agrandar” para que el usuario
que tenga dificultades visuales pueda cliclar para
verla mejor.


3. Uso apropiado del texto alternativo en imágenes
A pesar de ser aún el principal motivo que afecta a ●
El texto alternativo de una imagen funcional (por
la accesibilidad web, todavía existen divergencias y ejemplo, con un enlace) debe describir tanto la
usos incorrectos en el modo de implementar el función como el contenido, siempre que sea
texto alternativo. posible, o aunque sea, sólo la función del enlace
(por ejemplo: “ir a inicio”).
Principios básicos
●
Las imágenes decorativas también necesitan un
Siguiendo los principios básicos aquí descritos, texto alternativo, pero éste debe ser nulo, es decir:
realizaremos contenidos web más accesibles para alt=””
usuarios con discapacidades:
●
El texto alternativo de la imagen debe ser
●
No lo pierdas de vista: añadir texto alternativo a especificado en el atributo ALT de la imagen.
las imágenes es una de las más sencillas técnicas de
accesibilidad web de aprender, y una de las más ●
El ALT debe tener como mínimo una palabra con
difíciles de mantener. más de cuatro caracteres.

●
Toda imagen debe tener un texto alternativo.
La accesibilidad de nuestra página incrementará
●
El texto alternativo de cada imagen debe ser muy significativamente si empleamos
conciso y mostrar el contenido y/o la función de la correctamente los textos alternativos de las
imagen. imágenes.

●
El texto alternativo no debe:
- Ser redundante (ser lo mismo que un texto justo
al lado de la imagen, por ejemplo el pie de foto).
- Usar frases como "imagen de…" o "gráfico de…".

●
El texto alternativo de la imagen depende en gran
medida del contexto en el que se encuentre dicha
imagen.


SEO y TYPO3


SEO y TYPO3
1. Posicionamiento por palabras clave y descripciones
Son aquellas acciones a realizar en una página web, destinadas a dos objetivos:
●
Conseguir una web de alta indexabilidad
●
Optimizar los contenidos para que se enfaticen aquellos términos por el que
deseamos que nos localicen en un buscador.

En TYPO3 disponemos de varias opciones para mejorar la indexabilidad de
nuestras páginas por los buscadores. Para ello, editamos la página en cuestión y
rellenaremos los campos que encontraremos en la pestaña “Metadata”:

●
Autor y email: rellenaremos estos campos siempre que queramos resaltar el
autor de un texto y un modo de contacto con él (en este caso el email).

●
Resumen de la página que estamos editando

●
Title, es decir, título de la página que saldrá en la barra de navegación superior
(texto que hay junto al icono del navegador que utilicemos) y que indexa Google
para mostrar a los usuarios. Si no se rellena este campo, el título que aparecerá
será el del nombre de la página que hayamos puesto al crearla, pero podemos
ampliar información sobre la página en esta etiqueta.

●
Palabras clave: palabras que definen el contenido de esta página, separadas por
comas. Por ejemplo: Si tememos una página del Museo Etnográfico las palabras
clave serían: museo,etnográfico,costumbres,tradiciones,piezas...
Al añadir palabras clave es mejor que usemos plurales, pues una palabra en plural
incluye también la misma palabra en singular, pero no al revés.

●
Descripción: podemos añadir una descripción completa y más larga del
contenido de esta página para especificar qué encontraremos en ella.


Enlaces de interés y
Bibliografía


Sobre Accesibilidad y PDF
* Adobe: Centro de recursos de accesibilidad.
Información de Adobe sobre las características de accesibilidad del formato PDF. (en inglés)
* Adobe Reader
* Adobe Acrobat
* Antonio Barranco: "Contenidos PDF en la web: Ventajas e inconvenientes"
* "Guía Accesibilidad en Documentos PDF", de INTECO (Instituto Nacional de Tecnologías de la
Comunicación). Ofrece a los desarrolladores las pautas necesarias para generar y configurar las
características de los PDF para que sean accesibles; así como para corregir los generados
anteriormente o por terceras personas, y herramientas de análisis y corrección de accesibilidad.
* Introducción a la Accesibilidad Web, en W3C
* Olga Carreras: "PDF accesibles (1 y 2)". Explica de manera clara y concisa cómo hacer que los PDF
sean accesibles: cómo realizar correctamente enlaces a un fichero PDF, qué alternativa accesible
ofrecer y cómo hacer el propio PDF accesible.

Sobre Accesibilidad y Dislexia
●
An Accessibility Frontier: Cognitive disabilities and learning difficulties, en
WebUsability.com.au (en inglés)
●
Designing web pages for dyslexic readers (en inglés)
●
Enabling the Internet for people with dyslexia, en e-bility.com (en inglés)
●
Maximise text readability - general advice, en Skills for Access (en inglés)

Legislación sobre Accesibilidad
●
Legislación Española sobre Accesibilidad. INTECO.
●
Legislación Europea sobre Accesibilidad. INTECO.
●
Legislación Española sobre Accesibilidad para la Sociedad de la Información. Fundación SIDAR.


Sobre Justificado de Textos
Explicación de los ríos de blanco, en Wikipedia (inglés):
http://en.wikipedia.org/wiki/River_%28typography%29

Artículos de diseñadores desaconsejando el uso:
●
La justificación de texto en la web en Duopixel
●
No a la alineación justificada en web en Nudonation
●
Usabilidad y accesibilidad: 10 errores que nunca debes cometer en Estudio DIV (ver "error nº 10")
●
¿Justificar mi texto? No, gracias en Rudd-O
●
Justificación de texto, ¿cuándo se justifica? en Insomnium
●
Unjustified en Antipixel (en inglés)
●
Readability making pages easy to read by design (en inglés)
●
Text justification – issues and techniques (en inglés)
●
Can justified text be justifed for the web? (en inglés)

Estudio con ejemplos prácticos: How do I justify text on both sides on Web pages? (en inglés)

Artículos de interés sobre justificado de textos:
● "Is Multiple-Column Online Text Better? It Depends!", by J. Ryan Baker.

● "An Accessibility Frontier: Cognitive disabilities and learning difficulties"

by Roger Hudson, Russ Weakley and Peter Firminge, 2005.

Estudio realizado por la Universidad del Estado de Wichita (EE.UU.)
● Is Multiple-Column Online Text Better? It Depends! By J. Ryan Baker (en inglés)


Sobre texto alternativo de las imágenes
●
“Uso apropiado del texto alternativo”. Autor: WebAIM. Web Accesibility in Mind, es una
iniciativa de la Universidad de Utah y el Centro para Personas con Discapacidad de dicha
Universidad.
●
“Texto alternativo para imágenes (alt-text)”. Autor: Jim Thatcher.
●
“Técnicas para proporcionar un texto alternativo correcto en HTML5” (En inglés). Autor: W3C.
●
“Proveyendo de texto alternativo a las imágenes”, por Mark Pilgrim, 2002. (Traducido al
español por Príamo J. Jiménez)
●
“¿Cómo se renderiza el texto alternativo en los principales clientes de correo electrónico?”
(En inglés). Autor: Mark Wyner de la empresa Campaing Monitor. Febrero de 2007.
●
Cómo describir imágenes complejas. “
Excerpts from the NBA Tape Recording Manual, Third Edition” (En inglés). Autor:
Asociación Nacional del Braille de Estados Unidos (NBA)
●
Cómo hacer CAPTCHAS accesibles. “Inaccesibilidad del CAPTCHA”, Autor: W3C Nota del
Grupo de Trabajo. 23 de noviembre de 2005.
●
“Los atributos alt y title”, Autor: 456 Berea Street.
●
“El atributo alt y la accesibilidad”. Mike Cherim. 11 de febrero de 2006.

Sobre ventanas nuevas en la navegación
●
“Listado de buenas prácticas sobre navegación, lenguaje y comprensión”, INTECO.
●
Legislación Española sobre Accesibilidad. INTECO.
●
Legislación Europea sobre Accesibilidad. INTECO.
●
“No abrir ventanas nuevas”, por Mark Pilgrim, 2002. (Traducido al español por Príamo J. Jiménez).
●
“Los diez principales errores nuevos del diseño de Internet”, por Jakob Nielsen, 1999. (En inglés).
●
“G200: Abrir nuevas ventanas y pestañas desde un enlace, sólo cuando sea necesario”.
Techniques for WCAG 2.0. W3C, 2010. (En inglés).
●
“G201: Proporcionar al usuario advertencias claras, a la hora de abrir nuevas ventanas o pestañas”.
Techniques for WCAG 2.0. W3C, 2010. (En inglés).


Fin del manual
ICTI Internet Passion
www.icti.es
hola@icti.es


Guía para editores web: Accesibilidad y Contenidos Web

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Guía para editores web: Accesibilidad y Contenidos Web

Similar to Guía para editores web: Accesibilidad y Contenidos Web (20)

Guía para editores web: Accesibilidad y Contenidos Web