Accesibilidad Web: Cómo Hacer Tu Website Altamente Accesible Y De Acuerdo A Los Estándares

¿Tienen la accesibilidad y los estándares web realmente importancia para un editor web online? ¿Existe realmente una ventaja en el gasto de tiempo y recursos en serio para hacer que tu sitio web cumpla las normas? Desafortunadamente, hay mucha desinformación sobre la accesibilidad web, y parece que nadie tiene una respuesta sólida al respecto. Por eso, he pedido al propio webmaster de MasterNewMedia, Drazen Dobrovodski, para arrojar algo de luz sobre el tema y ofrecer orientaciones específicas sobre la cuestión de la accesibilidad y los estándares compatibles.

Crédito de la foto: Andrea Danti

Primero: Nadie te buscará por haber creado un sitio web que no sea compatible con los estándares web. Tu sitio web no será penalizado entre los resultados de las búsquedas de Google, el PageRank no se verá afectado, y la autoridad de tu sitio web no será aplastada durante la noche.

Matt Cutts, del grupo Google Search Quality, dijo en una reciente entrevista en WebProNews que Google siempre va a dar atención primero y especialmente a la calidad, sobre lo buena que la página es para los usuarios, y lo mucho que esto ayuda a que los usuarios encuentren la información que necesitan.

"Hay tanta gente que escribe HTML inválido, con errores de sintaxis, pero todavía tiene buen contenido. Entonces tenemos que ser capaces de rankear el buen contenido, incluso si alguien no tiene algo que no es completamente libre de pelusa en términos de validación."

Si todavía estás convencido de que la codificación imperfecta puede estropear la calidad de tu sitio web, puedes ejecutar una prueba muy simple de utilización en tu propio navegador. Sólo tienes que ir a W3C Markup Validation Service (W3C es la principal autoridade en estándares web) y comprobar lo que dice la página principal de Google para estándares web.

Listo. 40 errores. Sólo en la página principal.

Haz lo mismo con Yahoo, Microsoft, The New York Times y The Wall Street Journal.

¿Satisfecho?

Puedes ejecutar esta simple prueba de validación en tus sitios web como quieras, no importa lo grandes que sean. La simple verdad es que es muy poco probable que encuentres un sitio que sea 100% compatible con los estándares web.

Esto no se traduce automáticamente en decir que Google, Yahoo o Facebook no se preocupan por la creación de un código profesional, páginas web de muy fácil acceso. Se preocupan, pero claramente, no es necesario tener un sitio web que sea 100% compatible con los estándares web para obtener dichos resultados.

El hecho práctico fundamental es que cuanto más un sitio sea accesible (muestra y se comporta como estaba previsto varios tipos de computadoras, sistemas operativos y tipos de navegadores) más gente lo verá y tendrá una experiencia positiva con el mismo. Un sitio web usable y muy accesible hace que las personas permanezcan más tiempo en tus páginas y también las hace querer volver.

Pero, ¿cuáles son los recursos clave que puedes utilizar para iniciar a "buscar" y "mejorar" la accesibilidad de tu propia página web?

El director tecnológico de MasterNewMedia Drazen Dobrovodski sugiere que primero hagas clic en:

• Directrices del W3C: Una serie de sugerencias y consejos para mejorar el código de tu sitio web que pueden ser muy útiles si los toma con un grano de sal.
• Comentarios de los usuarios: Los visitantes de tu sitio web pueden ayudar mucho a destacar los componentes de tu sitio web que pueden ser mejorados o necesitan ser cambiados por completo. Pregúnteselo a ellos!
• Herramientas de análisis web: Servicios como Google Analytics y otros pueden ofrecerte ideas muy útiles sobre los posibles problemas de accesibilidad, así como en la comprensión del tipo de configuración de equipo que tienen tus lectores.

...Y luego busca metódicamente en las siguientes áreas:

• Código HTML
• Las diferencias entre tablas, CSS y DIVs
• Juegos de caracteres
• Pruebas de compatibilidad entre navegadores
• Usabilidad móvil
• Prueba de velocidad web
• Web estándares y herramientas de validación
• Herramientas de análisis web

Si estás listo para comenzar a mejorar la accesibilidad de tu propia página web y estar en conformidad con los estándares web, separando las reglas académicas de lo que es pragmáticamente útil, he aquí hay una guía para ayudarte a lograrlo.

Proveer una accesibilidad eficaz y práctica es mucho más importante que tener un código correcto, académicamente correcto y 100% compatible con los estándares. Esto es lo que debes averiguar para mejorar tu propia página web:

 

¿Cómo Hacer Tu Sitio Web Accesible Y De Acuerdo A Los Estándares?

por Drazen Dobrovodski

Al crear un sitio web, uno de tus principales preocupaciones debe ser que sea accesible al mayor número de usuarios en tantas plataformas como posible. El problema es que puedes tener información contradictoria sobre la forma de lograrlo.

Por ejemplo, guerras enteras en foros y comentarios de blogs se traban acerca de cuánta atención se debe prestar sobre estar de acuerdo al W3C. Además, algunos te aconsejarán a hacerlo todo en el editor WYSIWYG, mientras que otros dirán que es mejor evitarlos.

Estoy seguro de eso, visto muchos artículos y blogs que defienden el uso de DIV y CSS en lugar de los tables HTML. Sin embargo, se puede ver como muchos de ellos dicen que liendo que los tables están bien.

¿Cuáles son los factores clave que debes considerar al hacer tu sitio web lo más accesible posible?

Vamos a hacerlo paso a paso.

 

La Accesibilidad Web Pasa Primero Por El Código

Lo primero que debes decidir al hacer un sitio web es: ¿Cómo hacer el código?

Personas familiarizadas con el HTML, hacen el propio código de su sitio web.

Esto es de hecho mejor porque estarás en control total del código y puedes ahorrar en las cantidades de código para que la página se cargue más rápido.

Cuando las páginas cargan más rápido, tus visitantes se sienten más libres para hacer clic y volver y ver más páginas. Esto también te permite hacer pequeños trucos tales como mover los enlaces de navegación atrás del contenido de la página para que los anuncios en tu sitio web tengan en cuenta el contenido del artículo y no de los enlaces de navegación similares en todas las páginas.

Si no estás familiarizado con HTML, entonces puedes decidir entre contratar a alguien que lo es - o - utilizar uno de los editores del tipo WYSIWYG (lo que ves es lo que obtienes).

Estos editores visuales son muy populares porque permiten a casi cualquier persona hacer páginas HTML bien parecidas sin saber nada de este lenguaje.

Sin embargo, los editores WYSIWYG siempre dejan algo de código innecesario en las páginas y esto significa que cargará más lentamente dependiendo de la cantidad de código extra que esté en ellas. Con el tiempo, estos editores han mejorado considerablemente, pero no van a coincidir con los codificadores humanos en HTML en el corto plazo.

Así que, el dilema de si usar o no los editores WYSIWYG depende únicamente de tus recursos y la página web que tienes en mente.

Si estás familiarizado con HTML, la codificación manual es una opción obvia.

Si no, es probablemente mejor decidir qué es más barato para ti - un editor WYSIWYG o contratar a otra persona para que haga el código del sitio, teniendo en cuenta que si no esperar niveles profesionales de tráfico de inmediato - estas pequeñas diferencias en la cantidad de código extra no importan.

Una vez que tu sitio web despliegue y que estés dispuesto a invertir más en él, puedes tener a alguien haciendo tu HTML de modo profesional para tus páginas.

 

¿Qué Funciona Mejor? ¿CSS, Tables o DIVs?

Si estás familiarizado con HTML, habrás visto probablemente los diseñadores que casi tienen trastorno obsesivo-compulsivo acerca de usar solo los DIVs.

Evitan los tables, incluso si eso significa horas extra cuidando para que todo funcione en DIVs en diferentes navegadores. Argumentan que los tables son sólo para mostrar datos tabulares y ya está.

En lugar de decir nada a favor o en contra de DIVs o tables, me limitaré a los hechos verificables:

• Los usuarios no distinguen si una página está hecha con DIVs o tables.
• Los motores de búsqueda en el momento no se preocupan por el código - sino por el contenido (cita de Matt Cutts, incluída más adelante en este artículo)

Mientras estos dos hechos siguen como están, me gustaría recomendar un enfoque pragmático: usa los DIVs tanto como puedas, ya que crean menos desorden y tu código CSS puede ser almacenado en los archivos externos en caché por el navegador, haciendo que las páginas carguen más rápidamente.

Sin embargo, cuando los detalles de diseño específicos son mejores y más rápidos a través del uso de tables, úsalos.

Google sirve a todos sus anuncios en tables. El pragmatismo en el trabajo.

 

Cómo Hacer Tu Sitio Accesible De Todas Partes

Cuando haces el código de un sitio web para varios idiomas, tendrás que especificar conjuntos de caracteres diferentes.

Ya sea que tus páginas utilicen ruso o francés, los caracteres diacríticos son la única manera de mostrar todos los caracteres correctamente mediante el uso de una adecuada codificación de caracteres. Ninguna ciencia aquí. Cualquier página wiki te mostrará todo lo que necesitas para ponerlo en práctica para un determinado idioma.

 

Prueba Tu Sitio Web En Múltiples Navegadores

Al crear una página web, uno de los peores peligros para la presión arterial es hacerla funcionar en todos los navegadores.

Hay muchos y muchos posts en foros, blogs y bromas acerca de esto en toda web.

Necesitas que tu sitio web se muestre por igual en todos los navegadores simplemente porque ningún navegador tiene el dominio absoluto en la web. Sí, pueden decir que tal o cual navegador está actualmente en moda, pero esas diferencias son relativamente pequeñas.

En gran escala, esto no requiere mucho más tiempo para exhibir una página web al menos decentemente (si no píxel por píxel de forma idéntica) en todos los navegadores por lo que hay que probarlo al menos en los principales cuatro navegadores - Internet Explorer, Firefox, Chrome y Safari.

Los expertos en SEO te dirán que aunque Safari obtenga un 2% de uso, debes "cubrirlo", porque los usuarios de Safari son en su mayoría los usuarios de Mac y la mayoría son muy activos en términos de participar en los debates, con enlaces a lo que han leído (lo que significa tu página) y - no por la menor razón - tienden a tener mayores ingresos y gastar más por lo que la gente de marketing en todas partes los ama.

 

Accesibilidad Web Para Móviles

Con el advenimiento de dispositivos móviles de los iPhones a iPads, los desarrolladores web en todas partes están empezando a darse cuenta que una cantidad cada vez mayor de tráfico en el futuro vendrá de dispositivos como éstos.

Los dispositivos móviles, traen principalmente dos desafíos. Pantallas más pequeñas y más problemas de compatibilidad del navegador.

1. El Problema De La Pantalla Pequeña

El problema de la pantalla pequeña es evidente.

Alguien que navegue por la web utilizando un IPAD o incluso algunos portátiles con 13" de pantalla (como un MacBook, por ejemplo) no tendrá la misma experiencia que una persona navegando en una computadora de escritorio con una pantalla monstruo de 24".

Al crear tu sitio web, comprueba que la resolución sea de 1024x768 píxeles, ya que es la más utilizada en la actualidad.

Una vez que tu página web esté en funcionamiento, Google Analytics puede decirte qué resoluciones de pantalla utilizan los visitantes en porcentajes.

En tu cuenta de Google Analytics cuenta ve a Visitantes -> segmentación de usuario -> resoluciones de pantalla. Esto te dirá qué otros ajustes de pantalla que necesitas para comprobar tu sitio web.

Si tu sitio web se dirige a pequeños dispositivos móviles como el iPhone y similares, tendrás una versión separada de las páginas para los visitantes móviles.

Los diseños de la segunda y tercera columnas no pueden visualizarse correctamente en estos dispositivos portátiles y en muchos sitios web ya en marcha con versiones optimizadas para las pequeñas pantallas de los dispositivos móviles.

 

2. El Problema De Los Navegadores En Móviles

Los problemas de compatibilidad en navegadores móviles son un poco menos obvios.

Tanto el iPhone como el IPAD tienen sus navegadores propietarios. El 13 de abril de 2010, el navegador Opera Mini para teléfonos móviles ganó el OK de Apple, así que por el momento sólo dos de los navegadores están disponibles para el iPhone y el IPAD. Esto significa que los usuarios están atrapados con los navegadores y sus limitaciones.

El flash no funciona en los navegadores.

