Si desayunas [jQuery][1], almuerzas [Mootools][2] y cenas Spry entonces seguro te gusta manipular eventos utilizando elementos del [DOM][3] ya generados. Deben saber que la etiqueta correcta para click (y doubleclick) es y solamente ; todas las demás tienen otros muchos usos pero la única que semánticamente está habilitada para desencadenar una acción mediante un click es… ¡!

Bien eso era lo primero que quería dejar claro; he visto demasiados

  • ,

    , incluso

    clickeables. Ahora, a lo que va este artículo es cómo la semántica se está dejando atrás por la comodidad de escribir eventos mediante JS. Me culpo también por caer en lo mismo, pero me interesa ahora mostrarles la mejor solución que he encontrado al respecto.

    Pongámonos en un caso de ejemplo. Supongamos que se agrega una función para ejecutar un [slideToggle][4] a un enlace; por lo que he visto generalmente esto se hace de 2 maneras:

    <a href="<strong>#</strong>" id="ejecuta_toggle">Ejecutar slideToggle</a>

    Cumples con tener un href funcional (no vacío) pero puede hacer que al hacer click la página haga scroll hasta el inicio dado que tienes un ancla vacío en el href y quizás tengas que dar un return false al final de la función del slideToggle, ó

    <a href="<strong>javascript:void(0)</strong>" id="ejecuta_toggle">Ejecutar slideToggle</a>

    Que hace que el browser no ejecute el enlace y no se salga de la misma página.

    Enfin, son 2 métodos similares y que cumplen con el objetivo primario de ejecutar algun comportamiento mediante Javascript a través de un hyperlink. Pero nuevamente mi pregunta: ¿Qué sucede con la semántica? ¿Cómo le digo al buscador, indexador, robot que ese no es un enlace realmente? ¿Que lo estoy disfrazando para cumplir con mis objetivos?

    Complicada pregunta y simple respuesta. Con esta inquitud espero que puedan ir más allá en sus desarrollos; recuerden que un simple click puede desencadenar muchos más eventos que los que tienen planificado para él, eventos que benefician a sus usuarios mediante indexaciones más precisas.

    La solución⌗

    Entreguen una ancla semántica al hyperlink, pero una ancla sobre sí mismo. Ejemplifico con lo mismo que he estado utilizando:

    <a href="<strong>#ejecuta_toggle</strong>" name="<strong>ejecuta_toggle</strong>" id="ejecuta_toggle">Ejecutar slideToggle</a>

    Con este método conservan la semántica indicando a través del atributo name qué hará ese mismo enlace y al mismo tiempo evitan el movimiento de scroll de la página.

    [1]: http://www.csslab.cl/tag/jquery/ “Enlace en CSSLab a “tags: jQuery”” [2]: http://www.csslab.cl/tag/mootools/ “Enlace en CSSLab a “tags: Mootools”” [3]: http://www.csslab.cl/2008/04/07/iniciandose-en-el-dom/ “Enlace en CSSLab a “Iniciándose en el DOM”” [4]: http://www.csslab.cl/2007/09/25/convirtiendo-listas-en-arboles/ “Enlace en CSSLab a “Convirtiendo Listas en Árboles””