Enlaces que actúan como botones. Implementación accesible.

Artículos relacionados
[19-07-07] Formulario con varios botones. Implementación usable y accesible.
[28-02-08] Formularios usables: 60 Directrices de Usabilidad
[28-03-12] Detectar si una imagen se ha cargado. Descripción extensa de una imagen: accesible con lector de pantalla y visible sin imágenes activas

A menudo nos encontramos con enlaces que actúan como botones, es decir, no enlazan con una nueva página u operativa en el "href", sino que este se deshabilita con "#", "void(0)" o "javascript:;" y se le asigna por ejemplo un "onclick" que realice una acción.

Encontramos este tipo de enlaces sustituyendo a los botones de un formulario, o aparecen en la última columna de una tabla para realizar alguna acción asociada a esa fila ("Editar", "Detalle", etc.), o en otros muchos contextos.

¿Necesitas por exigencias contra las que ya no puedes luchar que sean enlaces?... bueno, no pasa nada, pero hagámoslo bien.

Quiero hacer esto

Vamos a imaginar el siguiente ejemplo: tenemos un formulario muy simple, con un único campo "Nombre" que queremos enviar mediante un enlace "Enviar".

Su aspecto sería el siguiente:

¿Qué nos podemos encontrar?

Veamos varias variantes. NINGUNA de ellas es accesible:
1.
<a href="javascript:enviar()">Enviar</a>

2.
<a href="#" onclick="enviar()">Enviar</a>

3.
<a href="javascript:void(0)" onclick="enviar()">Enviar</a>

4.
<a href="javascript:;" onclick="enviar()">Enviar</a>

5.
<a href="javascript:;" onclick="enviar()" onkeypress="enviar()">Enviar</a>

6.
<a href="javascript:;" id="enlaceEnviar">Enviar</a>

Todas ellas llaman a la función enviar() que somete el formulario:

function enviar(){document.miform.submit()}

Salvo la versión 6, que se han molestado en implementar javascript no-intrusivo.

document.getElementById("enlaceEnviar").onclick=function (){document.miform.submit()}

¿Por qué ninguna de estas opciones es accesible?

Porque todas dependen de que el navegador del usuario admita javascript o lo tenga activo. En caso contrario no funcionará.

¿Cuál es entonces la solución?

Pues si Mahoma no va a la montaña...

¿Por qué empeñarnos en hacer enlaces que actúen como botones? ¿Por qué no hacemos botones que parezcan enlaces?

<input type="submit" name="enviar" id="enviar" value="Enviar" class="enlace" />

Este botón tendrá el mismo aspecto que nuestro enlace tan sólo con que definamos su clase "enlace" (en la CSS) de esta manera:

input.enlace{border:0; background-color:#fff; text-decoration:underline; color:#000; cursor:pointer;}

¿Por qué algo tan sencillo y limpio no se encuentra nunca?

Nota: si necesitas tener varios botones que actúen de esta manera, quizás deberías leer Formulario con varios botones. Implementación accesible.

Artículos relacionados
[19-07-07] Formulario con varios botones. Implementación usable...
[28-02-08] Formularios usables: 60 Directrices de Usabilidad
[28-03-12] Detectar si una imagen se ha cargado. Descripción extensa de una imagen: accesible con lector de pantalla y visible sin imágenes activas