Ellos interpretan el código HTML de forma diferente de su estándar de IE o Firefox, etc, por lo que la página puede tener un aspecto completamente diferente allí.

Otros fabricantes ya tienen sus versiones web de dispositivos móviles y algunos planean lanzar sus propias versiones de los rivales de IPAD. Todos estos, sin duda, tienen sus propias peculiaridades.

Todo esto simplemente significa que es prudente utilizar servicios como Google Analytics (u otro) para realizar un seguimiento de cuántos de tus visitantes son procedentes de los dispositivos móviles y los dispositivos que están utilizando.

Una vez hecho eso, podrás optimizar tus páginas para ellos lo que nos lleva al siguiente punto.

 

Herramientas Recomendadas Para Testear La Accesibilidad De Tu Website

No es gran problema instalar varios navegadores web en tu computadora y luego cambiar las resoluciones de pantalla para comprobar cómo tu sitio web se ve en ellos, pero también puedes utilizar estos servicios para ahorrar dolores de cabeza:

• http://browsersize.googlelabs.com/ - servicio de Google para ayudarte a evaluar el diseño de tu sitio con respecto a los tamaños de las pantallas
• https://browserlab.adobe.com/ - El mismo tipo de servicio, pero esta vez de Adobe
• http://www.anybrowser.com/ScreenSizeTest.html - Un tercer servicio para comprobar tu sitio en diferentes tamaños
• http://browsershots.org/ - Por último, un servicio que definitivamente merece una mención. Es de pago, pero ofrece una vista previa gratuita. Sólo una mirada en todos los diferentes navegadores, tamaños de pantalla, profundidad de color y otras opciones será suficiente para que cualquiera pueda ver que esta es la mejor manera de comprobar tu sitio en todas las variantes posibles.

Obviamente, si estás haciendo sólo un blog hobby (aunque tengas más ambiciones con él), toda la gama de opciones que aquí se ofrecen no será probablemente algo que necesitarás de inmediato.

Por otro lado, si estás haciendo un sitio web de compras y cuentas con la gran diversidad de los compradores, entonces es definitivamente algo a considerar.

 

Las Mejores Herramientas Seleccionadas Para La Accesibilidad Móvil

Si estás construyendo tu sitio web para dispositivos móviles (IPAD o menor), tener diferentes dispositivos sólo para que puedas probar tu sitio web en ellos no es ni razonable ni necesario.

La solución es utilizar emuladores. Éstos te permiten ver tu sitio web tal como sería en un determinado dispositivo móvil.

A modo de referencia, aquí están algunas de las direcciones URL que te serán útiles:

• http://ipadpeek.com/ - emulador IPAD - ver tu sitio como los usuarios IPAD lo ven.
• http://iphonetester.com/ - emulador de iPhone - muestra tu sitio como los usuarios del iPhone lo verán.
• http://mtld.mobi/emulator.php - emuladores Nokia y Sony de teléfonos móviles.
• A medida que aparecen nuevos dispositivos - usa tan sólo el emulador de Google para iPhone o los emuladores de teléfonos móviles.

Con el número de dispositivos móviles en ascención, se puede esperar razonablemente que más y más emuladores estén disponibles también.

 

Cómo Testear La Velocidad De Tu Website

La velocidad de tu sitio web es importante en varios niveles.

• La investigación (y el sentido común) nos dicen que cuando un sitio web se carga rápidamente los usuarios se sienten más libres para cliquear por él y visitar más páginas de tu sitio.
• Un sitio rápido da una mejor experiencia a los usuarios que serán más propensos a volver.
• Matt Cutts de Google reveló que la velocidad del sitio se convertirá en un factor para su ranking.

A la vista de todo lo que se pone de manifiesto, la velocidad de un sitio web es algo que necesita ser probado y optimizado si es necesario.

El primer paso para mejorar la velocidad de tu sitio web es, sin duda, la elección de un buen alojamiento web.

Puedes leer más sobre este y otros métodos para hacer que tu sitio web sea más rápido con más detalles.

Una vez hecho el incremento de velocidad, las mejores herramientas gratuitas te dirán todo lo que necesitas saber acerca de la velocidade de tu sitio en Yahoo! YSlow.

