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

Guía para editores TYPO3:Accesibilidad y Contenidos Web

Última actualización: 12/01/2011Autor: Dpto. Web ICTI Internet Passion

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

Pautas básicas sobre estilos y legibilidad web

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

Accesibilidad

Es indudable la importancia de hacer accesible nuestra web, algo que en portales oficiales es obligatorio por Ley, y de que todos sus elementos lo sean por igual, tanto el material escrito (textos, PDF y documentos word/odt) como el audiovisual (imágenes, vídeos...).

La web entregada cumple el nivel de conformidad doble A (AA) de la Guía de Estilo de Accesibilidad Web 2.0 (WCAG 2.0), pero si realmente nos importan los usuarios con discapacidad, debemos trabajar todos los días para mantenerla.

Uno de los puntos donde la mayoría de los portales fallan, es ahí: diseñan y trabajan la web para que cumpla los criterios y normas de accesibilidad cuando se presenta, pero en el mantenimiento diario dejan de considerarse estas normas y los nuevos contenidos dejan de ser accesibles.

Objetivo de este manual

Esta guía para editores de TYPO3, trata de:

● Dar unas nociones básicas sobre cómo se han de tratar los contenidos en la web para que cumpla las principales normas de accesibilidad y para que ésta no pierda su estética y forma.

● Asegurar una coherencia gráfica perdurable, punto crítico tanto en usabilidad como accesibilidad.

● Garantizar a los usuarios la correctavisualización de los contenidos,independientemente del navegador utilizado.

Los editores web

Llamamos editores web, editores de contenido o simplemente editores, a aquellas personas que se encargan de cargar la web de contenido real, con fotos y textos definitivos, durante las fases de preproducción y producción del proyecto.Sustituyen nuestro “Lorem ipsum”, por texto real.

Además, son los que actualizan y generan nuevos contenidos dentro de la web.

Diseño y estilo de la web

A menudo, existe una gran diferencia entre lo que al diseñador le gustaría que fuese la web, y lo que realmente acaba siendo una vez que tiene el contenido real cargado.

Esto es debido a que los editores normalmente no tienen el mismo gusto y estética, ni tampoco reparo, por ejemplo, en poner un titular de noticia con 4 líneas de texto, cosa que a un diseñador nunca se le ocurriría o, al menos, trataría de evitar.

Las guías de estilo de la web

En el diseño y arquitectura de la web se han definido unas guías de estilo que deben seguirse para que todo el site tenga la misma estética y no pierda su identidad.

Estas guías establecen el tipo, el tamaño y el color de la fuente que se ha de utilizar; así como de los títulos, hiperenlaces, destacados...; el tamaño de los párrafos, las distancias entre los diferentes elementos de las páginas (texto, imágenes, márgenes...).

Por ello, es necesario seguir estrictamente una serie de normas que definiremos más adelante.

Sobre Estilos y Legibilidad Web1. Algunas consideraciones para editores web

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

Respetar los diseños de páginas que se hayan definido

HOME (sólo para la portada principal de la web), SUBHOME (para las páginas principales de cada sección) e INTERIOR (para cualquier página interior). Si usamos alguna de ellas en otro lugar podríamos confundir al usuario.

Respetar el lugar establecido para cada flex (Contenido Flexible)

Cuando añadimos un nuevo elemento de contenido a las páginas éste tiene un lugar preestablecido y no es modificable. Esto es especialmente constatable en los Flex. Cada uno de ellos cuenta con una imagen y un breve descripción de para qué se usa, su tamaño y en qué lugar debe estar. Es muy importante respetarlo porque si se pusiera en algún otro lugar diferente del indicado, cambiaría su aspecto, forma, estilo y funcionalidades.

No utilizar tablas para maquetar contenidos

Siguiendo las normas y pautas de accesibilidad, las tablas sólo pueden utilizarse para tablas de datos como tal, pero no para poner contenidos dentro de ellas. Si necesitamos columnas para maquetar, podemos utilizar el flex diseñado para ese fin.

No justificar textos

En general, en medios on-line hay que evitar en lo posible el uso de la justificación de textos a ambos lados y a la derecha: por legibilidad y accesibilidad. (Ver apartado correspondiente en Accesibilidad)

Para resaltar algo

Deben utilizarse las cursivas y negritas o los flex y cajas de destacados diseñados para ello, y que pueden ubicarse en diferentes partes de la páginas: superior, centro, laterales...

No introducir párrafos en blanco o tabulaciones

No deben introducirse párrafos en blanco para separar los textos, ni tampoco tabulaciones entre las palabras.

