Categoría: drupal

CSS clip property

Textos accesibles para lectores de pantalla con CSS

CSS clip property

¿Quién dice que no se puede tener sitios accesibles con sitios dinámicos? Bueno, en realidad, cuando se abusa del JavaScript y no hay una versión en texto plano que cualquier navegador puede entender (sí, hasta Internet Explorer), sí sufren usuarios con lectores de pantalla u otras problemáticas motrices o visuales. Muchas aplicaciones hoy en día no están pensadas en absoluto para todas las personas sino para pequeños nichos. Tal vez su modelo de negocio lo justifique, no voy a entrar en ese debate en este momento.

No obstante, si tu idea es compartir inspiración y conocimientos lo más ampliamente posible, evitando que tus artefactos discriminen a alguien con alguna desventaja (que no son la minoría), entonces sí que hay que esforzarse porque nuestras aplicaciones web incluyan pequeños artefactos especiales para que el contenido esté disponible para toda persona. En particular una de las áreas en que hay mayor investigación en la industria, es en los lectores de pantalla, aplicaciones que pueden sintetizar en voz, los textos de tus escritos y hasta pequeñas descripciones de tus imágenes (que tienes que escribir también).

Pero como son máquinas los lectores de pantalla no son muy buenos con los énfasis y otras inflexiones de la voz, y termina siendo un poco confuso a veces, especialmente en sitios cuyos diseñadores no tienen en absoluto en la cabeza, el que pueda haber gente que no tenga una visión de más de 10 dioptrías, por poner un caso. Así, se ha ido progresando hacia ciertos estándares en los que por ejemplo, la página web devuelve al navegador textos que hacen más explícita la información que se encuentra en una página, pero que terminaría siendo insufriblemente redundante para una persona que pudiese leerlos todos por sí misma. Estos textos, llamados de asistencia, se piensan para que el lector de pantalla facilite al escucha la comprensión de los diferentes menús, o secciones de un sitio o de un texto, pero deben ocultarse al usuario “promedio” porque tendrían el efecto contrario: saturar la cantidad de texto, haciendo más difícil la interacción con el sitio.

En los últimos años se han probado una serie de técnicas basadas en CSS , (es decir, 100% basado en estándares abiertos y no una tecnología exclusiva de algún monopolio), para lograr estos efectos, tanto textos legibles y que faciliten la comprensión de un texto leído por un sintetizador, como ocultos para usuarios que no requieren dichas facilidades.

Como nos cuentan en este blog, de temas para Drupal, algunas de las técnicas que datan de más tiempo funcionan en la mayoría de casos, pero algunas aplicaciones por ejemplo para Mac y iOS, no los entienden, o bien funcionan para los sintetizadores de voz, pero resultan en problemas para lectores de lenguas que se escriben de derecha a izquierda (como el árabe). Así, en fechas más recientes ha ido cobrando popularidad el uso de una propiedad que curiosamente es de las que mejor soporte tienen entre los navegadores (¡hasta Internet Explorer 4.0! eso es decir ¡mucho tiempo!), pero al ser pensada primordialmente para un uso visual, no se había contemplado originalmente como una alternativa para mejorar la accesibilidad de los sitios.

La propiedad en cuestión es la llamada clip, y permite lograr efectos visuales muy interesantes, como descubrir una imagen o hacer un “paneo”, entre otras. Pero funciona precisamente porque podemos ocultar el elemento que no queremos que aparezca en el sitio, sin que los sintetizadores lo pasen por alto (como cuando usamos la propiedad display:none) ni causando problemas de “saltos” en la lectura que confunden a las personas que leen visualmente.

Para una mayor referencia recomiendo visitar el enlace que les dejo más arriba de “Adaptive Themes”, aunque encuentro un tanto complicado su uso de hacks para diferentes navegadores (o sea, todos los problemas que siempre ocasionan los dinosaurios de Internet Explorer), cuando simplemente podemos atenernos al estándar.

Digamos que tenemos el siguiente encabezado:


<h2><span class="assistive-text">Sección:</span> Creatividad no es seguir siempre la misma senda</h2>

Para ocultarlo al lector que verá claramente destacado el título de apartado, pero al mismo tiempo mantenerlo disponible para que lo lea el sintetizador a la persona que así lo requiera, usaremos la siguiente regla de CSS:


.assistive-text { position: absolute;
clip: rect(1px 1px 1px 1px); //esto es para IE<8
clip: rect(1px, 1px, 1px, 1px); //para IE8+ y todos los demás navegadores
}