No sólo te dirán exactamente qué tan rápido se carga la página, pero incluso cada rotura de archivo para que puedas ver exactamente qué elementos toman qué cantidad de tiempo.

Por otra parte, aún te mostrarán los tiempos de carga de los elementos de página de terceros, como los widgets y anuncios.

 

Los Estándares De La Accesibilidad De Un Website

Cuando se trata de la construcción de una página web es muy natural que desees hacer tu página web lo más accesible y compatible.

Sin embargo, con el tiempo un buen número de mitos y la desinformación se han saturado en torno a estas dos cuestiones, así que es hora de que algunos mitos que revienten, separar los hechos de la ficción y explicar cuáles son las cuestiones reales que deberás tener en cuenta al ajustar tu sitio web para la accesibilidad y estándares web.

 

¿Son Los Estándares Web Realmente Importantes?

Algunas personas toman el tema de los estándares del W3C y los problemas de accesibilidad relacionados con ellos casi religiosamente.

Estas personas tratan de convencerlo de que se trata de la mayor importancia. Para convencerte, incluso citan algunos escenarios de pesadilla de empresas con demandas por no hacer sus sitios web accesibles a los discapacitados visuales por no aceptar algunas normas del W3C.

Si lees un ejemplo de ello en la página web W3C, la lista de "Cuentos Acerca de Cuidados con la Inaccesibilidad ", sobre tres casos.

Target Corporation - liquidación por daños y perjuicios de $6 millones de dólares, Juegos Olímpicos de Sydney - obligados a pagar $20.000 y Amex quedando con mala reputación en la prensa en el 2008 (y eso es todo - y mucho más de que no te enterarías si no fuese por este artículo).

Si eso es lo "peor de lo peor" a que podían llegar, es difícil quedar impresionado.

Si lees los detalles, verás rápidamente que las empresas no se meten en problemas por falta de accesibilidad o el cumplimiento del W3C.

El expediente dice claramente que la empresa "no se comprometió a cualquier acción destinada a poner remedio a esta situación []" y luego empezaron los problemas.

Para ser muy claro: Los usuarios se quejaban de problemas específicos, pero la gran empresa actuó como un matón y se negó a escuchar. De ahí la demanda / mala prensa.

En el mundo real, hya más posibilidades de ganar una lotería que obtener una demanda por falta de cumplimiento del W3C en tu sitio web.

Tu objetivo debería ser la accesibilidad de tu web a tus usuarios.

Las normas deberán ser utilizadas como una guía, pero no te preocupes acerca de pasar el 100% de algunas pruebas de validación.

Estás haciendo tu sitio web para tus visitantes. No es para algunos estándares.

Una vez más, las empresas de los "cuidados con la inaccesibilidad" de arriba no tuvieron problemas a causa de algunas normas abstractas, sino porque se negaron a escuchar a sus visitantes que en contacto con ellos, les informaron los problemas. Esto nos lleva al siguiente punto.

 

Cómo Impulsar Los Analytics Para Que Mejoren Tu Sitio Web

Siempre debes tener un buen contacto con tus visitantes. Prestar atención a la retroalimentación es vital.

Tus visitantes son las personas que utilizan tu página web y así la ven desde una perspectiva diferente que ti.

También debes utilizar servicios web como Google Analytics, ya que estos servicios te pueden decir lo que tus visitantes no dicen en silencio. Cosas como los navegadores y tamaños de pantalla que utilizan los visitantes y en cuáles porcentajes. Cosas como ¿de dónde provienen tus usuarios - tanto geográficamento como también por cuál sitio web o motor de búsqueda han venido.

Estos datos te dirán de qué tamaño debes tener los detalles y las imágenes en tu sitio web, cuáles navegadores debes probar en tu sitio y cuáles son las palabras clave y motores de búsqueda que tus visitantes utilizan cuando te encuentran.

Todos estos son criterios de accesibilidad reales para tus visitantes y por lo tanto son más importantes para el éxito de tu sitio web que cualquier estándar del W3C.

 

¿Por Qué Deberías Seguir Los Estándares Web?

En pocas palabras, el W3C es como la gramática HTML es para el lenguaje humano.

Sin embargo, encontrarás que los expertos discuten sobre el cumplimiento del W3C mucho más que acerca de la gramática del inglés. ¿Por qué es eso?

Veamos un ejemplo destacado: W3C dice que todas las etiquetas HTML que se abren también debe estar cerradas cuando ya no necesario. Sin embargo, Google no cierra sus etiquetas. ¿Por qué? Porque hace que el código más corto cargue más rápido y que ningún visitante humano nunca se dé cuenta.

Los navegadores fácilmente compensan algunas etiquetas sin cerrar y todavía te mostrarán el contenido de la página lo mismo que con la etiqueta de cierre.

El ejemplo más destacado es la página principal de Google. Puedes consultar el código fuente del mismo y ver que ese cuerpo y los comandos HTML no están cerradas. Los ejemplos siguen y siguen. W3C los considera no válidos, pero los usuarios no notarán ninguna diferencia en la visualización de contenido de la página.

Pros

Los defensores del W3C sostienen que las ventajas de hacer un sitio web que cumple con los estándares del W3C significa que tu sitio no será accesible solo a los visitantes humanos en distintos navegadores y plataformas, sino también a las máquinas tales como arañas de los motores de búsqueda y conversión de documentos software.

 

Contras

Es notoriamente difícil hacer que tu página web esté 100% compatible con W3C. Lleva algo de tiempo de desarrollo importante para modificar el código y lograr este resultado.

Por otra parte, acabo de señalar que Google no cree que esto es esencial. Si vas al validador oficial del W3C e introduces google.com o yahoo.com, verás que no son compatibles con el W3C.

Cuando entré en Google mostró 40 "errores" y Yahoo 150. Esto muestra por qué los estándares del W3C son una patata caliente.

Los dos sitios web claramente funcionan bien independientemente de tantos "errores" en ellos y claramente no creo que el pasar tiempo extra desarrollándolos 100% para el W3C sea garantizado.

Pero no crean en mis palabras.

En una reciente entrevista de vídeo Matt Cutts, que trabaja para Google Search Quality Group, señala claramente que Google se preocupa de los contenidos, no a las normas.

En concreto, a las 5:45 en el vídeo Matt Cutts ha dicho:

"Siempre ponemos a la atención en primer lugar sobre la calidad. ¿Cuán buena es la página para los usuarios? ¿Cuánto les ayuda a encontrar la información que necesitan?"

Cuando se le preguntó directamente sobre el W3C y el ranking en Google, a eso de 25:23, dice:

"Hay tanta gente que escribe HTML inválido con errores de sintaxis, pero todavía tiene un buen contenido. Entonces tenemos que ser capaces de rankear el buen contenido, incluso si alguien no tiene algo que es completamente libre de pelusa en términos de validación."

La conclusión es que el W3C proporciona buenas pautas para hacer que tu sitio web sea accesible a los usuarios y todas las plataformas, pero no debes preocuparte de hacer tu sitio 100% conforme al W3C.

Google no te da puntos extra para que tus usuarios no noten ninguna diferencia si muestras tu sitio correctamente.

Se puede ver la lista completa para hacer tu sitio de acuerdo al W3C aquí:

http://www.w3.org/TR/WCAG10/full-checklist.html

 

Conclusión

La accesibilidad de un sitio web es una preocupación importante para todos los propietarios de websites. Sin embargo, esta accesibilidad no se mide por el cumplimiento del W3C.

Como siempre, la vida real ha cristalizado algunas cuestiones que consideraba más importante que otras y yo traté de listar las cuestiones más importantes más arriba.

Como regla primera, podría decir que con algo de sentido común combinado con prestar atención a los comentarios de tus visitantes, las herramientas y los recursos antes mencionados deben mantener su sitio web dentro del rango de acceso de su público.

Créditos de las fotos:
La Accesibilidad Web Ocurre Primero En El Código - Jesper Noer
Accesibilidad Web Para Móviles - Feng Yu
El Problema De La Pantalla Pequeña - Rimarkable.com
Cómo Testear La Velocidad De Tu Website - Chris Lamphear
Cómo Impulsar Los Analytics Para Que Mejoren Tu Sitio Web - Andrey Burmakin
Pros - Artsem Martysiuk
Constras - Artsem Martysiuk
Otras Imágenes - Clipart

Drazen Dobrovodski -
Referencia: MasterNewMediaBR [ Seguir leyendo ]