ATENCIÓN Las páginas de Villa Quintus se han trasladado a villaquintus.sarovi.com Por favor, actualiza tus enlaces

Como acercar la red
a personas con discapacidades

Introducción

Este documento pretende ser una guía de referencia de las cosas que un escritor de páginas Web debe tener en cuenta para acercar Internet a personas con alguna discapacidad.

En general podemos distinguir tres puntos fuertes:

• La estructura del documento. Debe distinguirse claramente entre los códigos HTML que estructuran un documento y los que sirven para "mejorar su aspecto", dejando los estilos en cascada (Style Sheets) para lo que se refiere al formato.
• Navegación. Debe ser posible navegar por una página usando tan solo en teclado accediendo a todos los enlaces e información con este método.
• Formato alternativo. Debe proporcionarse un formato alternativo a cada información que se muestre, ya sea con el uso de videos, transcripciones, subtítulos, enlaces a documentos de texto, etc.

Guías

1. Imágenes, Fotos y Gráficos.

   • Todas las imágenes, vídeos, etc. deben tener un texto alternativo.
   • La descripción debe ser breve y concisa.
   • Todas las descripciones deben acabar con un punto, esto es importante, ya que los navegadores de texto usados por personas con problemas visuales concatenan las descripciones de las imágenes al texto adyacente.
   • Todos los gráficos que muestren una información importante (como tablas, diagramas o gráficos estadísticos) deben estar acompañados de una descripción más larga, ya sea usando un enlace externo o utilizando el atributo "LONGDESC".
   • Algunos formatos de imagen permiten incluir texto con estas, y esa posibilidad debe ser contemplada.
   • Hay que tener cuidado con las descripciones de las imágenes muy pequeñas, si se trata de una imagen descriptiva es correcto el uso de palabras sueltas como "Nuevo.", "Novedad." etc. estas incluso pueden venir entre corchetes "[Nuevo]" o "[Novedad]", para diferenciar mejor su significado.
   • En el caso de pequeñas imágenes de un punto, para diferenciar elementos de una lista, es mejor usar caracteres como "*", "#", "·" etc. que una descripción.
   • Omite siempre el uso de dibujos hechos con ASCII (arte ASCII, flechas "->", smileys ":)"...) y substitúyelos con imágenes, ya que confunden a los navegadores de texto y braille.

2. Mapas de imagen.

   • Usa siempre que puedas mapas de imagen procesados por el cliente (Client Side Image Maps).
   • Incluye un texto descriptivo para cada enlace o zona de la imagen usando el atributo "ALT".
   • Proporciona un acceso alternativo al mapa de imagen, ya sea con otra página o poniendo los enlaces de texto debajo de la imagen.

3. Enlaces.

   • Es importante que el texto del enlace tenga sentido por si solo, pero sin ser demasiado largo ya que entonces puede resultar confuso. Si eso resulta inadecuado usa el atributo "TITLE" con una descripción breve y descriptiva.
   • También es recomendable el no poner enlaces distintos seguidos, ya que pueden confundir a los navegadores de texto y ser interpretados como uno solo, para evitarlo podemos poner texto o caracteres como "|" y espacios.
   • Proporciona atajos de teclado usando el atributo "ACCESSKEY".

4. Navegación con el teclado.

   • Asegúrate de que se puede navegar entre los enlaces usando la tecla TAB, y que no se salta enlaces. En caso de problemas o para facilitar la navegación usa el atributo "TABINDEX".
   • Proporciona atajos de teclado usando el atributo "ACCESSKEY" para todos los controles y enlaces que lo acepten. (Subraya el atajo de teclado en la etiqueta del control).

5. Applets y objetos insertados.

   • Proporciona presentaciones alternativas a los Applets y Scripts, usando descripciones o contenido alternativo usando "NOSCRIPT", etc.
   • Dispón de una página alternativa que sólo tenga texto e imágenes.
   • Si es necesario interactuar con el Applet, asegúrate de que puede hacerse sólo con el teclado.
   • Proporciona un texto descriptivo de cada Applet.
   • Todo el texto en movimiento o parpadeo debe poderse detener.

6. Marcos (Frames).

   • Utiliza el código "NOFRAMES" para mostrar un enlace a una página que no los utilice.
   • Asegúrate de que las páginas son legibles sin el uso de marcos.
   • Da un título a cada marco con el atributo "TITLE".
   • Si es posible, utiliza el atributo "LONGDESC" de los códigos "FRAME" e "IFRAME" para mostrar una descripción de los marcos y cómo interactuan entre ellos.

7. Tablas.

   Las tablas son una herramienta muy poderosa para ordenar la información y facilitar su entendimiento, así como para dar formato a un documento HTML; sin embargo las tablas, de no ser muy simples, confunden fácilmente a los navegadores de texto.
   • Proporciona páginas alternativas que no utilicen tablas, excepto para tablas simples que no pierdan significado al ignorarse sus códigos o en las que el texto no forme columnas múltiples.
   • Asegúrate de que el contenido de la tabla sigue teniendo sentido leyéndose esta de izquierda a derecha y de arriba abajo, como si todas las celdas estuviesen fusionadas.
   • Evita usar tablas para forrajear texto en columnas. (Ver apartado anterior).
   • Utiliza el atributo "TITLE" para proporcionar un título a las diferentes filas y columnas, así como a diferentes celdas cuando esto sea adecuado.
   • Proporciona un sumario de la página usando el atributo "SUMMARY".

8. Soporte de los parámetros personalizados.

   • No abuses de las fuentes, colores o tamaños específicos.
   • Utiliza códigos de formato ("H1, H2, EM, SAMP, STRONG,..), no formatees simplemente el texto.
   • No exijas un tamaño de pantalla determinado.
   • Recuerda que el ancho de la pantalla puede variar...
   • Las imágenes, los Applets, los Scripts, los marcos, etc. pueden estar desconectados, usa atributos como "ALT, TITLE, NOSCRIPT, NOFRAMES, etc." para mostrar un contenido alternativo.

9. Sonidos y animaciones.

   • Proporciona transcripciones de texto para los archivos de voz, o breves descripciones de los mismos si se trata de sonidos (por ejemplo "Canto del ruiseñor.")
   • En el caso de animaciones es interesante que dichas transcripciones de sonido estén sincronizadas con las imágenes de vídeo a modo de subtítulos. Algunos formatos de vídeo como QuickTime 3.0 permiten incluir dichas transcripciones en el archivo.
   • Proporciona descripciones alternativas de texto de la información mostrada en las animaciones, bien sea usando el atributo "ALT" o con un enlace a un archivo de texto.

10. Formatos alternativos.

    • Proporciona formatos alternativos, ya sean imágenes o textos, de todos los formatos específicos que no sean comunes o para los que no haya un visor gratuito, excepto cuando dichos archivos tengan interés sólo para usuarios de dichos formatos. (Por ejemplo es absurdo poner un archivo de Autocad DWG con un esquema de tu ciudad ya que podría ponerse un GIF, pero si se tratase de un detalle constructivo de un fabricante de motores de coche el formato alternativo sería irrelevante).

11. Formularios.

    • No utilices mapas de imagen para crear botones gráficos de "Submit" etc.
    • Asocia un código "LABEL" con cada elemento del formulario.
    • Proporciona texto alternativo para las imágenes usadas como botones.
    • Utiliza el atributo "TABINDEX" para especificar el orden de tabulación de los componentes del formulario.
    • Proporciona atajos de teclado usando el atributo "ACCESSKEY".

12. Cosas a evitar.

    • No uses códigos HTML específicos como "BLINK" o "MARQUEE" porque no se podrán ver desde otros navegadores.
    • Evita el uso de textos en movimiento ("MARQUEE") o proporciona un contenido alternativo.
    • Nunca uses textos en movimiento o parpadeantes ("MARQUEE" y "BLINK") como enlaces.

13. Si todo lo anterior falla.

    • Proporciona en cada página un enlace para que el usuario pueda cambiar fácilmente entre la versión de texto de la página y la que tiene imágenes, etc.
    • Proporciona información en la cabecera del documento para que sea procesada automáticamente por el navegador y acceda a las páginas alternativas.

      <HEAD>
      <TITLE>¡Bienvenido a Villa Quintus!</TITLE>
      <LINK title="Versión sólo texto"
            rel="alternate" 
      	  href="solo_texto.html"
            media="aural, braille, tty">
      </HEAD>
      

Para ampliar la información

• WAI HOME PAGE
• WAI ACCESSIBILITY GUIDELINES  PAGE AUTHORING
• YURI RUBINSKY INSIGHT FOUNDATION WEBABLE!
• LYNX VIEWER
• BEST VIEWED WITH ANY BROWSER ACCESSIBLE SITE DESIGN

Prueba tus páginas.

1. Desconecta las imágenes, los sonidos y las animaciones. Asegúrate de que todas ellas tienen su texto alternativo y que este se ve, verifica que la página mostrada es legible con facilidad y que no se ha perdido información.
2. Desconecta los estilos (Style Sheets) y asegúrate de que todo se ve bien.
3. Utiliza la fuente más grande soportada por tu navegador.
4. Redimensiona tu navegador y pruébalo con diferentes resoluciones y número de colores.
5. Navega por tu página usando el teclado.
6. Selecciona todo el texto y cópialo con el portapapeles en el block de notas ¿se entiende?.
7. Utiliza navegadores específicos usados por personas con discapacidades o al menos prueba tu página con Lynx Viewer.
8. Usa un validador de páginas como Bobby, W3C HTML Validator service o Kinder-Gentler Validation

Un saludo.