Si se quiere dejar un espacio a la izquierda o derecha del texto puede utilizarse la sangría, o también distinguirlos con la lista ordenada o de topos.

No cambiar la fuente ni tamaño de los textos

Para los contenidos de la página el editor de texto ya tiene predefinido el tipo de texto: "Párrafo".

Encabezados de los contenidos

Para hacer apartados dentro de los textos pueden utilizarse encabezados a modo títulos o subtítulos, pero siguiendo el orden diseñado y escalonado, es decir, seguir la jerarquía de encabezados y no saltar del H3 al H5 en el siguiente titular.

Las pautas generales suelen ser:● H1-Encabezado 1: se usa sólo para el título del web site, por lo que no debe usarse.● H2-Encabezado 2: encabezado oculto para estructurar contenidos, no debe utilizarse.● H3-Encabezado 3: para el titular de la página en la que estamos, tampoco debe usarse.● Para los titulares deben utilizarse los encabezados a partir de H4-Encabezado4 y siempre en orden descendente y jerarquizado.

Además,por legibilidad, los titulares no deberían tener más de 75 caracteres.

Uso de mayúsculas

Evitar, o al menos restringir, el uso de mayúsculas, pues así facilitaremos la legibilidad de los textos. Poner mucho texto en mayúscula satura al usuario. Como ya hemos comentado, para resaltar deben utilizarse negritas y encabezados.

Sobre Estilos y Legibilidad Web2. Pautas básicas sobre estilos y legibilidad web

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

No pegar textos directamente en el editor de texto enriquecido de TYPO3

Uno de los errores más frecuentes de los editores web, por comodidad, falta de tiempo o de conocimientos, es copiar los textos desde Word o desde la propia web y pegarlos directamente en el editor de texto enriquecido que ofrece TYPO3.

Esto supone un grave problema pues arrastraremos formatos que nos resultarán muy difíciles de modificar y limpiar, y que modificarán el estilo que tenemos definido para nuestras páginas, además de recargar de código oculto excesivo nuestro portal.

El procedimiento ideal es copiar nuestro texto y pegarlo previamente en un editor de texto plano, 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.).

En resumen: el editor de texto enriquecido de TYPO3, es para enriquecer el texto sin formato que traeremos desde el bloc de notas. Si pegamos directamente, el editor interpretará las características del texto de origen y éstas sustituirán a las nuestra web.

Ancho de las líneas de texto

Por legibilidad y accesibilidad, el ancho total de las líneas de texto no debe superar los 100 caracteres, que equivaldrían a unas 14 ó 16 palabras, independientemente de la resolución que se utilice para el diseño de la web.

Si añadimos más caracteres a las líneas de texto, muchos usuarios pueden tener dificultad en volver al principio de la línea siguiente.

Sobre Estilos y Legibilidad Web2. Pautas básicas sobre estilos y legibilidad web

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

Sobre accesibilidad web

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

Relevancia de sus contenidos

Estos documentos pueden ampliar la información que mostramos o dar la opción de guardar los contenidos en este formato para consultarlos más adelante o imprimirlos. Tienen, pues, la misma relevancia que el resto de contenidos de nuestra web.

Pero al hablar de accesibilidad no nos referimos sólo a que puedan consultarlos personas que posean una discapacidad. Si alguien consulta el documento en un móvil o en un ordenador en el que no esté instalado un lector PDF, y no tenga posibilidad de descargarlo ni instalarlo, tampoco podrá acceder a esta información.

Es aconsejable utilizar los PDF sólo para:

● Ampliar información sobre un tema● Contenidos demasiado extensos para ser leídos en la web● Conservar un formato y características concretas (manuales, documentos oficiales, plantillas...) ● Ser imprimidos (como impresos y formularios)

Pero siempre usados con moderación, pensando siempre en la utilidad que tendrán para el usuario y no en aumentar el "espacio" de nuestra web, pues no por tener más contenidos estos van a ser mejores.

Integrar bien los PDF

Es necesario, en primer lugar, darles un nombre adecuado (acorde a su contenido y descriptivo); y aportar al usuario la mayor información posible del documento al que le remitimos, por lo que debemos indicar:

● Que es un enlace a un PDF (mediante un texto o icono reconocible)

● Que para su visualización es necesario un lector de PDF, e indicaciones sobre cómo obtenerlo e instalarlo (dónde descargar el programa)

● Su tamaño (y advertir si este es elevado, para quien utilice una conexión de baja velocidad)

