Webmaster Libre

Los siguientes consejos, extraídos de la web de la WAI, resumen los puntos clave de las directrices de accesibilidad web: WCAG 1.0

1. Imágenes y animaciones: utiliza el atributo alt para describir la función de cada elemento visual.
2. Mapas de imágenes: Utiliza mapas del lado del cliente y provee de alternativas de texto para cada zona activa
3. Multimedia: Proporciona subtitulos y transcripciones del audio y descripciones del video
4. Enlaces: Crea enlaces con texto que tenga sentido cuando se lea fuera de contexto. Por ejemplo evita los enlaces del tipo «click aquí»
5. Organización de la página: Usa encabezados, listas y crea una estructura coherente para tus sitios. Utiliza CSS para la maquetación y el estilo siempre que sea posible
6. Gráficos y esquemas: Crea resúmenes o utiliza el atributo longdesc.
7. Scripts, applets y plugins: Proporciona alternativas para los casos en que el acceso a funciones activas no esté soportado
8. Frames: Utiliza el elemento no frames y títulos con sentido
9. Tablas: Crea tablas que puedan ser leídas línea por línea. Haz resúmenes del contenido de las mismas.
10. Revisa tu trabajo: Valida, utiliza las herramientas, referencias y pautas que encontrarás en http://www.w3.org/TR/WCAG/

Como me señalaba Rodolfo Pilas en los comentarios de 9 razones para no usar frames pueden existir proyectos en los que el uso de frames pueda resultar adecuado. Si no tienes más remedio que usar frames, al menos que sean accesibles y usables.

• Proporciona contenido alternativo para los usuarios de agentes que no soporten los frames.
  Proporciona contenido de valor dentro de las etiquetas <noframes>.
  En lugar del típico Esta página utiliza frames pero tu navegador no los soporta utilízala para colocar una descripción y enlaces que faciliten la navegación por las páginas de tu sitio.

  Por ejemplo:

  1. ...
  2. <noframes>
  3. <p>
  4. Bienvenido a Nombredelsitio. Tu navegador no soporta frames y por ello tendrás que navegar por las diversas páginas de este sitio mediante los enlaces siguientes:
  5. </p>
  6. <a href="contenido.html">Página Principal</a>
  7. <a href="contenido2.html">Seccion ... </a>
  8. ...
  9. </noframes>

  En el caso de los iframes deberás encerrar el contenido adicional entre las etiquetas <iframe> y éste sólo se mostrará a los usuarios cuyos navegadores no soporten frames.
  Por ejemplo:

  1. <iframe src="licencia.html" width="400" height="500" scrolling="auto">
  2.   <p>
  3.     Esta página está bajo <a href="licencia.html">licencia libre</a>
  4.   </p>
  5. </iframe>
• Identifica correctamente los marcos, utiliza nombres descriptivos en el atributo name y da información sobre su contenido o función con el atributo title
  1. <frameset rows="20%,*,30%">
  2. <frame name="navegacion" src="navegacion.html" title="Menu de navegacion">
  3. <frameset cols="20%,*,">
  4. <frame name="opciones-secundarias" src="opciones.html" title="Menu con opciones secundarias">
  5. <frame name="contenido" src="contenido.html"  title="Contenido principal">
  6. </frameset>
  7. <frame name="pie-de-pagina" src="pie.html" title="Pie de página y licencia">
  8. </frameset>

  Además, en caso de que la relación entre los marcos sea demasiado compleja, debes facilitar una descripción de los mismos en una nueva página a la que se pueda acceder mediante el atributo longdesc de, al menos, uno de los marcos del frameset

  1. <frame name="navegacion" src="navegacion.html" title="Menu de navegación" longdesc="descripcion-frameset.html">
• Controla siempre el marco de destino de tus enlaces. Tus usuarios se sentirán desconcertados si, al pulsar sobre un enlace, se abre en el frame equivocado o queda encerrada una página ajena a tí entre tus marcos
  1. <a href="1.html" target="contenido">Este enlace se abrirá en el marco cuyo nombre (name) es contenido</a>
  2. <a href="2.html" target="_self">Este enlace se abrirá en el mismo marco</a>
  3. <a href="3.html" target="_top">Este enlace mostrará una página que eliminará la estructura de marcos</a>
  4. <a href="4.html" target="_parent">Este enlace abrirá la página en el marco que contiene al marco actual, de no existir hará el mismo efecto que top</a>
  5. <a href="5.html" target="_blank">Este enlace se abrirá en una nueva ventana del navegador</a>

Además, como recompensa adicional, los buscadores podrán indexar tu sitio correctamente y mejorará tu posicionamiento.

