Como hacer un botón enviar con imagen accesible

Muchas veces por cuestiones de diseño necesitamos darle otro aspecto al botón enviar de los formularios y son muchas las veces que optamos por códigos nada accesibles. Este es un problema que se podría arreglar de una manera muy sencilla.

Primeramente tendremos que tener la imagen de botón. Vamos a imaginar que tenemos una imagen que mide 75px x 40px por ejemplo.

Ahora vamos a generar el código accesible para crear el botón:

<input type="image" src="buscar.gif" alt="Buscar" />

Como vemos creamos un elemento input, le indicamos que es de tipo imagen (type="image"), a continuación le indicamos la ruta de la imagen con el atributo src (src="buscar.gif"). Finalmente y MUY IMPORTANTE añadimos una etiqueta alt con la descripción de la imagen (alt="Buscar").

Para posicionar el botón en el formulario deberíamos de utilizar CSS pero ese no es la temática de este blog.

Sencillo ¿verdad?

servido por webaccesible 3 comentarios compártelo