● Si para su visualización se abrirá una nueva ventana o se cargará en la misma (pues la opción de abrir o guardar el PDF dependerá del navegador y del sistema operativo que estemos utilizando, entre otros factores)

● Ejemplo: Incluir un enlace a la ley de prevención de malos tratos. No podemos llamar al PDF "5-2001.pdf". Lo correcto sería "Abre en una ventana nueva un PDF con la Ley 5/2001 de Prevención de Malos Tratos y Protección de las Mujeres Maltratadas (564 KB)" o "Abre en ventana nueva la Ley 5/2001, en PDF (564 KB)"

Otras recomendaciones

Acompañar el enlace al PDF con un esquema, texto explicativo o resumen de su contenido (en el que se encuentren las máximas palabras clave posibles), lo que permitirá al usuario saber si le interesa o no.

Ofrecer una versión alternativa al PDF siempre que sea posible (en este sentido hay que tener en cuenta que los formatos RTF y DOC no son opciones demasiado accesibles porque siguen necesitando software externo para abrirlos y además no son libres) o, al menos, que pueda exportarse como HTML, XML y TXT.

Sobre el resto de formatos de documentos

Al remitir al usuario a la descarga de un documento habría que ofrecer varias alternativas del mismo como word, open office, bloc de notas...; pues si el programa con el que se ha generado el mismo no estuviera instalado en su ordenador, no podría acceder a esa información.

Sobre Accesibilidad Web1. Accesibilidad de los archivos y PDF

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

Los enlaces deben distinguirse de los elementos y texto que les rodean. Si utiliza el color para diferenciar los enlaces, use una forma adicional para distinguirlos (por ejemplo, se subrayan cuando se sitúa el cursor sobre ellos).

Los enlaces, tanto internos (a nuestras propias páginas) como externos (a otras web o a email), deben seguir también unas especificaciones similares a los PDF.

Para empezar, no debemos utilizar frases genéricas como "leer más", o "pinche aquí", sino que debemos identificar claramente el objetivo de cada enlace.

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: consideraciones generales

Enlace a páginas internas o externas

Además, hay que indicar:

● Si abre o no en una ventana nueva● Nombre de la web, título de la página a la que apunta el enlace o breve descripción de la misma.

Ejemplo: Debemos insertar un enlace a la página de la JCCM. Deberíamos poner "Abre una ventana nueva con la Web oficial de la Junta de Comunidades de Castilla-La Mancha" o "Abre en una ventana nueva la web www.jccm.es"

Algunos ejemplos

Sobre Accesibilidad Web

Enlace a un email

Para añadir una dirección de correo electrónico, deben seguirse las mismas pautas que para añadir enlaces, especialmente indicar que es una dirección de email y a quién se envía.

Ejemplo: "Envía un correo electrónico a info@jccm.es"

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

Principales razones

● Viola la Guía de Estilo de Accesibilidad Web

La principal razón es que abrir un enlace en una ventana nueva, sin que haya una necesidad expresa y muy justificada de hacerlo, viola la Guía de Estilo de Accesibilidad Web (en concreto la norma 3.2 que dice “Realizar páginas web que funcionen de modo predecible”), y si vives en un país que disponga de una legislación antidiscriminatoria, puedes entrar en conflicto con ella.

● 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.

2. Accesibilidad de los enlaces: evitar ventanas nuevas en la navegación

Sobre Accesibilidad Web

Dar libertad al usuario

Si tus usuarios quieren abrir un enlace en una nueva ventana, él o ella pueden hacerlo fácilmente en la mayoría de los navegadores (botón derecho: “Abrir enlace en una nueva pestaña o ventana”); no hay una necesidad de forzar este gesto a todos los usuarios.

Estamos hablando de dar libertad al usuario de elegir su modo de navegar por el portal, que siempre será el más cómodo para él, y al que esté acostumbrado.

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

Como ya hemos comentado, todos los contenidos de la web deben ser accesibles para todos los usuarios, ya tengan o no alguna discapacidad.

En las imágenes es todavía más notable. Si, por ejemplo, el tamaño de una letra es muy pequeño, nuestros navegadores nos permiten ampliar el tamaño o imprimir el documento; pero en el caso de las imágenes, si las ampliamos, se pierde calidad y, en ocasiones, podemos no distinguir nada.

Si ponemos un texto relevante en una imagen, un usuario invidente no podrá verlo, pero tampoco muchas personas con dificultades de visión.

Por lo general debemos evitar:

● Poner textos en imágenes

● Sustituir textos por imágenes

● Poner imágenes de tamaño muy pequeño o de baja calidad

