SlideShare una empresa de Scribd logo
1 de 24
Descargar para leer sin conexión
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




Archivo: Guía para editores: Accesibilidad y Contenidos Web
Autor: Departamento Web de ICTI Internet Passion              Pág. 2
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                                                         Pág. 3
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                                                           Pág. 4
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                              Pág. 5
Sobre accesibilidad web




Archivo: Guía para editores: Accesibilidad y Contenidos Web
Autor: Departamento Web de ICTI Internet Passion              Pág. 6
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                                                      Pág. 7
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                                                    Pág. 8
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                               Pág. 9
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                                                    Pág. 10
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                                  Pág. 11
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                                                    Pág. 12
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                                                         Pág. 13
Accesibilidad y TYPO3




Archivo: Guía para editores: Accesibilidad y Contenidos Web
Autor: Departamento Web de ICTI Internet Passion              Pág. 14
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 Web
Autor: Departamento Web de ICTI Internet Passion              Pág. 15
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 Web
Autor: Departamento Web de ICTI Internet Passion              Pág. 16
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                                       Pág. 17
SEO y TYPO3




Archivo: Guía para editores: Accesibilidad y Contenidos Web
Autor: Departamento Web de ICTI Internet Passion                   Pág. 18
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 Web
Autor: Departamento Web de ICTI Internet Passion                                          Pág. 19
Enlaces de interés y
                                               Bibliografía




Archivo: Guía para editores: Accesibilidad y Contenidos Web
Autor: Departamento Web de ICTI Internet Passion               Pág. 20
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                         Pág. 21
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                         Pág. 22
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 Web
Autor: Departamento Web de ICTI Internet Passion                                                           Pág. 23
Fin del manual
                                                                     ICTI Internet Passion
                                                                               www.icti.es
                                                                              hola@icti.es



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

Más contenido relacionado

Destacado

El conflicto cósmico sobre el carácter de Dios
 El conflicto cósmico sobre el carácter de Dios El conflicto cósmico sobre el carácter de Dios
El conflicto cósmico sobre el carácter de Diosmarco valdez
 
Wie CallidusCloud CPQ hilft, den Benefit von CRM und ERP zu maximieren
Wie CallidusCloud CPQ hilft, den Benefit von CRM und ERP zu maximierenWie CallidusCloud CPQ hilft, den Benefit von CRM und ERP zu maximieren
Wie CallidusCloud CPQ hilft, den Benefit von CRM und ERP zu maximierenSalesforce Deutschland
 
Program Dewellness2u.com
Program Dewellness2u.comProgram Dewellness2u.com
Program Dewellness2u.comdewellness2u
 
NTT Data - Social Media in Greater China - Chance oder Notwendigkeit
NTT Data - Social Media in Greater China - Chance oder NotwendigkeitNTT Data - Social Media in Greater China - Chance oder Notwendigkeit
NTT Data - Social Media in Greater China - Chance oder NotwendigkeitSalesforce Deutschland
 
Kundenakquise beschleunigen mit Pardot
Kundenakquise beschleunigen mit PardotKundenakquise beschleunigen mit Pardot
Kundenakquise beschleunigen mit PardotSalesforce Deutschland
 
Das qi stärken
Das qi stärkenDas qi stärken
Das qi stärkenReuter Hein
 
Vortrag Preisgestaltung fuer Gruender in Berlin
Vortrag Preisgestaltung fuer Gruender in BerlinVortrag Preisgestaltung fuer Gruender in Berlin
Vortrag Preisgestaltung fuer Gruender in BerlinSven Jänchen
 
10 dinge die sich ändern wenn ihr chef eine frau ist
10 dinge die sich ändern wenn ihr chef eine frau ist10 dinge die sich ändern wenn ihr chef eine frau ist
10 dinge die sich ändern wenn ihr chef eine frau istfink2fink2
 
Contact Sheet (3)
Contact Sheet (3)Contact Sheet (3)
Contact Sheet (3)Petewall003
 
