25 reglas para que tu CSS sea accesible

25 reglas para que tu CSS sea accesible

A día de hoy desarrollar una web accesible nos permite llegar a mayor cantidad de lectores, ofreciéndoles toda la información de nuestro website bajo cualquier circunstancia. Utilizar elementos que sólo funcionan en determinados navegadores, tipografías pequeñas o poco legibles, elementos con parpadeos  (blinks) que pueden afectar a ciertas personas, colores con poco contraste, etc. lo único que nos va a aportar es crear una mala experiencia en alguno de nuestros usuarios y que nuestra web no sea accesible.

En el blog Usable y Accesible han publicado recientemente un interesante artículo con un resumen de la W3C dedicado a la accesibilidad de las hojas de estilo CSS. El resumen nos indica 25 reglas para que las CSS sean accesibles: utilizar medidas líquidas en vez de fijas (em en vez de px), crear el menor número de hojas de estilo, aunque al menos una por cada tipo de dispositivo de salida (screen, print, braille, etc), utilizar correctamente las listas ordenadas (ol) y las desordenadas (ul), etc.

Más info | http://olgacarreras.blogspot.com/25-reglas-para-hacer-css-accesibles

Sin Comentarios

Cross-browsing y la guerra de navegadores

Cross-browsing y la guerra de navegadores

Hoy he entrado al Tuenti y para mi sorpresa, o consternación (sí, estoy enganchado a la tuentimania ;P), el servicio está de mantenimiento. Como había un enlace al blog de la red social, he entrado a cotillear un poco. Entre los diversos artículos, comentarios y entradas de branding, he visto una pequeña creatividad ofertando un puesto de trabajo en Tuenti. Como curiosidad, he hecho clíck y me he puesto a mirar unas cuantas fotos que tienen de sus oficinas y puedo decir que poco o nada tienen que envidiar de las de Google: salas de reuniones con sofas y sillones, puestos de trabajo espaciosos y bien iluminados, salas comunes dotadas de fanásticos sofás para tomar un KitKat, etc. Al grano. Entre los diversos puestos que desean cubrir, el único interesante es uno de Usabilidad y Diseño Web. Entre los requerimientos que exigen, hay uno que utiliza un tecnicismo, que si bien nunca había visto u oído, es fácilmente deducible: cross-browsing. Por asi acaso, he entrado en la Wikipedia a ver qué significaba y como me imagino que no seré el único en desconocer esta palabreja de la jerga de los desarrolladores web, os comeno qué significa.

La etimología de la palabra compuesta nos lleva a pensar en los navegadores web (browsing) y una posible relación entre ellos (cross), que desde mi punto de vista o interpretativo, lleva a pensar a un recorrido que abarque a todos ellos.

Según la Wiki, cross-browsing es la habilidad de un desarrollador web de escribir un código que sea compatible con todos los navegadores y se muestre de forma correcta en cualquiera de ellos, sin importar la versión, ni el navegador. Nació en la década de los 90, durante las guerras de los navegadores (Browser Wars), donde se batieron duramente Internet Explorer y Netscape. Durante este tiempo ambos navegadores añadieron nuevas funcionalidades sin coordinarse entre ellos. Como resultado, muchas funcionalidades que eran soportadas por ambos tenían distintas formas de desarrollarse e interpretarse, provocando que los desarrolladores web tuviesen que aprenderse a escribir el código de dos formas distintas para obtener el mismo resultado.

Cross-browsing y la guerra de navegadores

Otro concepto similar es el multi-browsing. Su significado es similar, con la diferencia de que este tecnicismo sólamente implica que cualquier código debería funcionar en varios navegadores, mientras que cross-browsing implica a todos los navegadores y a todas sus versiones.

Por código se entiende, sobre todo, scripts de lado del cliente (client-side script), como JavaScript, aunque también habría cabida a multitud de clases CSS que Microsoft se ha venido sacando de la manga desde tiempos inmemoriables y que sólamente, por inspiración divina, usa Internet Explorer.

Si bien a día de hoy la mayoría de navegadores cumplen los estándares del W3C, Internet Explorer continúa teniendo sus pequeños detalles que lo hacen diferente del resto de navegadores del mercado y continúa fastidiándonos a los webmasters. Así que ya sabes, si eres capaz de desarrollar páginas web, hojas de estilo, scripts o cualquier código, que sea compatible con todos los navegadores (sin importar nombre o versión), puedes incluir en tu CV una bonita palabra que le dará un toque más cool y más técnico.

1 Comentario

Las 10 dudas más habituales sobre Accesibilidad Web

Las 10 dudas más habituales sobre Accesibilidad WebOlga Carreras, autora de un blog con el mismo nombre dedicado a la Accesibilidad web, publicó hace unos días un artículo muy interesante sobre el documento “Techniques for WCAG 2.0. Techniques and Failures for Web Content Accessibility Guidelines 2.0” , redactado por la W3C para informar sobre las buenas prácticas y técnicas correctas para cumplir las normativas de Accesibilidad Web. En el artículo, Olga señala cuáles son las dudas más habituales, lo que dice la W3C al respecto en dicho documento y qué es lo que debe de hacer el desarrollador o diseñador para cumplir la normativa.

Las 10 dudas más habituales sobre Accesibilidad Web:

  1. ¿Mi sitio Web es inaccesible si utiliza ventanas emergentes?
  2. ¿Mi sitio Web es inaccesible si utiliza frames?
  3. ¿Mi sitio Web es inaccesible si utiliza tablas para maquetar?
  4. ¿Mi sitio Web es inaccesible si utiliza Flash?
  5. ¿Mi sitio Web es inaccesible si utiliza javascript?
  6. ¿Cómo debo asociar los labels y los campos del formulario: de forma explícita o implícita?
  7. ¿Cómo debo presentar el texto: justificado o alineado a la izquierda?
  8. ¿Cómo he de marcar correctamente las abreviaciones y acrónimos?
  9. ¿Es correcto utilizar botones en la página que permitan aumentar el tamaño del texto?
  10. ¿Cómo se especifica correctamente el color de fondo y de primer plano?

Más info | http://olgacarreras.blogspot.com

Sin Comentarios

From Business to Buttons, conferencia internacional sobre Usabilidad Web

From Business to Buttons, conferencia internacional sobre Usabilidad Web

Andrea Hidalgo nos ha enviado información sobre una conferencia internacional sobre Usabilidad Web. The Cocktail patrocina un año más el congreso From Business to Buttons, que de nuevo se celebra en Malmö, Suecia. Como en ediciones anteriores, el objetivo es analizar cómo el diseño puede ayudar a al negocio, qué metodologías emplear y conocer casos prácticos.

La conferencia cuenta con ponentes como Garr Reynolds, autor de Presentation Zen y considerado uno de los mejores conferenciantes del mundo, Matt Jones, fundador de Dopplr, Scott Berkun, autor del libro The Myths of Innovation y Gene Liebel, socio de HUGE.

Microsoft, patrocinadora de la conferencia From Business to Buttons llevará su mesa interactiva Surface. La conferencia también está patrocinada por la española The Cocktail.

Más info | The Cocktail

Sin Comentarios

Promociona tu página web o blog si cumple los estándares W3C

Promociona tu página web o blog si cumple los estándares W3C

W3C Sites es una recopilación de páginas web que han sido creadas por diseñadores que cumplen los estándares establecidos por la W3C. El objetivo del portal es promocionar todas estas páginas en la red. Para ello, los webmasters pueden dar de alta su página web o blog rellenando un pequeño formulario en el que debemos indicar el nombre y descripción de la web, además del DocType, versión de CSS utilizada y si se cumple algún nivel del WAI. Si introducimos algún dato de validación falso darán automáticamente de baja nuestra página web de la base de datos, así que asegúrate antes de registrarla que superas todos los validadores.

Además de proporcionar información sobre la web, tenemos la posibilidad de señalar si somos webmaster freelance, pertenecemos a alguna empresa de diseño web o simplemente somos aficionados. Si seleccionamos la opción de freelance o empresa de diseño web, tendremos que indicar si estamos en disposición de recibir trabajos y de qué parte (de todo el mundo o de nuestro país), por lo que también puede resultar una buena herramienta para conseguir alguna oferta laboral a la vez que promocionamos nuestras páginas web.

Diseñar nuestra página web cumpliendo los estándares de la W3C nos supone una serie de beneficios como mejorar la experiencia del usuario reduciendo el peso de la página, ampliar nuestro área de audiencia al incrementar la accesibilidad de la web, conseguir que nuestro website sea compatible para todos los navegadores  y uno de los más importantes es que nos permite mantener de una forma sencilla, eficaz y rápida nuestra página web (cambiar todo el diseño de la web sería tan sencillo como cambiar una hoja CSS).

Más info | http://www.w3csites.com

Sin Comentarios

Accesibilidad web: diseño web híbrido con medidas líquidas y fijas

Accesibilidad web: diseño web híbrido con medidas líquidas y fijasInteresante artículo publicado en Seraccesible que trata sobre el diseño de una página web con medidas fijas (px ó ex) o líquidas (em, %) que determinará su capacidad para ser accesible o no. Según el WAI, una página web debe ofrecer la posibilidad de adaptarse a cualquier interfaz de usuario sin que por ello haya una pérdida de información o legibilidad.

El artículo nos comenta los pros y contras de la utilización de diseños fijos, líquidos, flexibles e híbridos, decantándose el autor por éste último. El WAI no establece qué diseño es el más apropiado para desarrollar una web accesible, si no que lo deja a la elección del diseñador, siempre y cuando el contenido sea transformable sin que por ello se pierda información o dificulte su comprensión.

Finalmente, el autor nos ofrece varias sugerencias para diseñar páginas web accesibles:

  • Evitar la utilización del pixel (px) para definir el tamaño del texto. Si se utiliza para determinar el ancho de un elemento (contenedor) se deben hacer pruebas en las diferentes condiciones de navegación.
  • Si nuestro diseño en determinadas condiciones no ofrece una buena legibilidad, proporcionar estilos de presentación alternativos.
  • Cada dispositivo de navegación (pantalla, PDA, etc.) o simplemente de presentación (impresora), requiere determinadas carácteristicas en el diseño. Si nuestro diseño no está adaptado a un determinado dispositivo, crear la CSS específica.

Más info | Diseño web accesible

2 Comentarios
  • Página 1 de 2
  • 1
  • 2
  • >