Si por cualquier circunstancia nos viéramos obligados a incumplir algunas de estas normas, deberíamos, al menos, ofrecer una versión texto de la imagen que hemos puesto o poner en el ALT de la imagen una descripción de la misma (ver apartado de Accesibilidad y TYPO3: Para imágenes)

3. Accesibilidad de las imágenes

Normas obligatorias

● Si la misma representación visual puede realizarse usando sólo texto, no deben usarse imágenes para representar ese texto.

● Todas las imágenes, botones de imagen de los formularios y las zonas activas de los mapas de imagen, tendrán un texto alternativo adecuado.

● Las imágenes que no transmitan contenidos, sean decorativas o con el contenido ya presente como texto se ofrecerán con el texto alternativo vacío (alt="") o aplicadas como fondos de imagen CSS.

● Todas las imágenes que contengan un enlace contarán con un texto descriptivo alternativo (TITLE).

● El contenido o texto equivalente alternativo para las imágenes complejas se ofrecerá en una página aparte (enlazada o referenciada mediante longdesc).

● Todo movimiento automático, parpadeo o desplazamiento de más de tres segundos deberá poderse pausar, parar u ocultar por el usuario. El movimiento, parpadeo, o desplazamiento podrá usarse para llamar la atención del usuario o destacar un contenido si dura menos de tres segundos.

Errores a evitar

Sobre Accesibilidad Web

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

Si parte de nuestros contenidos están en audio o vídeo, personas con dificultades o discapacidades auditivas o visuales no tendrán acceso a él.

Para facilitarles estos contenidos debemos seguir unas pautas.

Audio pregrabado (no en directo)

● Se ofrecerá una transcripción descriptiva, incluyendo todas las pistas e indicadores visuales y auditivos.

Vídeo pregrabado (no en directo) basados en web

● Se ofrecerá una descripción auditiva o textual para los vídeos grabados sin audio (por ejemplo, vídeos que no incluyen pistas de audio)

● Se ofrecerán subtítulos (vídeos de YouTube, etc.)

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

5. Accesibilidad del audio y vídeo

En resumen

Para que el vídeo sea accesible debe:

● Tener subtítulos sincronizados con la imagen. Los subtítulos no pueden ocultar información visual importante.

● Tener un breve resumen del vídeo, en 5 ó 6 líneas. Esta breve descripción, si se desea, puede ofrecerse en formato audio, con un enlace que diga "escuchar descripción del vídeo".

