El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Estás navegando por el archivo de la categoría Usabilidad y Accesibilidad

Desmontando mitos sobre estructuras de página

Seguramente debido a que muchos de nosotros, los que trabajamos en la web, somos autodidactas o a que es un medio en constante movimiento, donde quedarse desfasado es cuestión de meses, la principal fuente de aprendizaje e inspiración a la que todos recurrimos es la observación. Esto hace que, en ocasiones, nos pasemos de unos a otros ciertas malas costumbres. Algunas incluso consideradas comúnmente como buenas soluciones cuando no lo son.

Andy Rutledge desmonta un par de layouts muy comunes (el de tres columnas con el contenido en el centro y el típico de los periódicos online) demostrándonos por qué son erróneos y ofreciéndonos algunas soluciones. No os lo perdáis, seguro que os sorprendéis mucho.

Killing Some Bad Layout Conventions

Enlaces, Trucos y Consejos, Usabilidad y Accesibilidad

3 Comentarios

El secreto del éxito

A veces, cuando vemos esos sitios y aplicaciones web que amasan millones pensamos ¿por qué ellos y no yo?.
En la mayoría de ocasiones no valoramos cuanto trabajo lleva conseguir un sitio de éxito, pensamos que es todo sencillo y que la mayoría viene dado.

Pero, claro, un desarrollo exitoso depende de tantos factores que no se ven, que se asemeja a un iceberg.

Components of a successful website, the iceberg analogy

La parte visible la forman el contenido y su imagen, por debajo viene lo importante: buena programación, una planificación consciente, usabilidad, accesibilidad, optimización…

Todo ello conforma un sitio de éxito, un buen diseño con grandes contenidos a los que nadie puede acceder, que son difíciles de comprender o que no funcionan correctamente, no sirve de nada.

Via iGeek

Usabilidad y Accesibilidad

3 Comentarios

Un caso práctico de texto oculto para usuarios con necesidades especiales

Hace ya mucho tiempo traduje un artículo que hablaba de las ventajas de utilizar “texto oculto” específico para usuarios de lectores de pantalla. Sin duda, cuando traducía aquello podía verle uso para ocultar los labels de los formularios, sustituir texto por imágenes y poco más. Pero hoy, gracias a la pequeña selección de enlaces de CSS Tricks he descubierto una forma inteligente de añadir una capa más de atención para los usuarios discapacitados.

David Walsh
comparte con nosotros una gran idea. Incluye un párrafo de texto oculto con css al principio de la página, que contiene un mensaje para usuarios de lectores de pantalla, algo así (obviamente, traducción libre libre):


<p class="oculto">Bienvenido a mi sitio.
Este sitio ha sido creado para todo tipo de usuarios.
Por favor contacta conmigo en xx@xx.xx si encuentras alguna
dificultad al navegar por él.</p>

Por supuesto no sirve de nada si nuestra página es un infierno de tablas y código inaccesible pero es un pequeño detalle agradable y práctico al llamar la atención de todos aquellos usuarios que hayan encontrado dificultades para navegar el sitio, con lo que podremos mejorarlo.

Eso si, no abuséis del texto oculto. Puede llegar a ser molesto, en los comentarios del artículo de David alguien apunta a colocarlo tras un enlace de “saltar al contenido” para no forzar a nuestros usuarios a escuchar una y otra vez el “utilísimo aviso accesible” y me parece la solución ideal.
Ademas, aún albergo dudas sobre si Google podría penalizarte al ofrecer una versión “distinta” de la página para usuarios y arañas. Mi opinión es que no debería si no lo usamos para meter con calzador oncemil palabras clave pero visto lo puntilloso que se nos está volviendo…

Lo que lamento es que no cuento con el testimonio de ningún usuario de lectores de pantalla para saber de primera mano lo útil o molesto de un aviso de este tipo. Si conocéis alguien que pueda probar, por favor, compartid la experiencia.

(x)HTML, CSS, Usabilidad y Accesibilidad

4 Comentarios

Gráficos accesibles con Google Charts

Hace un mes aproximadamente conocíamos el nuevo API de Google para insertar gráficos en nuestros sitios web de forma sencilla. Con la euforia de la novedad creo que pocos reparamos en lo completamente “inaccesible” que era.

Chris Heilman miembro del grupo de Accesibilidad de Yahoo!, dio a conocer una técnica con la que generar gráficos de tarta a partir de una tabla y de esta forma permitir que los usuarios de navegadores convencionales vean la imagen y el resto accedan a una tabla de datos. Para ello simplemente tendremos que añadir un javascript al final del cuerpo de la página con lo que, de un tiro, mejoramos la accesibilidad de nuestros datos y conseguimos gráficos rápidos sin todo el lío del API.

Gráficos de tarta accesibles con Google Charts

Sin duda es un gran ejemplo de como todo puede ser más accesible con sólo proponérnoslo y sin implicar páginas especiales o molestias para los usuarios convencionales.

Supongo que jugando con los parámetros del API, las celdas de la tabla y el javascript podríamos basarnos en este ejemplo para crear otro tipo de gráficos. Si os animáis a hacer pruebas ¡no os olvidéis de contárnoslo!

Via Ajaxian

Herramientas Online, Javascript, Recursos, Usabilidad y Accesibilidad

5 Comentarios

GrayBit, tus páginas en escala de grises

Sin duda, un aspecto fundamental para que nuestros sitios sean verdaderamente accesibles es el color. A pesar de que, salvo en aquel anuncio del Golf, las personas con ceguera al color han pasado bastante desapercidas, se trata de un trastorno bastante común.
A pesar de que estoy segura de que todos sabemos lo que es el daltonismo y procuramos no hacer juegos con el rojo y el verde, existen muchos otros tipos de ceguera al color, tanto parciales como totales.

Por eso esta herramienta que descubro a través de Xyberneticos puede resultarnos tremendamente útil. GrayBit nos propone una forma diferente de ver nuestro sitio web, en escala de grises, para que podamos comprobar si los contrastes de nuestros colores son suficientes aún para personas que no son capaces de verlos.

Aquí os dejo una captura de este sitio, sale bastante bien parado aun que, como en todo, siempre se puede mejorar.

Webmaster Libre en escala de grises

GrayBit: http://graybit.com/

Herramientas Online, Usabilidad y Accesibilidad

Comenta

Color Oracle: Comprobando tus esquemas de color

La ceguera al color, en sus múltiples formas, es una enfermedad relativamente común (afecta a un 8% de los hombres)

Color Oracle te permitirá comprobar los esquemas de color de tus diseños, filtrando la pantalla para simular ceguera al color.

Color Oracle

Color Oracle es freeware y existen versiones para Windows, Linux y Mac OS

Color Oracle: http://colororacle.cartography.ch

Aplicaciones, Linux, Mac OS, Usabilidad y Accesibilidad, Windows

Comenta

RobotReplay: Conociendo tus sitios a través de tus usuarios

RobotReplay

Seguro que si habéis creado alguna aplicación o sitio web sabréis la cantidad de horas que se pueden echar planificando y pensando cómo hacerlo más sencillo, usable y cómodo para nuestros usuarios.

A pesar de todo, los usuarios no son previsibles y no hay nada como observar su comportamiento ante el sitio para descubrir sus flaquezas y fortalezas. Con RobotReplay podrás grabar las sesiones de tus usuarios y visualizar su interacción con tus webs. Podrás registrar los movimientos de su ratón, cómo rellenan los formularios…

De momento es un servicio gratuito, a ver si dura…

RobotReplay:
http://www.robotreplay.com/

Herramientas Online, Recursos, Usabilidad y Accesibilidad

4 Comentarios

Firefox como una completa herramienta para validar tus sitios web

Existen múltiples test y validadores para tu código que puedes emplear online, no obstante, si necesitas ir validando múltiples sitios puede ser laborioso ir acudiendo al sitio de cada herramienta.

Si hay una ventaja que hace destacar a Firefox sobre los demás navegadores (sin ánimo de polemizar, otros navegadores también tienen sus herramientas pero se salen de la perspectiva de este blog al no ser software libre) son sus extensiones.

Para todos los desarrolladores web, existen numerosas extensiones que nos ayudarán a validar y verificar nuestro código:

Validar nuestro HTML y CSS

HTML Validator:
HTML Validator

HTML Validator te indicará si hay errores o advertencias de validación en tu código mediante un icono en la barra de estado.

Podrás acceder a los detalles de los errores mirando al código fuente de la página.

Esta extensión está basada en Tidy y OpenSP (SGML Parser).

Offline Page Validation:

Con Offline Page Validation podrás enviar cualquier página que estés visitando al servicio de validación del W3C incluso si son páginas locales, que requieran registro, etc.

CSS Validator

Valida tus hojas de estilo mediante el servicio del W3C

Comprobar la Accesibilidad

HERA
HERA Toolbar

La “HERA-Extension” es una extensión para los navegadores de la familia Mozilla (Netscape, Firefox, Flock, Safari, etc.), que permite revisar online, en un solo clic, la página web que estemos visitando e incluso un marco de esa página (si los tiene), facilitando el uso y acceso a HERA.

TAW3 en un click

TAW3 en un click te permite comprobar la accesibilidad de las páginas que visites, utilizando el servicio TAW3 Online y las reglas WCAG 1.0

Colour Contrast Analyser

Con ella podrás comprobar que el contraste de los colores que has escogido para tu sitio web es adecuado para todos tus posibles visitantes

Fangs Screenreader Emulator

Te mostrará tus páginas de forma similar a como las interpreta un lector de pantalla

Firefox Accesibility Extension

Esta extensión está pensada para ser una ayuda en la navegación de personas discapacitadas pero los desarrolladors podemos utilizarla para comprobar si su desempeño es correcto

Herramientas “todo en uno”

Webdeveloper Toolbar
Webdeveloper Toolbar: Menu de validacion

Entre sus múltiples posibilidades (de las que hablaremos en unos días en profundidad) está la de validar tus sitios locales y los sitios que visites, tanto su html y css, como su accesibilidad…

Total Validator

La extensión Total Validator, de la que ya hablamos por aquí, te permite realizar múltiples validaciones en un solo click

Checky
Checky

Valida HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hypervínculos, Metadata y más

(x)HTML, CSS, Enlaces, Navegadores, Usabilidad y Accesibilidad

11 Comentarios

Guia breve de accesibilidad

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/

Usabilidad y Accesibilidad

1 Comentario

Y si no tienes más remedio que usar frames…

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:



    </p> <p> 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: </p> <p><a href="contenido.html">Página Principal</a><br /> <a href="contenido2.html">Seccion &#8230; </a><br /> &#8230;<br />

    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:


  • 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









    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
  • 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

    Este enlace se abrirá en el marco cuyo nombre (name) es contenido
    Este enlace se abrirá en el mismo marco
    Este enlace mostrará una página que eliminará la estructura de marcos
    Este enlace abrirá la página en el marco que contiene al marco actual, de no existir hará el mismo efecto que top
    Este enlace se abrirá en una nueva ventana del navegador

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

(x)HTML, Trucos y Consejos, Usabilidad y Accesibilidad

1 Comentario

Información:

Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna