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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

25 reglas para que tu CSS sea accesible

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.

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.

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Cross-browsing y la guerra de navegadores

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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Las 10 dudas más habituales sobre Accesibilidad 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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

From Business to Buttons, conferencia internacional sobre Usabilidad Web

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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

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

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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

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

A través del libro, conoceremos los conceptos básicos para mejorar la accesibilidad de nuestra página web e incluso de cualquier otro producto, de forma que sean más útiles tanto para personas con alguna deficiencia como para cuaqluier tipo de situación. Aprende a desarrollar de forma adecuada soluciones de accesibilidad efectivas.

La accesibilidad consiste en diseñar productos para que las personas con alguna discapacidad (física, psíquica, cognitiva o técnica) puedan utilizarlos y hacer que las interfaces de usuario sean perceptibles, operables y comprensibles para personas con distintos tipos de capacidades y en circunstancias, entornos y condiciones diferentes. De esta forma, la accesibilidad también beneficia a personas sin discapacidad y a las organizaciones que desarrollan productos accesibles.

Más info | http://www.uiaccess.com/accessucd/index.html

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Integración de la accesibilidad en el diseño gráfico

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

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Recursos para mejorar la Accesibilidad web de nuestra página o blog

La accesibilidad web implica el acceso total a una página web sin importar las condiciones en las que ésta sea visitada, ya sean técnicas (hardware, software, conexión o internet) o humanas (idioma, cultura o capacidades físicas). Por otro lado, también podríamos definirla como la capacidad de acceso a una página web y a su contenido por cualquier persona independientemente de si sufre alguna discapacidad (física, intelectual o técnica) que le impida acceder a toda la información ofrecida en ésta. Las normativas que establecen la accesibilidad web son desarrolladas por el WAI (Web Accessibility Initiative), que forma parte del W3C (Consorcio de la World Wide Web), organismo encargado de la creación de estándares web.

Para lograr ese objetivo, el W3C, además de crear estándares web que permitieran un desarrollo universal de una página web, de forma que un usuario pueda ver la página tal y como se ha diseñado originalmente independientemente de la plataforma a través de la cuál se esté vistiando, creó un grupo encargado de desarrollar una serie de directrices o normas que abordasen el acceso a esa información, es decir, el WAI.

A día de hoy se ha convertido en un elemento imprescindible a la hora de desarrollar una página web. Multitud de páginas comerciales o personales cumplen con esas directrices (ya sea total o parcialmente) y la mayoría de las webs estatales y ministeriales están obligadas a su cumplimiento.

La accesibilidad web se divide en tres niveles, denominados prioridades (numeradas del 1 al 3, siendo la prioridad 3 la más alta), que establecen una serie de directrices en cuanto a diseño y programación web. En función de las prioridades se establecen los niveles de conformidad, que se conocen como A, AA y AAA .

Para lograr superar las prioridades y convertir nuestra web en una página accesible, disponemos de un completo catálogo de etiquetas HTML, compatibles con la mayoría de navegadores, que facilitan la accesibilidad: TH, THEAD, TBODY, SUMMARY, TITLE, ACRONYM, etc. Sin embargo, no sólo basta con etiquetar (y hacerlo correctamente) nuestra página web, además, tendremos que ofrecer alternativas al contenido en caso de que éste no pueda visualizarse correctamente (etiquetas <noscript>, ALT en imagenes, textos descriptivos de videos o audios, etc.) o utilizar los elementos básicos de una página web correctamente (tablas, encabezados H1, H2, etc.). Como ejemplo de una directriz del WAI, está la del uso de tablas como elementos de diseño. Las tablas no deben utilizarse para este menester, si no que deben utilizarse para estructurar el contenido de forma que un usuario con cierta discapacidad pueda comprender el significado de la información que contiene la tabla.

Existen varios validadores online que analizan nuestra web y nos indican qué errores y recomendaciones estamos incumpliendo, de forma que analizándolos y corrigiéndolos, podremos superar las distintas prioridades y ofrecer al público una página accesible. Aunque parezca sencillo, diseñar una página accesile es complicado al principio, y tratar de alcanzar la prioridad 3 nos va a resultar tedioso.

El objetivo de esta entrada es el acercamiento al concepto de accesibilidad web y el acceso a recursos relacionados. Además, quería comentaros que hace tiempo hice un curso on-line gratuito para trabajadores en activo muy interesante acerca de la accesibilidad web. El curso estaba dividido en dos partes y en total fueron 150 horas en las que aprendí los conceptos del WAI, el catálogo completo de directrices, la forma de aplicarlas al desarrollo web y cómo validarlas.

Más info | Descarga guía introducción de accesibilidad web
Más info | WAI

Fuente | The n4gash Blog - Blog de diseño, programacion e internet

Guía de introducción a la Accesibilidad web en castellano