● Poner un enlace a la transcripción escrita (texto 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 entonces su nieto le dice"...).

● Proporcionar controles al usuario, mínimo para pausar, parar y reiniciar el vídeo, así como para controlar el volumen; todo ello manejable desde ratón y teclado.

Sobre Accesibilidad Web

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

● La página web deberá tener un título descriptivo e informativo de la misma.

● El orden de navegación y lectura será lógico e intuitivo (evitar saltos innecesarios dentro de la página).

● El orden de la navegación por los enlaces, elementos de los formularios, etc. deberá ser lógico e intuitivo.

● Las instrucciones no dependerán de la forma, tamaño o ubicación visual (por ejemplo, "Haga clic en el icono cuadrado para continuar" o "Las instrucciones están en la columna de la derecha").

● Las instrucciones no dependerán del sonido (por ejemplo, "Un sonido beep le indica que puede continuar").

● No use el color como el único método para transmitir el contenido o distinguir elementos visuales.

● Crear contenidos legibles y fáciles de entender.

● Evitar o restringir el uso de abreviaturas, acrónimos, siglas, etc.; y si se han de usar varias veces en la página, la primera vez que se haga debe contener una descripción de las mismas.

● Si algunas secciones tienen contenidos en un idioma diferente al principal, éste deberá estar identificado utilizando el atributo lang (por ejemplo, <p lang="en">).

● Si la misma representación visual puede realizarse usando sólo texto, no deben usarse imágenes para representar ese texto.

● Todo movimiento automático, parpadeo o desplazamiento de más de tres segundos deberá poderse pausar, parar u ocultar por el usuario. El movimiento, parpadeo, o desplazamiento podrá usarse para llamar la atención del usuario o destacar un contenido si dura menos de tres segundos.

● Se deberán proporcionar las suficientes etiquetas, avisos e instrucciones necesarios para los elementos interactivos. Use para ello instrucciones, ejemplos...

Errores a evitar:

Sobre Accesibilidad Web6. Accesibilidad de los textos: consideraciones generales

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

En general, se desaconseja el uso del justificado, en pro de la legibilidad y accesibilidad del portal.

Por legibilidad

El texto justificado se utiliza en libros, boletines, periódicos y revistas en papel, para crear un ritmo horizontal que guíe a los ojos por la página. Pero esta justificación requiere una cuidada elección de elementos que ofrecen las herramientas profesionales con las que se crean estas publicaciones: tipo y tamaño de letra, ancho de la página, longitud del bloque de texto, separación de sílabas, idioma, el propio texto del contenido, etc.

Desafortunadamente, en una página web no se puede controlar ninguno de estos elementos, por lo que las justificaciones de texto rara vez están justificadas, ya que es más fácil que el resultado sea peor de lo esperado. Los navegadores no están preparados para justificar textos, no pueden partir palabras y crean unos ríos de espacios en blanco horrorosos.

La justificación se suele utilizar para "parecer formal, serio y autoritario", pero existen muchas otras formas más recomendables para ello que no comprometen la accesibilidad ni la legibilidad.

En la mayoría de las páginas, escribir bien y tener cierta consideración con los lectores es la única "justificación" que se necesita.

Por accesibilidad

Aunque actualmente casi todos los diseñadores desaconsejan su uso en web por muchísimas razones, aquí no nos importan sólo las estéticas, sino las de accesibilidad.

Esta cita de una prestigiosa web de accesibilidad y usabilidad lo explica claramente:

"La mayoría de los usuarios con dificultades de lectura, encuentran problemas con el texto justificado a ambos lados, y justificado a la derecha. El irregular espacio en blanco que se produce entre palabras, puede causar "ríos de espacios blancos" hacia abajo, provocando una lectura difícil y en algunos casos imposible para algunos lectores".

Esto le ocurre especialmente a la gente con mucha dislexia.

Un estudio realizado sobre dos grupos de usuarios a los que se dio a leer un texto por pantalla justificado a ambos lados, y otro 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.

¿Qué hacen los principales medios de comunicación?

Los principales medios de comunicación de todo el mundo (El País, El Mundo, BBC, New York Times, Financial Times, CNN, etc), no han hecho caso omiso a estas recomendaciones, y han optado por no justificar nunca los textos en la web. Y ellos mejor que nadie conocen bien a los lectores. Por algo será.

En resumen

En general, se desaconseja el uso del justificado, en pro de la legibilidad y accesibilidad del portal.

El uso de texto justificado, sólo está justificado en muy contadas ocasiones. Hay que evitar, en lo posible, el uso de la justificación de textos a ambos lados, y a la derecha, en medios online.

6. Accesibilidad de los textos: justificación de textos

Sobre Accesibilidad Web

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

Accesibilidad y TYPO3

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

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.

Accesibilidad y TYPO31. Enlaces a archivos o páginas web

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

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.

2. Insertar imágenes accesibles

Accesibilidad y TYPO3

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

A pesar de ser aún el principal motivo que afecta a la accesibilidad web, todavía existen divergencias y usos incorrectos en el modo de implementar el texto alternativo.

Principios básicos

Siguiendo los principios básicos aquí descritos, realizaremos contenidos web más accesibles para usuarios con discapacidades:

● No lo pierdas de vista: añadir texto alternativo a las imágenes es una de las más sencillas técnicas de accesibilidad web de aprender, y una de las más difíciles de mantener.

● Toda imagen debe tener un texto alternativo.

● El texto alternativo de cada imagen debe ser conciso y mostrar el contenido y/o la función de la imagen.

● 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.

● El texto alternativo de una imagen funcional (por ejemplo, con un enlace) debe describir tanto la función como el contenido, siempre que sea posible, o aunque sea, sólo la función del enlace (por ejemplo: “ir a inicio”).

● Las imágenes decorativas también necesitan un texto alternativo, pero éste debe ser nulo, es decir: alt=””

● El texto alternativo de la imagen debe ser especificado en el atributo ALT de la imagen.

● El ALT debe tener como mínimo una palabra con más de cuatro caracteres.

La accesibilidad de nuestra página incrementará muy significativamente si empleamos correctamente los textos alternativos de las imágenes.

3. Uso apropiado del texto alternativo en imágenes

Accesibilidad y TYPO3

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

SEO y TYPO3

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

1. Posicionamiento por palabras clave y descripciones

SEO y TYPO3

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.

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

Enlaces de interés y Bibliografía

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

* 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 PDF

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.

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

Sobre Justificado de TextosExplicació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)

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

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

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

Fin del manualICTI Internet Passion

www.icti.eshola@icti.es