La razón de tener dos declaraciones de clip es la siguiente: la primera, sin comas entre los valores, la entienden los más viejos navegadores que Internet Explorer, la segunda los que respetan el estándar desde hace tiempo. Cuando un navegador no entiende una propiedad de CSS, simplemente la ignora y en este caso funciona perfecto para no hacer nuestro código ilegible lleno de hacks. Finalmente, notar que la propiedad clip no funciona salvo con el uso de position: absolute o position: fixed, tema para otra ocasión.

¿Tanto ruido por un texto que casi nadie va a ver?

Claro que no, también podemos sacar otra lección, del uso de una propiedad estándar para un uso visual, en otro ámbito muy distinto: usuarias con alguna discapacidad visual.

La lección que nos deja esto es que entender los estándares no se trata de seguir una y otra vez los mismos caminos, no se trata de imitar tan solo lo bueno o malo, o pensar que las herramientas solo pueden usarse de las formas preconcebidas, sino que por el contrario, aplicar el conocimiento de forma creativa, no se trata exclusivamente de inventar algo que nadie haya visto, sino también combinar de formas nuevas lo ya sabido, adelantando nuevas soluciones a problemas reales.

Crédito de imagen de portada: http://demosthenes.info/blog/384/CSS-clip (también recomendada su visita para otras interesantes técnicas con esta propiedad estándar de diseño).

Anuncios

Drupaleando con Open Atrium

Puff! Casi un año sin nuevas notas! OMG! Ha sido un año bastante movido, desde que realicé los últimos ajustes a un sistema de macros de SQL Server y Visual Basic (sí, como se oye :D). Y luego trabajando con Saltos Cuánticos y la Fundación Rosa Luxemburg en México en el proyecto Saberes Libres (que antes se llamó Código Abierto, que a mí la verdad me gustaba más, aunque me parece que se perdió mucho de la reflexión en la falacia de la propiedad intelectual). También tuve la oportunidad de impartir dos talleres de blogs y galerías web a estudiantes de la UACM (que gracias a la necedad de Esther Orozco, todavía no me pagan el segundo) y gente de la comunidad del barrio de la Merced.

En fin, fue un año de mucho aprendizaje, y le doy muchas gracias a los compas de Saltos Cuánticos por haberme dado la oportunidad de trabajar con ellos y a Enrique Rosas de la Fundación Rosa Luxemburgo en México por aguantarme todo el tiempo que duró el proyecto en este año ¡y por invitarme a MayFirst! Puff! Muchísimas experiencias que ir desgranando y sobre todo seguir desenvolviendo nuevos conocimientos y compartiéndolos con la gente que no deja de visitar mi blog aunque sea de vez en cuando.

En fin, volvamos al tema de este post, siempre recordando que escribo porque no tengo tiempo que perder. Drupaleando, ja. Quien me viera. Lo cierto es que no es tan fácil Drupal pero que también siempre me ha parecido mucho más robusta la arquitectura y la dedicación que sus equipos de desarrolladores ponen en la seguridad.

Aunque, quién va a negar que WordPress es más user-friendly y es una plataforma que da trabajo a muchísima gente… diseñadores, programadores, webmasters, escritores de contenidos… pero no hace de todo, aunque a fuerza de pluginazos haya gente que se aferre a convertirlo en las más singulares estructuras  jerárquicas de contenidos y presentaciones visuales.

Y así, WordPress es una plataforma fantástica, pero con Drupal se construyen también sitios muy bien organizados y extensibles, permiten pensar en soluciones de contenidos muy variadas a los desarrolladores. Sin embargo, en realidad todavía no conozco mucho de Drupal, apenas que los productos que he visto desarrollados como los de Phase2, me han atraído a esta plataforma.

Así, buscando una solución para documentación, basada en PHP y con un framework robusto. Encontramos en Saltos Cuánticos a Open Atrium, un sistema que promete una Intranet “tan sólo con sacar de la caja”. Ya lo habíamos utilizado pero pasamos por un ciclo de regreso a mecanismos más conocidos como el correo electrónico y en el proyecto Saberes Libres, en que estuvimos trabajando, documentamos todo a través de Trac, un gestor muy potente de tareas y reportes para el trabajo en equipo, con wiki integrado y funcionalidad que se presta para estructurar muy fácilmente el soporte técnico en formato de foros.

Pero me quedé con la espinita de seguir conociendo Drupal y a todos nos gustó más el diseño pulido y las posibilidades del trabajo en grupos y proyectos con las herramientas de Open Atrium. Así, volvimos a las andadas a través del Mandala Amatitlán.

Pero no fue del todo fácil, la interfaz viene mejorada en esta versión, la 1.5, aparentemente última estable antes del lanzamiento del próximo Open Atrium 2 que ya estará basado en Drupal 7; pero se han dejado de lanzar actualizaciones de seguridad y el core de Drupal y sus módulos ya exigían en su gran mayoría actualizaciones de seguridad.

So… hubo que lanzarse a estudiar como se actualizan los módulos en Drupal 6 porque en Drupal 7 es más sencillo desde el propio backend (una característica soportada por WordPress desde hace mucho tiempo). El como mas concreto y sencillo que encontré fue este de O’Reilly: http://answers.oreilly.com/topic/501-how-to-upgrade-drupal/

Así,  después de la respectiva copia de seguridad de la base de datos antes de intentar algo drástico (como -casi- resultó), y cambiar el core de Drupal, de inmediato empezaron los problemas de incompatibilidades diversas en el código. Diantres, yo esperaba poder actualizar únicamente el Drupal por las vulnerabilidades de seguridad que se han presentado desde el útlimo lanzamiento de Open Atrium: http://drupal.org/SA-CORE-2012-004

Para evitar estar dándole vueltas a la manzana una y otra vez me decidí ya a actualizar de una vez todos los módulos que tuviesen actualización disponible. Actualicé todo lo disponible, traducciones incluso y quería ya poner de nuevo en línea el sitio para empezar a invitar a los amigos de Saltos Cuánticos a bautizar el niño, pero ¡oh no! Más errores:

Primero la falta de una clase en el módulo de Mensajería: Fatal error: Class ‘Messaging_Store’ not found. Solución: Habilitar módulo Autoload. Pero ¡oh no! no lo trae la distribución de Open Atrium, allá vamos, descargamos el módulo y lo activamos… WTF? no puedo activarlo? Diantres otra vez… bueno, a buscar la solución en los foros… ok, tengo que deshabilitar los módulos que solicitan Autoload… pfff, ahora no puedo deshabilitar este otro módulo sin desactivar otros 8 más… no por Dios! Tiene que haber otra solución… ¡Sí! Activar módulo Devel… pfff lástima que no guardé la URL donde lo leí, no importa los foros de Drupal no están llenos de consejos confusos como en los foros para hacer root tu android (próximo post). ¡Y se hizo la luz! Devel se encargó de activar Autoload, actualizar las traducciones pendientes del módulo token y un par más (previamente había intentado activar Autoload “a fuerza” en la base de Drupal y lo había inscrito entre los módulos a activar en los módulos requeridos además de core…). Bien, primer problema resuelto.

Pero no, ahora alguna parte del código me daba una advertencia bien visible:“Division by zero in […]/includes/pager.inc on line …” Esto fue fácil, sólo incluir un saneo de una variable en la función indicada en el parche, y eso fue todo.

Finalmente, al tratar de poner en línea el sitio nuevamente, otro Fatal Error! Pero sólo visible si no estaba como user/1, hmmm… tal vez alguien más conocedor en Drupal llegue al colmo al leer esto, pero seguí simplemente el consejo de este asunto: Call to undefined method views_plugin_display_block::get_cache_plugin() cambiar get_cache_plugin por get_cache(‘plugin’) aunque no hay todavía garantías de que funciones todo correctamente pues Open Atrium parece haber sido pensado para Views 2 antes que para Views 3.

En fin, fin de los errores de sintaxis, realicé unos chequeos más y ya seguiremos viendo en siguientes días como funciona la plataforma, comenzando a utilizarla para documentar los siguientes Saltos Cuánticos en el desarrollo de nuestra red de Multisitios con WordPress.

Ya estaremos explorando los siguientes errores semánticos y esperando con ansias el lanzamiento de Open Atrium 2. Mientras tanto, ya estaremos reportando por acá las experiencias en el desarrollo de una red de sitios con WordPress y porque para Saltos Cuánticos este es un proyecto de gran relevancia ya que nos permitirá apoyar a diversas organizaciones sociales y construir una comunidad de aprendizaje de software libre para la comunicación alternativa, como venimos impulsando con el proyecto Saberes Libres.