Web Accesible

En ocasiones a los desarrolladores Web que comienzan con temas de accesibilidad en su páginas Web les surge una duda muy común que gira en torno al texto que hay que poner en el title de un enlace y el alt de una imagen cuando lo que estamos enlazando es precisamente una imagen.

La respuesta es sencilla, el alt es para dar un contenido alternativo a la imagen y el title es para indicar lo que hace el enlace, siplemente tenemos que seguir estos pasos.

Vamos a ver un ejemplo muy sencillo y claro que se dan en todas las webs: el logo de la empresa en la cabecera. Normalmente en la parte superior de nuestras Webs está el logo de la empresa, organismo, título del blog, etc y lo tenemos con una imagen, normalmente esta imagen está enlazada a la página principal del site, pues bien para hacerlo correctamente el código a implemetar sería el siguiente:

Cuando pasamos por encima de la imagen se mostrará el texto de la etiqueta title pero el alt en la imagen es necesario igualmente y no debemos mezclar una cosa con la otra.

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?