Alejandro Arco

La usabilidad web se refiere a la facilidad o dificultad de uso de una aplicación web, es decir, al nivel en el que el diseño de una interfaz web facilita o dificulta su uso. De este modo, la experiencia del usuario se basa en estos tres principios de usabilidad web: facilidad de uso, flexibilidad en el intercambio de información y la robustez de la web.

Todo sitio web usable debe responder a las necesidades del usuario, de este modo detallaré a continuación algunas de las pautas de usabilidad web comunes a cualquier interfaz web.

Pautas de usabilidad web

• Cumplir con los estándares web de la W3C.
  Validar XHTML y CSS
• Hacer que nuestro sitio web sea accesible.
  Validar accesibilidad web
• Realizar mapa web, distribución racional y consistente.
• Tiempos de carga reducidos, captar la atención del usuario.
• Logotipo enlazado con la sección de inicio.
• Eslogan que describa la temática del sitio web.
  Usabilidad web: administracion de sistemas y desarrollo web de aplicaciones.
• Lo más importante, siempre debe aparecer al principio de la web.
• Existencia de un buscador que funcione correctamente.
• Texto claramente legible y formateado, incluso en las imágenes.
• Botones de acción llamativos.
  Usabilidad web: botón llamativo de comprar ó enviar formulario.
• Enlaces para acción alternativa, aunque menos deseables.
  Usabilidad web: botón adicional de reestablecer formulario menos llamativo.
• Diseño web inteligente con facilidad de navegación.
  Usabilidad web: menú en la cabecera y en el pie de página redundante.
• No debe haber momento de fin de proceso.
  Usabilidad web: una vez finalizado un proceso de compra se mostrarían artículos adicionales destacados.
• Control de errores 404.
  Usabilidad web: página 404 personalizada con información relevante del sitio.
• Hacer uso de atajos de teclado “accesskey”.
  Usabilidad web: asignar atajos de teclado a las secciones estáticas relevantes.

¿Podemos hablar por tanto de los parámetros de usabilidad web como algo que va más allá de una guía de estilo realizada por el diseñador web? La respuesta es sí.

A todos los puristas de la validación web y el seo nos agrada cumplir con los estándares web de la W3C, por este motivo la inserción de contenidos flash dentro de nuestro código XHTML y HTML siempre nos había supuesto un quebradero de cabeza, ya que la etiqueta embed no se encuentra incluida dentro de los estándares web de la W3C.

Por este motivo, voy a aportar una manera de validar flash de forma accesible ya que validación flash no cumple con las pautas de accesibilidad web de prioridad 1 a menos que incluyamos una etiqueta noembed.

Características validar flash, validar swf, validar embed

• No se hace uso de javascript.
• No se hace uso de la etiqueta embed y noembed.
• No hay redundancia de información en la inicialización del contenido flash.
• Cumple los estándares web de la W3C y las pautas de accesibilidad web.
• Se visualiza contenido alternativo en caso de que el usuario no tenga el flash player instalado.

Ejemplo validar flash, validar swf, validar embed

<object type="application/x-shockwave-flash" data="/play-audio.swf">
<param name="movie" value="/play-audio.swf" />
<param name="flashvars" value="file=/audio.mp3" />
<img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" />
</object>

Espero que este nuevo artículo sobre la validación web y mas concretamente sobre la validación flash os sea de utilidad para vuestros proyectos web.

El proyecto OnClick JS es un script realizado en javascript para poder realizar el desarrollo de aplicaciones web más accesibles y cumplir las pautas de accesibilidad web relacionadas con los manejadores de eventos dependientes del dispositivo (Prioridad 2).

Características OnClick JS

• OnClick JS ha sido desarrollado en JavaScript.
• El tamaño de OnClick JS es de 827 bytes (versión compactada).
• Compatible con la etiqueta <a> de HTML para todos aquellos eventos onclick.
• OnClick JS ejecuta cualquiera de tus funciones en javascript.
• No hay una cantidad máxima de parámetros en la función a ejecutar.
• No hace uso de Frameworks JS.
• No es necesario usar manejadores de eventos redundantes:
  onclick / onkeypress.

Descargar OnClick JS

OnClick JS v1.01 (fichero comprimido en .zip - 606 bytes)

Instalación OnClick JS

Para poder unsar OnClick JS debemos añadir los ficheros necesarios entre nuestra etiqueta <head>…</head>.

<script src="/js/onclick/onclick.js" type="text/javascript"></script>

