Consejos de accesibilidad para una web

Con estas modas de la Web 2.0, el SEO y la madre que los parió la gente se olvida de la accesibilidad de una página web. «¡Bah eso a quién le importa!, piensa la mayoría, «mi pantalla ocupa la pared entera, mi ordenador es poco menos que el Mare Nostrum de potente y tengo 50 Mbps de ONO porque vivo en Madrid» dirán.

Lo habitual sería que diera unos consejos sobre posicionamiento. Lo típico de que si se es mujer ya implica directamente más visitas, referencias desde otros dominios, el uso de palabras muy buscadas como sexo, porno, cachondas,.. enlazarlo con todas las redes sociales habidas y por haber, etcétera. Sin olvidar por supuesto los consejos que Google da en su blog para webmasters, en plan «esto va en contra de los consejos del W3C y no significa que el resto de buscadores tampoco haga uso de ello peeeeero nosotros…», palabras que automáticamente son órdenes para montones de páginas. Pero yo soy más de que lo importante es el contenido, saber dejar huella con él, que tanto SEO y tratar de vivir de un blog con el que se pasa algún rato libre.

Sin embargo en la era actual también es habitual, y más que antes, que la gente se meta a Internet desde cualquier chisme. Sea un ordenador recién venido desde la fábrica en China, uno viejo, uno miniportátil, una PDA, un móvil, una televisión, una videoconsola y la variedad de gagdets que existen. Que las limitaciones de unos usuarios sea el procesado que requiera la información que ofrecemos, para otros el peso en bytes de la misma o incluso ambas como está de moda con los móviles que disponen de tarifa económica de acceso a Internet. Así pues si has llegado leyendo hasta aquí te comento unos consejos entre los cientos que habrá, por si alguno lo desconocías.

  • Intentar cumplir con los estándares. El lenguaje de marcado HTML tiene una serie de reglas de uso en las especificaciones dependiendo de la versión. Lo hay desde el más permisivo hasta el que menos. Y ya que están esas reglas de uso en plan puesta en común de para qué es cada una de sus etiquetas pues es aconsejable hacerles caso. Además en la web del W3C hay un validador al que tras indicarle un enlace a nuestro documento, o incluso pegándole directamente el código, nos informa de las advertencias y errores que ha analizado y detallando el por qué de cada uno. Ah, por cierto, y no dejes montones de líneas en blanco a lo largo del código —el intro en HTML es con <br>, <br />,..— porque eso al fin y al cabo son unos pocos caracteres que ocupan espacio → tasa de transferencia para quien lo sirve o lo visualiza.
  • Usando las hojas de estilo en cascada con un poco de cabeza, las CSS. Por la red hay infinidad de sitios en los que subimos nuestras hojas de estilo y nos las devuelven optimizadas eliminando definiciones redundantes, espacios en blanco —por eso de reducir el peso del archivo— y que incluso detectan posibles fallos que algunos navegadores puedan dar con algunas líneas o selectores ineficientes. El consorcio W3C también dispone de un validador para CSS. Y ojo a las hojas de estilo porque junto con HTML suelen ser las mayores responsables de que según en qué navegadores y/o plataformas y/o dispositivos una web se vea de distinta manera. Siempre es importante que sin hoja de estilos la información sea entendible, y que ya se use esta para dar formato, maquetado —no con la mala costumbre de usar tablas—, colores,..
  • Activando la compresión en tu servidor web. Esto ya es algo más delicado porque depende del que uses, aunque los más extendidos suelen ser Apache e IIS, así como de si tienes muchas visitas y el cliente o el servidor no dispone de una cierta cantidad de recursos para procesar la compresión/descompresión de los archivos enviados/recibidos o la caché. Sin olvidar que tengas permisos suficientes para aplicar esa configuración. En La Página de Jesús Cea Avión hay buena información sobre cómo implementar esto en PHP y sus contras. Aunque también se puede configurar desde el propio Apache como otro capazo de manuales indican.
  • Muy ligado a la compresión aunque el procedimiento se suela hacer en el ordenador del webmaster y no en el servidor es el optimizado de imágenes. Ya no es sólo tema de transferencia, es que en un ordenador no se desplaza igual una imagen pequeña que una enorme que ocupe un montón también en bytes.La compresión de las imágenes suele acarrear pérdidas de calidad, como pasa con la música, y el truco está en buscar un equilibrio, porque de nada sirve comprimir la información si luego pones todas las imágenes en PNG, o peor aún en BMP, cuando casi seguro que en GIF o JPEG pueden ocupar mucho menos viéndose igual de bien. Programas como el MS Paint no permiten afinar la compresión de las imágenes, y entiendo que otros como GIMP, ImageMagick, Phatch, IrfanView o el archiconocido Photoshop resulten complejos, pero por ello también para esto existen otra montonera de páginas por Internet a las que puedes subir una imagen y te la devuelven comprimida, dejando incluso algunas escoger si quieres redimensionarla. Y sobre esto un par de opiniones personales: está muy bien preocuparse del peso de la foto que has puesto hoy, pero más importante son aún las imágenes que van asociadas al diseño de tu página que se cargan —se transfieren salvo que haya caché— cada vez que alguien visita la página o va navegando a través de ella; y el formato GIF aunque parezca que siempre se ve peor sí que es muy útil para las imágenes que contengan menos de 256 colores, como el típico logotipo sencillo, que el JPEG está muy bien para las fotos, pero luego ves cada logotipo de pocos colores con los bordes y letras borrosas por usar el JPEG que da pena.
  • Un diseño ingenioso muchas veces ocupa menos de lo que nos creíamos. Porque ingenioso no sólo tiene que implicar que guste o tenga animaciones. En cantidad de ocasiones la gente usa algunas imágenes para ponerlas como fondo de cualquier parte de la página, o hacer el efecto de que un botón cambia de color al desplazar el cursor sobre él o simplemente para mostrar un texto sin ningún efecto especial. Sin embargo esas cosas, según lo que se espere lograr, se pueden conseguir utilizando hojas de estilo, alguna imagen de un solo color diminuta pero mostrada gracias a las propiedades de CSS a un tamaño grande, un fondo centrado o que no se desplace con el contenido principal,.. Es como nada más abrir el Photoshop o GIMP y ver que la barra de herramientas no tiene un botón que se llame «eliminar arrugas», pero que luego con algo de ingenio y el resto de herramientas y filtros se logra el objetivo.
  • El JavaScript no es malo con moderación, pero en exceso puede desagradar y mucho al visitante. Aquí vuelvo a incidir en que hay cosas que se pueden hacer con hojas de estilo y que la gente por desconocimiento mete JavaScript. Primero porque como le sucede a todo en esta vida no está exento de tener errores, que pueden ser adrede, inapreciables para el visitante o incluso que no permitan leer el texto. Segundo porque un uso excesivo de él en una página puede hacer que algo tan habitual como el desplazamiento vertical se realice a tirones, aunque ojo que esto también pasa en algunos navegadores con según qué propiedades de las hojas de estilo. Este terreno de los scripts ya depende también mucho del navegador desde el que se abra la página, unos toleran unos errores mejor que otros, otros ni avisan. De cara al desarrollador Firefox por ejemplo cuenta con la llamada Consola de Errores que informa de fallos en JavaScript y definiciones erróneas en CSS. Y navegadores como Google Chrome —o Chromium— se basan en técnicas que permiten una mayor fluidez de las páginas a diferencia de la que Firefox usa en su actual versión estable —Minefield ya no 😛 . Un ejemplo, si usas Google Reader, es visualizarlo y hacer desplazamiento vertical desde Firefox y desde Chrome/Chromium, y en mi caso por ejemplo noto que desde el primero me tironea un poco y desde el otro no.
  • El Flash en sí no es malo, pero según desde donde se abra. Una página que contenga un vídeo de YouTube suele cargar bien tanto en Windows como en Linux, pero una que aglutine gran cantidad de Flash y JavaScript —como MySpace 😡 — en Windows no lo he probado mucho, pero en Linux puede llegar a ser eterno el desplazarse por ella. Ahora por cierto es cuando vienen los críticos con Linux, pero es que la culpa de que Flash en Linux no vaya bien es de Adobe porque es de código cerrado, que lo entiendo, pero hasta no hace mucho ellos han estado haciendo lo mínimo por ir desarrollando paralelos para Linux y MAC como para Windows. Aunque si nos ponemos a analizar la accesibilidad que da Flash desde los dispositivos móviles, como el famoso iPhone, ya la cosa se pone bastante peor. Como digo no es que Flash sea malo, para los vídeos no hay muchas alternativas firmes de momento, pero por ejemplo poner un menú en Flash porque queda muy bonito con animaciones y tal pues… ya sabes a lo que te arriesgas, además de que pesa más que unas líneas de HTML y de CSS 😆 .
  • Anchos y tamaños fijos. Esto es referido concretamente al texto y al diseño. Una imagen ajustable es más difícil de lograr, habría que meterse en tejemanejes de lenguajes dinámicos, pero el tamaño de la letra y el de las capas sí que es fácilmente adaptable. En las plantillas de WordPress por ejemplo es muy común encontrarse con diseños en los que el texto está contenido en una columna en el centro de un ancho de 500px y un tamaño de fuente de 12px. Queda muy bonito, claro que sí, pero depende desde donde lo veas. Si ves la página desde una pantalla algo antigua a resolución de 800×600 te va a parecer enorme, y si al contrario es desde una de estas modernas grandes a 1920×1080 que sirven para el ordenador y ver la televisión te parecerá ridículo el texto dentro de esa columna tan estrecha como la de un periódico .«¡Eres un exagerado!» —diría Nikkita— sí, lo sé, estoy hablando de accesibilidad, no de moda 😛 . Tan de moderna que va la gente con tanta nueva tecnología y luego se olvidan de indicar ciertas medidas en unidades porcentuales o em. Que hay situaciones y situaciones, pero a una resolución de 1280×1024 me encuentro con frecuencia páginas en las que o le digo al navegador que agrande el texto o no podría leerlas con comodidad. No es lo mismo un recuadro que el propio texto.
  • Colores agradables. Es un tema muy trillado ya. Lo típico de no poner un fondo amarillo con letras en verde fosforito ni aquellos fondos animados tan de moda en los noventa, a pesar de que reconozco que llegué a hacer una web así por 1994 ó 1995 😳 .
  • Hot-linking. Entiendo que las imágenes están ahí, tan a la mano de hacer un clic derecho sobre ellas y copiar la dirección donde están vistas desde Google Images, pero hay que pensar un poco acerca de desde donde se cargan. Hay sitios hechos para albergar imágenes como ImageShack, Flickr, TinyPic, ImageVenue, Photobucket,.. Pero una cosa es incrustar imágenes alojadas en esos servidores y otra que estén albergadas en un sitio que no tiene ese fin de almacenar imágenes. Además de que, buenas conductas al margen, sobre los sitios ajenos no tenemos el mismo control que sobre el nuestro, y luego pueden aparecer sorpresas de que un montón de imágenes que teníamos embebidas hayan desaparecido y pierdan parte del sentido nuestros contenidos. Aunque ese riesgo también se corre usando un alojamiento gratuito de imágenes 🙁 .
  • Caché. Está así asá con la compresión. A diferencia de comprimir ella lo que hace es ahorrar procesado además de transferencia. Sin embargo no se lleva muy bien con los contenidos que cambian a cada momento, según esté configurado también. Depende de lo que se quiera complicar la vida el webmaster para que use un cacheo de todo o sólo de determinados tipos de archivos como de imágenes. Además de que se puede trastear desde el lado del servidor y/o del cliente, incluso de cara a la base de datos.

Y cuarenta consejos más que cuando los recuerde/aprenda prometo tener intención de añadirlos :mrgreen: . De todas formas siempre habrá quien disfrute tratando de elaborar la página web que más sobrecargue el procesador y más incómoda sea de visualizar, como sabe cualquiera que visite algo en MySpace. Para gustos… ¡Ya sabes!

3 pensamientos en “Consejos de accesibilidad para una web

    • ¡Que no panda el cúnico! Son consejos/manías mías que me he dado cuenta que nunca había contado, pero creo que ni yo las cumplo a raja tabla….laralalalala…

  1. Pingback: Tweets that mention Consejos de accesibilidad para una web || El Historias -- Topsy.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *