Imágenes funcionales y de texto
Imágenes funcionales
Son imágenes funcionales las que se incluyen en elementos vínculo <a>, botones <button> y otros elementos interactivos. El texto alternativo debe transmitir la acción que se va a llevar a cabo más que una descripción de la imagen.
Las imágenes como logotipos pueden formar parte de un vínculo. En el siguiente ejemplo tenemos el logo de este sitio Wextensible que suelo usar en las páginas de ejemplos, con una imagen dentro de un vínculo que lleva a la página de inicio. Al no agregarse texto debemos aportar un texto alternativo como Wextensible inicio
. Esta descripción sirve para reconocer el destino de ese vínculo. Si en cambio el vínculo aportase ese texto pondríamos alt="".
Ejemplo: Logotipos dentro de un vínculo
<a href="/"><img src="/res/img/wextensible.gif"
width="41" height="40" alt="Wextensible inicio" /></a>
Los iconos dentro de vínculos o botones también siguen este tratamiento. En este ejemplo tenemos un botón y tres vínculos que también aparecen en la barra superior de todas las páginas de este sitio. Aunque ahí se insertan con sprites CSS, en este ejemplo las usamos en elementos <img> y debemos proveer el texto alternativo de la acción que se va a ejecutar.
Ejemplo: Iconos en vínculos y botones
<div id="botones-ejemplos">
<button type="button" id="boton-imprimir-pagina-ejemplo"><img
src="/res/img/impresora.png"
width="24" height="24" alt="Imprimir página" /></button>
<a href="https://plus.google.com/100422683747134142466?prsrc=3"><img
src="/res/img/googleplus.png"
width="24" height="24" alt="Seguir en Google+" /></a>
<a href="http://www.twitter.com/wextensible"><img
src="/res/img/twitter.png"
width="24" height="24" alt="Seguir en Twitter" /></a>
<a href="http://www.facebook.com/wextensible"><img
src="/res/img/facebook.png"
width="24" height="24" alt="Seguir en Facebook" /></a>
</div>
Imágenes con texto
Las imágenes con texto cuya intención es que pueda leerse deben contener un texto alternativo con el mismo contenido. Hemos de procurar no usar estas soluciones, pues el texto en imágenes no se beneficia del escalado como sí lo hacen las propias fuentes de texto.
En el siguiente ejemplo suponemos que tenemos una sección en una página que expone ejemplos con imágenes
. Para el título de la sección queremos usar una fuente con estilo particular como de escritura manual, pero con sentido artístico y desenfadado. Es probable que esa fuente no sea soportada por los navegadores y tengamos que incluir la frase como texto en imágenes. Proveemos un alt="Ejemplos con imágenes".
Ejemplo: Texto con estilo para efecto decorativo
<img src="ejemplos/ejemplos.png" width="274" height="175"
alt="Ejemplos con imágenes" />
Los logotipos con texto también pueden contener texto que es necesario proveer en el atributo alt.
Ejemplo: Logotipos con texto
<img src="ejemplos/w3c-wai.png" width="286" height="47"
alt="W3C Web Accesibility initative" />
Las imágenes que presentan expresiones matemáticas también deben proveerse de un texto alternativo. En este ejemplo usaremos una imagen de una ecuación y la transcripción literal a texto, aunque usando caracteres especiales de Unicode, quedando como x = (-b ± sqrt(b²-4ac)/2a
. No siempre será fácil esta transcripción.
Ejemplo: Expresiones matemáticas
La solución a un ecuación de segundo grado es 
<p>La solución a un ecuación de segundo grado es
<img src="ejemplos/ecuacion.png" width="293" height="83"
alt="x = (-b ± sqrt(b²-4ac)/2a" />
</p>
Sobre este ejemplo la especificación recomienda usar MathML, pero no es aún soportado por todos los navegadores. En la página explicando el elemento <html> expuse un ejemplo de uso con MathML. En aquel momento, al igual que ahora, comprobé que sólo pude verlo funcionar en Firefox.