YOUR SL - Wir bringen Salesforce in Ihr Unternehmen
YOUR SL - Wir bringen Salesforce in Ihr UnternehmenYOUR SL - Wir bringen Salesforce in Ihr Unternehmen
YOUR SL - Wir bringen Salesforce in Ihr UnternehmenSalesforce Deutschland
 
Adobe Digital Roadblock Report 2015 - Deutschland
Adobe Digital Roadblock Report 2015 - DeutschlandAdobe Digital Roadblock Report 2015 - Deutschland
Adobe Digital Roadblock Report 2015 - DeutschlandAdobe Marketing Cloud
 
Uso de semillas de eucalipto para descontaminar aguas residuales
Uso de semillas de eucalipto para descontaminar aguas residualesUso de semillas de eucalipto para descontaminar aguas residuales
Uso de semillas de eucalipto para descontaminar aguas residualesNelson Giovanny Rincon S
 

Destacado (20)

El conflicto cósmico sobre el carácter de Dios
 El conflicto cósmico sobre el carácter de Dios El conflicto cósmico sobre el carácter de Dios
El conflicto cósmico sobre el carácter de Dios
 
Wie CallidusCloud CPQ hilft, den Benefit von CRM und ERP zu maximieren
Wie CallidusCloud CPQ hilft, den Benefit von CRM und ERP zu maximierenWie CallidusCloud CPQ hilft, den Benefit von CRM und ERP zu maximieren
Wie CallidusCloud CPQ hilft, den Benefit von CRM und ERP zu maximieren
 
App Vortrag vdl
App Vortrag vdlApp Vortrag vdl
App Vortrag vdl
 
Caso clinico
Caso clinicoCaso clinico
Caso clinico
 
Program Dewellness2u.com
Program Dewellness2u.comProgram Dewellness2u.com
Program Dewellness2u.com
 
Entwurf vota dukumentaiton
Entwurf vota dukumentaitonEntwurf vota dukumentaiton
Entwurf vota dukumentaiton
 
Los si y los no del piercing
Los si y los no del piercingLos si y los no del piercing
Los si y los no del piercing
 
NTT Data - Social Media in Greater China - Chance oder Notwendigkeit
NTT Data - Social Media in Greater China - Chance oder NotwendigkeitNTT Data - Social Media in Greater China - Chance oder Notwendigkeit
NTT Data - Social Media in Greater China - Chance oder Notwendigkeit
 
Kundenakquise beschleunigen mit Pardot
Kundenakquise beschleunigen mit PardotKundenakquise beschleunigen mit Pardot
Kundenakquise beschleunigen mit Pardot
 
Como protejo-a-mi-familia
Como protejo-a-mi-familiaComo protejo-a-mi-familia
Como protejo-a-mi-familia
 
Das qi stärken
Das qi stärkenDas qi stärken
Das qi stärken
 
Vortrag Preisgestaltung fuer Gruender in Berlin
Vortrag Preisgestaltung fuer Gruender in BerlinVortrag Preisgestaltung fuer Gruender in Berlin
Vortrag Preisgestaltung fuer Gruender in Berlin
 
10 dinge die sich ändern wenn ihr chef eine frau ist
10 dinge die sich ändern wenn ihr chef eine frau ist10 dinge die sich ändern wenn ihr chef eine frau ist
10 dinge die sich ändern wenn ihr chef eine frau ist
 
Nefos - Firmenprofil
Nefos - FirmenprofilNefos - Firmenprofil
Nefos - Firmenprofil
 
Contact Sheet (3)
Contact Sheet (3)Contact Sheet (3)
Contact Sheet (3)
 
YOUR SL - Wir bringen Salesforce in Ihr Unternehmen
YOUR SL - Wir bringen Salesforce in Ihr UnternehmenYOUR SL - Wir bringen Salesforce in Ihr Unternehmen
YOUR SL - Wir bringen Salesforce in Ihr Unternehmen
 
Visiona
VisionaVisiona
Visiona
 
Adobe Digital Roadblock Report 2015 - Deutschland
Adobe Digital Roadblock Report 2015 - DeutschlandAdobe Digital Roadblock Report 2015 - Deutschland
Adobe Digital Roadblock Report 2015 - Deutschland
 
Uso de semillas de eucalipto para descontaminar aguas residuales
Uso de semillas de eucalipto para descontaminar aguas residualesUso de semillas de eucalipto para descontaminar aguas residuales
Uso de semillas de eucalipto para descontaminar aguas residuales
 
Ostern in finnland tuomas
Ostern in finnland tuomasOstern in finnland tuomas
Ostern in finnland tuomas
 

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

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

Camila alejandra rodriguez zambrano
Camila alejandra rodriguez zambranoCamila alejandra rodriguez zambrano
Camila alejandra rodriguez zambrano
 
Especificación de requisitos de un sitio web
Especificación de requisitos de un sitio webEspecificación de requisitos de un sitio web
Especificación de requisitos de un sitio web
 
Diseño de paginas web clase 1 lista
Diseño de paginas web clase 1 listaDiseño de paginas web clase 1 lista
Diseño de paginas web clase 1 lista
 
Diseño de web
Diseño de webDiseño de web
Diseño de web
 
Trabajo 10
Trabajo 10Trabajo 10
Trabajo 10
 
Diseño pagina web- html
Diseño pagina web- html Diseño pagina web- html
Diseño pagina web- html
 
Dinarys duran
Dinarys duranDinarys duran
Dinarys duran
 
Lyseth (1)
Lyseth (1)Lyseth (1)
Lyseth (1)
 
Clase4 Pdigital2008 II
Clase4 Pdigital2008 IIClase4 Pdigital2008 II
Clase4 Pdigital2008 II
 
Html
HtmlHtml
Html
 
Frontpage3
Frontpage3Frontpage3
Frontpage3
 
HTML 5
HTML 5HTML 5
HTML 5
 
Html
HtmlHtml
Html
 
Chivas332
Chivas332Chivas332
Chivas332
 
Entorno de Programacion
Entorno de ProgramacionEntorno de Programacion
Entorno de Programacion
 
Presentacion 2.0
Presentacion 2.0Presentacion 2.0
Presentacion 2.0
 
Presentacion 2.0
Presentacion 2.0Presentacion 2.0
Presentacion 2.0
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web Responsive
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
El world wide web
El world wide webEl world wide web
El world wide web
 

Guía para editores web: Accesibilidad y Contenidos Web

  • 1. 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
  • 2. Pautas básicas sobre estilos y legibilidad web Archivo: Guía para editores: Accesibilidad y Contenidos Web Autor: 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 Web Autor: 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 Web Autor: 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 Web Autor: Departamento Web de ICTI Internet Passion Pág. 5
  • 6. Sobre accesibilidad web Archivo: Guía para editores: Accesibilidad y Contenidos Web Autor: 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 Web Autor: 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 Web Autor: 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 Web Autor: 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 Web Autor: 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 Web Autor: 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 Web Autor: 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 Web Autor: Departamento Web de ICTI Internet Passion Pág. 13
  • 14. Accesibilidad y TYPO3 Archivo: Guía para editores: Accesibilidad y Contenidos Web Autor: 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 Web Autor: 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 Web Autor: 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 Web Autor: Departamento Web de ICTI Internet Passion Pág. 17
  • 18. SEO y TYPO3 Archivo: Guía para editores: Accesibilidad y Contenidos Web Autor: 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 Web Autor: Departamento Web de ICTI Internet Passion Pág. 19
  • 20. Enlaces de interés y Bibliografía Archivo: Guía para editores: Accesibilidad y Contenidos Web Autor: 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 Web Autor: 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 Web Autor: 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 Web Autor: Departamento Web de ICTI Internet Passion Pág. 23
  • 24. Fin del manual ICTI Internet Passion www.icti.es hola@icti.es Archivo: Guía para editores: Accesibilidad y Contenidos Web Autor: Departamento Web de ICTI Internet Passion Pág. 24