Este es un punteo de temas globales de accesibilidad y usabilidad mayormente a tener en cuenta para un sitio web.

El propósito del sitio debe ser claro y explícito

Es importante que nuestra home page hable por nosotros, en un primer vistazo debe comunicar a los usuarios quienes somos, que hacemos, y hasta más importante, en qué le podemos ser útiles.

Para ello podemos hacer uso de los slogans que acompañan al logo y ayudan a la marca en la comunicación de los objetivos. También se puede poner una introducción en la home que explique en pocas palabras este tema.

Declarar la identidad del sitio

Es importante ubicar de forma visible los mecanismos para ponerse en contacto con el sitio, tanto en línea: email, como postales y telefónicos. Esto nos da credibilidad y nos corporiza.

Diseño universal

Diferentes grupos de usuarios, necesitan diferentes interfaces, por ello se diseña con independencia del dispositivo, es decir, separando el contenido del formato, para permitir su presentación en múltiples plataformas y sistemas operativos como así también para su activación desde diversos dispositivos de entrada.

Las páginas deben ser testeadas durante las etapas de desarrollo para que su formato se visualice correctamente usando diferentes plataformas y navegadores.

Diseño consistente

Es necesario presentar uniformidad en la estructura del sitio para transmitirles a nuestros usuarios cuándo están en nuestro sitio, cuando se van por un enlace que le recomendamos.

En sitios grandes y con públicos heterogéneos es frecuente que los diseñadores se encuentren ante la disyuntiva de ofrecer diseños diferentes para cada perfil, pero a pesar de estas personalizaciones (colores, tipografías, estilo de imágenes, etc.) hay ciertos pasos que se pueden seguir para lograr la consistencia:

  • Mantener un encabezado común, y también puede ser un pié, en todas las páginas que le indique al usuario que sigue navegando dentro de la misma estructura de la página anterior. No tiene que ser el mismo del home, generalmente lo que usamos para la página principal es vistoso y probablemente podamos reducir su tamaño en las páginas internas.
  • Si es posible mantener un background común entre todas las páginas, siempre se recomiendan fondos claros con tipografía oscura para no cansar la vista de los lectores.
  • Indicarle a cada paso donde está, a donde puede ir y si es posible de donde viene (breadcrumbs)
  • Ofrecer las opciones principales del sitio para que el usuario tenga a mano cuales son sus posibilidades de navegación.

Se trata de que página tras páginas los usuarios se familiaricen con el entorno y entonces puedan dedicarse a la exploración del contenido sin estar pensando en la orientación dentro del sitio.

La oferta heterogénea en cuanto al destino final (dentro del sitio o en otros sitios) debe ser explicitada, es conveniente que la oferta interna se encuentre agrupada en un sector (por ejemplo las botoneras del sitio) y la oferta externa se encuentre ubicada en otro sector (por ejemplo a la izquierda, pueden ser en forma de banners o no).

Evitar los callejones sin salida

Las páginas del sitio deben poseer la suficiente navegación para permitir al usuario que ha entrado seguir hacia las demás secciones del sitio y volver para atrás en su recorrido.

Es necesario que todas las páginas internas tengan enlace a la página principal del sitio y de existir también a la página anterior en la jerarquía, mientras más profundo sea el sitio, más probable es que el usuario se equivoque de ruta y lo más fácil sea volver hacia atrás, esto se logra a través de los breadcrumb, que cumplen la función de path y  van marcando el recorrido del usuario a través de las páginas jerárquicamente.

El logo del sitio que se encuentra en el header de cada página debe siempre tener un link a la home, salvo en la home misma. El mapa del sitio debe estar también referido desde todas las páginas al igual que el mail de contacto.

Evitar la sobrecarga informativa

Hay que tener en cuenta que demasiada información (textual, visual…) en una sola página confunde y agota al usuario. También la legibilidad del texto (tipo y tamaño de fuente, contraste entre el color de la fuente y el fondo…) es un factor muy importante al que prestarle especial atención, ya que por más importantes y valiosos que sean nuestros contenidos, de nada servirán si no pueden llegar a nuestros usuarios de forma clara, comprensible y descansada.

El balance entre las zonas blancas y las que tienen contenido debe estar equilibrado, El fondo blanco generalizado no permite una clara separación de las distintas áreas de la página (contenido, navegación, header, etc) . Si las interfaz no puede individualizarse, el usuario no podrá concentrarse en el contenido porque no lo puede separar de los elementos de navegación.

La función de búsqueda debe estar en un lugar preponderante

La búsqueda es muy importante dentro de cualquier sitio, gran parte de los usuarios de internet son search-oriented, eso significa que cuando entran a una página lo primero que hacen es expresar sus inquietudes en el campo de búsqueda. Por ello es indispensable que haya un buscador en la home page y demás página del sitio, en un lugar preponderante o visible y que el campo de texto tenga el ancho suficiente para que los usuarios puedan escribir cómodamente, esto significa al menos 25 caracteres.

Utilizar los títulos de las páginas