Configuración OnClick JS

Podremos agregar la función a ejecutar por OnClick JS pasándole los parámetros que esta requiera.

rel=”onclick[NombreFuncion(, Parametro1, Parametro2..ParametroN)]“

• NombreFuncion - Nombre de la función en JavaScript que queremos ejecutar.
• Parametro1..N - Parámetros de la función separados por comas.

Ejemplos OnClick JS

Descarga los ejemplos OnClick JS.

Recuerda que el siguiente código  debe añadirse entre la etiqueta <head>..</head>.

<script src="http://www.alejandroarco.es/wp-includes/js/onclick/onclick.js" type="text/javascript"></script>
<script type="text/javascript">
function HolaMundo() { alert('¡Hola Mundo!'); }
function Suma(n,m) { alert(n+' + '+m+' = ' + (n+m)); }
function CargarURL(url) { var m='¿Cargar Url\nmediante JavaScript?'; if(confirm(m)) { location.href=url; } }
</script>

El siguiente código debe añadirse entre la etiqueta <body>..</body>.

<h1>Ejemplos de OnClick JS</h1>
<ul>
<li><a title="Ejemplo uso Oclick JS - Hola Mundo" rel="onclick[HolaMundo]" href="#hola-mundo">Ejemplo uso Oclick JS - Hola Mundo (sin parámetros)</a></li>
<li><a title="Ejemplo uso Oclick JS - Suma 3+6" rel="onclick[Suma,3,6]" href="#suma">Ejemplo uso Oclick JS - Suma 3+6 (con parámetros)</a></li>
<li><a title="Ejemplo uso Oclick JS - Cargar URL" rel="onclick[CargarURL,'http://www.alejandroarco.es']" href="http://www.alejandroarco.es">Ejemplo uso Oclick JS - Cargar URL (accesible con JS deshabilitado)</a></li>
</ul>
<div><a title="administracion de sistemas y desarrollo de aplicaciones informaticas" href="http://www.alejandroarco.es">Alejandro Arco</a></div>

Compatibilidad OnClick JS

OnClick JS es compatible y se ha testeado con los siguientes navegadores (browsers): Internet Explorer 6+, Opera 9, Firefox 1.5+ y Safari 2+, con javascript habilitado.

Registro de cambios OnClick JS

• OnClick JS 1.01 (29/10/2008) - Publicación inicial

A continuación muestro algunas de las herramientas online más usadas para validar la accesibilidad web, estos validadores de la accesibilidad web evalúan todos y cada uno de los elementos y páginas que las componen de forma automátizada e informan de si se encuentran errores y qué puntos de verificación de las pautas deben ser revisados manualmente.

Validar Accesibilidad Web Online

• Validador eXaminator
  eXaminator (revisa y evalúa la accesibilidad en la web)
• Validador Hera
  Hera (revisando la accesibilidad con estilo)
• Validador TAW
  TAW (test de accesibilidad web)
• Validador WAVE
  WAVE (validador accesibilidad web - en inglés)

La accesibilidad web se encuentra estrechamente ligada con el cumplimiento de los estándares web de la W3C, de este modo recomiendo validar en un primer momento el cumplimiento de estos estándares (ver artículo Validar XHTML y CSS) y una vez cumplidos pasar a la validación de la accesibilidad web de nuestros sitios.

Fuente: Alejandro Arco

Todos los profesionales seo solemos hacer especial incapié en cumplir los estándares web de la W3C, para ello, usamos distintas herramientas disponibles tanto por la W3C como por otros medios. A continuación detallo algunas de las herramientas actualmente disponibles para la validación XHTML y CSS.

Validar XHTML y CSS

• Validador XHTML
  W3C XHTML (validador de la W3C)
• Validador CSS
  W3C CSS (validador de la W3C)
• Validador XHTML y CSS
  Validador XHTML y CSS (herramienta que usa los validadores de la W3C)
  Multipage Validator (herramienta que usa los validadores de la W3C pero permite validar URLs de forma múltiple)
• Validador para Firefox XHTML y CSS
  HTML Validator - Tidy (extensión Tidy para Firefox que valida en tiempo real el documento actual)

Este artículo está especialmente enfocado a la validación XHTML y CSS y no a la accesibilidad web (se publicarán artículos proximamente), aunque en gran medida esté estrechamente relacionado. Espero que el artículo os sea de utilidad a los profesionales seo y a los iniciados.

Fuente: Alejandro Arco