Puede que al leer el título muchos de vosotros (espero que la mayoría) hayáis tenido el reflejo de mirar al calendario para comprobar que no estamos en 1999 (o alrededores). Para la mayoría de desarrolladores web es algo más que obvio: No debes usar frames.
No obstante, cada día hay muchas personas introduciéndose en el mundo del desarrollo web y, por desgracia, muchos de ellos acuden a los tan manidos tutoriales y manuales que llevan siglos rodando por la red, cayendo en esos errores que tantos años nos costó a los demás evitar. Sin ir más lejos, ayer mismo, en un foro (siento no recordar cual) vi una pregunta del tipo ¿Cómo creo una web con frames? y yo pensé ¿por qué iba nadie a querer crear una web con frames? ¿Quizá porque desconoce todos los inconvenientes que conllevan?

De ahí estas 9 razones por las que no debes utilizar frames:

1. Están desaconsejados por el W3C.
2. El usuario debe entrar siempre por la página principal, donde se encuentra la declaración de marcos. Si accediese por otra página diferente se perdería elementos tales como la navegación (el uso más frecuente de los frames)
3. Al no cambiar la URL en las diversas páginas, el usuario no podrá añadir a sus favoritos secciones de la página
4. Los botones «anterior» y «siguiente» de los navegadores pueden no funcionar adecuadamente. Así mismo podemos dificultar el uso del Historial del Navegador
5. Si el usuario desea imprimir la página podemos obtener resultados no deseados.
6. Se reduce el espacio en pantalla, comprimiendo en ocasiones el contenido entre los frames. Situación que empeora si se accede al sitio mediante dispositivos con poca resolución de pantalla (por ejemplo pda o móviles)
7. Las páginas con Marcos pueden dar problemas al visualizarse con navegadores antiguos, navegadores solo texto y agentes de usuario no visuales.
8. No podemos promocionar páginas interiores ya que necesitamos que los visitantes accedan por la página principal. Perderemos por tanto enlaces profundos y demás
9. La página principal no tiene contenido, sólo contiene la declaración de Frames. Los buscadores sólo indexarán el contenido de la declaración NOFRAMES, que no suele ser muy útil (¿os suena el típico «Esta página utiliza frames pero su navegador no lo soporta»?)

Y, en caso de necesitarlos, crea frames más accesibles y usables

AENOR, en colaboración con CTIC y ESI, lanza un certificado, al que podrán optar todo tipo de páginas y portales de internet y que acreditará que son accesibles para el mayor número de personas, independientemente de sus limitaciones o de las derivadas del entorno de uso.

La nueva certificación asegura a empresas privadas y Administraciones públicas que sus sitios web cumplen en todo momento con las pautas de accesibilidad establecidas en la norma y aporta un sello de excelencia a su presencia en Internet. Asimismo sirve como importante guía de apoyo a la hora de definir los requisitos de contratación y como distintivo de confianza para los usuarios.

Esperemos que, con esta iniciativa, sean muchos los sitios (empezando por las administraciones públicas) que adopten una actitud más comprometida con la accesibilidad web.

Enlace: AENOR lanza la certificación de accesibilidad web en colaboración con CTIC y ESI

Sin duda, de entre todos los cambios que le hice al blog este fin de semana, el más interesante desde el punto de la usabilidad y la accesibilidad ha sido mejorar los formularios y una de las mejoras ha sido la siguiente.

Como dicen las pautas de accesibilidad (Prioridad 3, en este caso)

10.4 Hasta que las aplicaciones de usuario manejen los controles vacíos correctamente, incluya valores por defecto en campos de texto y cuadros de verificación.

Muy bien, introducimos un valor por defecto en los campos de texto. No obstante, es realmente molesto tener que borrar el texto para poder comenzar a escribir. Ahí es donde entra el Javascript, este blog siempre ha tenido un simple toquecito de Javascript para solventar el problema (más o menos)

Esta opción siempre me había parecido una pequeña chapuza, había que incluirla a mano en todos los campos de texto, rompía con la validación del XHTML y, una vez habíamos eliminado el texto éste no volvía a aparecer.

Ayer se me ocurrió mirar si había algunasolución mejor por el mundo, de esas listas para usar (y poco pensar) y dí con esta:
Clearing Default Text
Mucho más limpio y más sencillo.

Simplemente importamos dos archivos javascript y agregamos la clase cleardefault a los campos de texto donde queramos utilizarlo.

Podéis ver un ejemplo en cualquier formulario de este sitio.

Para descargar los archivos o si queréis más explicaciones sobre el script, su funcionamiento y el código, dirigios artículo original: Clearing Default Text