Los títulos de las páginas sirven de orientación al usuario tanto cuando está en primer plano como cuando queda en background, porque es lo que se muestra en la barra inferior del escritorio. Entonces lo óptimo sería que tenga información acerca de la página en donde se encuentra y del sitio que depende.

También sirven para aumentar el índice de findability de los buscadores.

Estructura de las páginas

Las páginas en occidente se estructuran de izquierda a derecha, de arriba hacia abajo, cuando los usuarios navegan un sitio siguen un patrón:

  1. Primero se fijan en la parte superior izquierda de la pantalla,
  2. Revolotean en esa área,
  3. Luego, después de estudiar detenidamente la parte superior de la página, exploran
    más abajo con un barrido de izquierda a derecha.

Este patrón recomienda ubicar contenidos de la siguiente forma:

  • En la parte superior izquierda se encontraría el logo de la organización y preferiblemente un slogan que describa el objetivo de la misma.
  • Los elementos de navegación (barras) deben ubicarse de forma horizontal a continuación de la cabecera, de izquierda a derecha y / o a la izquierda de la pantalla
  • En el centro superior la información de mayor importancia.
  • En la izquierda y en la parte inferior, información de menor rango.
  • Se pueden utilizar jerarquías para facilitar la exploración de la información:
    • títulos y subtítulos destacados
    • información relacionada concentrada en un mismo espacio
    • negrita, cursiva, etc., para enfatizar los contenidos
    • color para discriminar y distribuir informaciones

Los links deben ser reconocibles fácilmente

Los enlaces deben se identificados como tales a simple vista (colores definidos y uniformes en todo el sitio, subrayados si se encuentran insertos en un texto o si son títulos) y deben además indicar el estado en el que se encuentran (azul para los activos, violeta para los ya visitados), esto ayuda al usuario en su exploración de páginas con gran cantidad de información   ya que puede reconocer a simple vista los lugares por donde ya pasó.

El comportamiento se debe mantener también de forma estructural, eso significa que si se utiliza el enlace en el título en una parte del sitio, deberá respetarse esa norma para todo el sito.

Los enlaces que ocupan más de una línea deben ser reconocidos como una unidad. Las imágenes que acompañan a los enlaces deben tener el mismo comportamiento que ellos, o sea deben tener link. Los links del tipo: "hacer clic aquí"  deben ser evitados, no son accesibles y confunden a los usuarios sobre la información que encontrarán del otro lado.

No usar el color azul o subrayado para otro texto que no sea link. También hay que cuidar que no haya imágenes que parezcan enlaces y en realidad no lo sean, de aquí la necesidad de que los enlaces sean unívocamente distinguibles, para que el usuario no se la pase haciendo clic en toda la pantalla adivinando donde están los enlaces.

con respecto al target de los enlaces les recomiendo encarecidamente no hacer que se abran en una ventana nueva, ya que trae complicaciones tales como:

  • deshabilita la función del botón "Atrás" que es uno de los métodos de navegación más utilizados por los usuarios que no tienen experiencia.
  • además de que puede ser desconcertante para usuarios novatos que no pueden darse cuenta de que tienen más de una ventana abierta.
  • Es una práctica que molesta a los usuarios, los que pueden decidir volver o no a nuestro sitio en base a su experiencia en el mismo, el usuario se sentirá agradecido hacia aquellos sitios que le dejen practicar libremente su derecho a navegar.

Uso de textos alternativos para las imágenes

Siempre que se introducen imágenes en una página se deben incorporar con el atributo "alt" para describirlas (si se define a través de un texto corto, si la explicación debe ser más amplia se utilizará el atributo "longdesc", que especifica una URL con el documento que contiene una descripción más exhaustiva de la imagen). Se pretende así que cuando las imágenes sean deshabilitadas el sitio pueda seguir siendo entendible, ya que si el sitio utiliza botoneras hechas en base a imágenes y si éstasn no tienen texto alternativo, cuando, por distintos motivos las mismas no carguen, gran parte de la estructura y navegación del sitio se perderá.

Utilizar tags y hojas de estilo apropiadamente

Se deben utilizar los tags de forma semántica cuando sea posible, es decir usarlos para la función que fueron creados y no para dar un formato particular a un documento ya que no ayudará a la comprensión del documento por parte de personas que no puedan verlo.

Por ejemplo:

  • <em>Texto enfatizado</em>
  • <strong>Texto con fuerte énfasis</strong>
  • <cite>Texto citado</cite>
  • <sup>Texto en superíndice</sup>
  • <sub>Texto en subíndice</sub>
  • <abbr title=“significado” lang=“en”>abreviaturas</abbr>
  • <acronym title=“significado” lang=“es”>acrónimos</acronym>
  • h1, h2… h6 para los encabezados

Como verán los tags <b> (bold) e <i> (itálica) se reemplazan por <strong>  y <em> respectivamente, si bien no pasa nada si ponen b en lugar de strong,  o si ponen tags en mayusculas o no los anidan correctamente, porque la mayoría de los navegadores son bastante permisivos y hacen vista gorda a este tipo de errores, el problema reside en que el código no valida contra los estándares.

Enlaces recomendados: