En el trabajo llevamos unas semanas muy intensitas con el tema de accesibilidad y validaciones CSS y HTML.
Una cosa en particular que nos ha chocado mucho es que los iconos – bueno, su código – que ofrecen las redes sociales para incrustar en las webs no cumplen los estándares de HTML del W3C. En concreto no la cumplen para páginas hechas con XHTML 1.0. Al menos el icono de +1 de Google+ sí valida para HTML 5, o eso he leído.
La solución que he encontrado en casi todos los sitios en los que se hablaba de este tema era “cambiar la página a HTML 5 y así valida”.
¿Pero y si no puedes cambiar el tipo de documento por el motivo que sea? Para el widget de Google+, que es el que más he investigado por aquello de que Google es más “developer friendly”, no hay ningún comentario al respecto. Todo acaba en “valida para HTML 5”.
El “así que te jodes” al final de la frase no lo pone, pero yo lo leo igualmente.
Pues toca ponerse creativos: Tras mucho buscar encontré por fin información útil sobre este tema. Además de las lindezas pertinentes a las redes sociales que se pasan los estándares de código del W3C por el arco del triunfo – jodiendoles la vida a los desarrolladores que quieren (o tienen) que sus webs las cumplan – daba una idea muy interesante:
Los validadores de HTML no validan el código generado con javascript.
Es como cuando me dieron una pajita rota con el refresco en el Burguer King y al cabo de cinco minutos de derramar la bebida me di cuenta de que podía darle la vuelta a la pajita y usar el otro extremo. Es tan simple, tan básico, que después de felicitarte por haber llegado a la conclusión te das cuenta de que más bien eres un poco tonto por haber tardado tanto dar con ella.
Tal y como lo he puesto en la app, los iconos de twiter y facebook son simples imágenes con enlace. Me pareció más sencillo que generar el widget con javascript con sus símbolos especiales, sus imágenes dentro de enlaces, y sus invocaciones a satanás como se te escape una coma mal puesta. Lo que sí se genera con javascript es el botón “+1” de Google+, y el Timeline de Twitter, del que estoy bastante orgullosa porque este sí que lo hice yo solita desde cero.
El código javascript (que habría que meter en el head) y el código a poner donde se vayan a colocar los botones/widgets/timeline, como tengo que empezar a rentar la cuenta de github que me hice hace meses, está disponible aquí:
https://github.com/freaktiful/CosasDelCurro/blob/master/widgetsvalidacionhtml
El resultado es una página que pasa la validación HTML del W3C, que visualmente es igual que si incrustaras los widgets/botones con el código generado de las tres redes sociales de las que he hablado, y lo único que se podrá apreciar es que lo que se haya generado con javascript tardará un poquito más que el resto de la página en cargar. Nada más.
Espero que este truquito pueda resultar de utilidad. Y si no lo ha sido, aquí tenéis un gato para compensar por las molestias ^^