Ya lo comentamos antes, en la Unión Europea se acordaron recientemente unas pautas y criterios de accesibilidad y unos plazos máximos para que todos los sitios públicos sean completamente accesibles.

En la Asociación de Internautas han querido comprobar cuan accesibles son los sitios web del Gobierno español y, como cabía esperar, el resultado ha sido penoso.

• Seguimos comprobando que muchas no cumplen los estándares W3C, e incluso muchas sólo son accesibles con un determinado navegador y que, a veces, no permiten realizar tramites on line si no se dispone de el.
• Las barreras a la accesibilidad siguen estando presentes en la gran mayoría de los sitios web de la Administración, por lo que la población discapacitada no tiene los mismos derechos que los demás.
• Todavía en España hay muchísima gente que no tiene acceso a la banda ancha y nos encontramos que la navegación por algunas de las páginas de la Administración se hacen insufribles por el tiempo que tarda en cargar una página.

En el artículo completo en el web de la AI nos han dejado una tabla comparativa de los sitios y sus resultados ante pruebas como el validador del w3c o pruebas de velocidad de carga.

Es, cuanto menos, reseñable que algunos sitios tengan errores tan tontos como mas de una etiqueta body o un gif animado de 2 megas.

¿Llegaremos a tiempo al 2010?

Hace tiempo hablabamos de SortTable, un script que permitiría que nuestros usuarios ordenasen las columnas de nuestras tablas de mayor a menor tanto numérica como alfabéticamente.

Brian McAllister ha creado un script que va un paso más allá de Sorttable, Unobtrusive Table Sorting. Se trata de un javascript no obstrusivo que permitirá a nuestros usuarios ordenar las tablas basándose en numerosos criterios (demo) a la vez que nos permitirá conseguir el encantador «efecto de cebra» en las tablas y el resaltado de la columna que se está ordenando.

Para utilizarlo simplemente tendremos que incluirlo en la cabecera de nuestro documento

y asignar a las tablas y etiquetas TH los nombres de clase especificados en las instrucciones.

Descarga, instrucciones y ejemplos:
Unobtrusive Table Sorting (Revisited)

Hoy, gracias a la lista de correo de la Fundación Sidar,Acceso Web, descubro un recurso más que interesante acerca de Accesibilidad: Dive into Accesibility.

Se trata de una recopilación de trucos y consejos que terminarán de clarificarnos por qué necesitamos crear sitios accesibles y cómo hacerlo. Actualmente el texto está en inglés, no obstante, según el sitio parece que ya hay gente trabajando en la traducción al castellano.

Dive into Accesibility

Si hay algo que confunda a nuestros usuarios, al menos los menos «tecnológicos», es pulsar sobre un link y terminar en la misma página en la que estaban. Ya lo dijo Nielsen (traduccion de Torres Burriel), salvo en el caso de los «skiplinks» o de las anclas para dividir textos largos, no deberíamos ofrecer enlaces que apunten a la página actual.

Una forma muy sencilla de limpiar el sitio de esos enlaces «redundantes» es mediante Javascript, Jonathan Snook nos ofrece un sencillo script que examinará automáticamente los enlaces de un sitio y eliminará los que apunten a la página actual salvo los que contienen un ancla:

Clear links to current page with unobtrusive Javascript

Y si no os gusta utilizar Javascript, dos métodos más:

1. Mediante PHP (o ASP): http://www.maratz.com/blog/archives/2004/11/18/faux-active-link/
2. Simulándolo con CSS: http://www.themaninblue.com/writing/perspective/2004/11/19/

Jakob Nielsen nos habla este mes de los problemas con la arquitectura de la información.

Si tus usuarios siguen yendo a la sección equivocada, tienes muchas opciones mediante las que ponerlos en la pista, desde mejores etiquetas hasta una estructura más clara:

1. Junta las secciones que te dan problemas, si dos secciones similares confunden a tus usuarios únelas. No obstante ten en cuenta que las secciones con más contenido pueden confundir a tus usuarios.
2. Si no quieres unirlas cambiales el nombre, haz que se distingan de forma más clara
3. Explica las opciones, añade imágenes o texto que identifiquen más claramente el contenido de las secciones. Eso si, mantente breve.
4. Reestructura el sitio
5. Cambia la información de sitio. Si tus visitantes llegan buscando un contenido a la seccion equivocada mueve el contenido ahí.
6. Añade enlaces que hagan referencias cruzadas. Por mucho que lo prepares nunca tendrás una navegación perfecta, añade enlaces donde pienses que son necesarios

Por supuesto, todo esto queda mucho más claro en el artículo (en inglés) donde se expone con claridad el proceso de diagnóstico y las soluciones dadas a un ejemplo real.

6 Ways to Fix a Confused Information Architecture