Your SlideShare is downloading. ×
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Guía para editores TYPO3: Accesibilidad y Contenidos Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Guía para editores TYPO3: Accesibilidad y Contenidos Web

2,034

Published on

El Departamento Web de ICTI Internet Passion ha elaborado una guía que pueda servir como manual para los distintos editores web que deseen mejorar la accesibilidad y legibilidad de los contenidos de …

El Departamento Web de ICTI Internet Passion ha elaborado una guía que pueda servir como manual para los distintos editores web que deseen mejorar la accesibilidad y legibilidad de los contenidos de su site, con especial atención a los editores de TYPO3.

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,034
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Guía para editores TYPO3: Accesibilidad y Contenidos Web Última actualización: 12/01/2011 Autor: Dpto. Web ICTI Internet PassionArchivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 1
  • 2. Pautas básicas sobre estilos y legibilidad webArchivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 2
  • 3. 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.Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 3
  • 4. Sobre Estilos y Legibilidad Web 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".Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 4
  • 5. Sobre Estilos y Legibilidad Web 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.).Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 5
  • 6. Sobre accesibilidad webArchivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 6
  • 7. 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)"Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 7
  • 8. Sobre Accesibilidad Web 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.).Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 8
  • 9. Sobre Accesibilidad Web 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.Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 9
  • 10. Sobre Accesibilidad 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.Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 10
  • 11. Sobre Accesibilidad Web 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.)Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 11
  • 12. Sobre Accesibilidad Web 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...Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 12
  • 13. Sobre Accesibilidad Web 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.Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 13
  • 14. Accesibilidad y TYPO3Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 14
  • 15. 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.Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 15
  • 16. Accesibilidad y TYPO3 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.Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 16
  • 17. Accesibilidad y TYPO3 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.Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 17
  • 18. SEO y TYPO3Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 18
  • 19. 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.Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 19
  • 20. Enlaces de interés y BibliografíaArchivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 20
  • 21. 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.Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 21
  • 22. 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)Archivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 22
  • 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. 23
  • 24. Fin del manual ICTI Internet Passion www.icti.es hola@icti.esArchivo: Guía para editores: Accesibilidad y Contenidos WebAutor: Departamento Web de ICTI Internet Passion Pág. 24

×