Sin embargo, la tarea de crear un texto alternativo para un contenido no textual puede hacerse compleja. En este art\u00edculo, nos centraremos en las im\u00e1genes y en c\u00f3mo encontrar una alternativa textual adecuada para ellas.<\/p>\n
Tipos de im\u00e1genes<\/h2>\n
Una misma imagen en diferentes contextos puede requerir descripciones diferentes para que las personas que necesiten la alternativa textual reciban la misma informaci\u00f3n que el resto. Para determinar el texto alternativo que se le debe dar a una imagen, existen varios tipos:<\/p>\n
- \n
- Im\u00e1genes informativas<\/li>\n
- Im\u00e1genes funcionales<\/li>\n
- Im\u00e1genes decorativas<\/li>\n
- Im\u00e1genes de texto<\/li>\n
- Im\u00e1genes complejas<\/li>\n<\/ul>\n
C\u00f3mo redactar textos alternativos para diferentes tipos de im\u00e1genes<\/h2>\n
Im\u00e1genes informativas<\/h3>\n
El caso m\u00e1s sencillo son las im\u00e1genes informativas. Son aquellas im\u00e1genes cuyo contenido da informaci\u00f3n, normalmente sobre los elementos que las rodean<\/strong>. En un art\u00edculo web, una imagen relacionada con el texto ser\u00eda una imagen informativa. Pero tambi\u00e9n lo ser\u00eda un icono de casa al lado de una direcci\u00f3n postal, ya que podr\u00eda indicar que esa direcci\u00f3n es el domicilio de alguien.<\/p>\n
Para im\u00e1genes informativas, se debe describir el contenido de la imagen en el texto alternativo para transmitir la informaci\u00f3n correcta a las tecnolog\u00edas que lo vayan a mostrar a la persona usuaria.<\/p>\n
![\"texto](\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/02\/imagen-1-300x200.jpg\")
<\/p>\nFuente: Share America\u00a0<\/a><\/p>\n
En esta imagen, vemos a Joe Biden y Emmanuel Macron \u2013actuales presidentes de Estados Unidos y Francia, respectivamente- sonriendo a c\u00e1mara de la mano de sus esposas, Jill Biden y Brigitte Macron. O, al menos, esa podr\u00eda ser una descripci\u00f3n v\u00e1lida. Pero no siempre le daremos la misma descripci\u00f3n a una imagen<\/strong>. Si colocamos esta imagen en una secci\u00f3n de an\u00e1lisis pol\u00edtico, daremos peso a los dos presidentes, a la c\u00e1mara donde se encuentran, al gesto con el que se saludan, etc. Por otra parte, si fuera parte de un art\u00edculo de moda, las primeras damas y sus vestidos pasar\u00edan a un primer plano y los mandatarios ser\u00edan un elemento anecd\u00f3tico en la fotograf\u00eda.<\/p>\n
As\u00ed, se debe considerar el contexto<\/strong> al describir una imagen informativa.<\/p>\n
Texto alternativo para im\u00e1genes funcionales<\/h3>\n
A veces, las im\u00e1genes sustituyen texto que indica que se puede realizar una acci\u00f3n<\/strong>. Estas son las llamadas im\u00e1genes funcionales. Aunque pueden parecerse a las im\u00e1genes informativas, la diferencia est\u00e1 en su prop\u00f3sito. Lo importante de las im\u00e1genes informativas es su contenido, mientras que la parte de la relevante de las funcionales es la acci\u00f3n que llevan a cabo si se interact\u00faa con ellas.<\/p>\n
Las im\u00e1genes funcionales se suelen describir indicando la acci\u00f3n que se puede llevar a cabo<\/strong>, y no describiendo el contenido de la imagen.<\/p>\n
![\"texto](\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/02\/imagen-2.png\")
<\/p>\nFuente: captura de una versi\u00f3n editada de https:\/\/www.plenainclusion.org\/contacto\/<\/a><\/p>\n
En este ejemplo, la secci\u00f3n de \u201cRedes sociales\u201d de la web est\u00e1 compuesta por varios iconos, cada uno con un enlace a la p\u00e1gina de la organizaci\u00f3n en esa red social. Lo que se tiene que transmitir, entonces, es el prop\u00f3sito que tiene cada enlace. Es decir, no es necesario describir la primera imagen como \u201cLogo de Facebook pintado de verde\u201d, sino que se debe describir simplemente como: \u201cFacebook\u201d.<\/p>\n
Im\u00e1genes decorativas<\/h3>\n
Hay algunas im\u00e1genes que no dan informaci\u00f3n y solo tienen funci\u00f3n est\u00e9tica<\/strong>, o dan informaci\u00f3n redundante<\/strong> con alg\u00fan elemento de texto. En estos casos, estamos hablando de im\u00e1genes decorativas.<\/p>\n
Por lo general, las im\u00e1genes decorativas se deben esconder<\/strong> de los agentes de persona usuaria, de forma que estos no las anuncien. En web, esto se consigue asignando el valor \u201c\u201d al atributo alt.<\/p>\n
![\"texto](\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/02\/imagen-3.png\")
<\/p>\nFuente: captura de https:\/\/www.plenainclusion.org\/contacto\/<\/a><\/p>\n
En la secci\u00f3n anterior, los iconos ten\u00edan que recibir el prop\u00f3sito del enlace como alternativa textual. Sin embargo, todo cambia si le a\u00f1adimos un texto con ese mismo contenido. Ahora la informaci\u00f3n de la alternativa textual ser\u00eda redundante, y tendr\u00eda m\u00e1s sentido tratar el icono como una imagen decorativa.<\/p>\n
Si nos asalta la duda al decidir si una imagen es decorativa o no, podemos consultar el siguiente \u00e1rbol de decisiones:<\/p>\n
![\"La](\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/02\/imagen-4.png\")
<\/p>\nFuente: elaboraci\u00f3n propia<\/p>\n
Que sigue el siguiente esquema:<\/p>\n
- \n
- \u00bfEsta imagen es parte de un enlace o bot\u00f3n?\n
- \n
- S\u00ed: \u00bfEs el \u00fanico elemento del enlace o es un bot\u00f3n de tipo imagen?\n
- \n
- S\u00ed: Esta imagen necesita un texto alternativo que indique su funci\u00f3n.<\/li>\n
- No: \u00bfAporta informaci\u00f3n adicional al enlace?\n
- \n
- S\u00ed: Debe complementar la informaci\u00f3n del texto del enlace.<\/li>\n
- No: Esta imagen es decorativa<\/li>\n<\/ul>\n<\/li>\n
- No: \u00bfEs invisible, no aporta informaci\u00f3n adicional?\n
- \n
- S\u00ed: Esta imagen es decorativa.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Texto alternativo para im\u00e1genes de texto<\/h3>\n
Las im\u00e1genes que incluyen texto, si bien suelen tener un prop\u00f3sito parecido al de las informativas o las funcionales, se deben tratar de forma diferente<\/strong>. El criterio 1.4.5 de las WCAG<\/a> indica que, siempre y cuando la tecnolog\u00eda lo permita, se deben recrear estas im\u00e1genes usando texto<\/strong>.<\/p>\n
Esto es para facilitar la experiencia a las personas que necesiten hacer cambios al formato de un texto como, por ejemplo, aumentar el tama\u00f1o de la fuente del texto o a\u00f1adir m\u00e1s espacio entre los caracteres.<\/p>\n
Por tanto, en lugar de usar el atributo alt para estas im\u00e1genes se deben recrear con texto siempre que sea posible. O, en caso de que no lo fuera, ofrecer la misma informaci\u00f3n en formato de texto.<\/p>\n
![\"Las](\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/02\/imagen-5.png\")
<\/p>\nFuente: W3C<\/a><\/p>\n
Lo vemos claro en el ejemplo que da la WAI (Web Accessibility Initiative) cuando habla de este tipo de im\u00e1genes: un elemento gr\u00e1fico con un eslogan que se puede replicar en texto usando las tecnologias de desarrollo disponibles.<\/p>\n
Existen algunas excepciones<\/strong>: si se est\u00e1 intentando cumplir el nivel AA de las WCAG 2.2, 2.1 o 2.0, no es necesario usar texto si:<\/p>\n
- \n
- La imagen es personalizable <\/strong>(se puede cambiar la fuente, el tama\u00f1o, el color, el fondo…)<\/li>\n
- La presentaci\u00f3n del texto es esencial<\/strong>, y no se puede alterar de ninguna manera. Un ejemplo com\u00fan de esta excepci\u00f3n ser\u00eda el logo de una p\u00e1gina<\/strong>.<\/li>\n<\/ul>\n
Ahora bien, se debe tener en cuenta que el nivel AAA (m\u00e1s exigente) solo admite la segunda excepci\u00f3n.<\/p>\n
Im\u00e1genes complejas<\/h2>\n
Por \u00faltimo, encontramos las im\u00e1genes complejas. Estas son im\u00e1genes con mucha informaci\u00f3n<\/strong> o que, por contexto, se deben describir con mucho detalle<\/strong>. Como resultado, la descripci\u00f3n que ir\u00eda en el atributo alt es demasiado larga. Se ha de tener en cuenta que los agentes de persona usuaria normalmente leen el texto por partes y permiten avanzar, retroceder o repetir un fragmento. No sucede igual con el alt de las im\u00e1genes, sino que los leen sin hacer ninguna pausa. Esto hace dif\u00edcil comprender las im\u00e1genes para quien use la alternativa textual.<\/p>\n
Como soluci\u00f3n para este problema, se suele a\u00f1adir una descripci\u00f3n paralela a la imagen<\/strong> usando elementos de texto. Se puede a\u00f1adir en la misma p\u00e1gina, escondi\u00e9ndola visualmente si es necesario, o proporcionar un enlace a otra p\u00e1gina que la contenga. En el texto alternativo de la imagen, se debe indicar que su descripci\u00f3n se encuentra a continuaci\u00f3n<\/strong>.<\/p>\n
![\"Gr\u00e1fica](\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/02\/imagen-6.png\")
<\/p>\n - La presentaci\u00f3n del texto es esencial<\/strong>, y no se puede alterar de ninguna manera. Un ejemplo com\u00fan de esta excepci\u00f3n ser\u00eda el logo de una p\u00e1gina<\/strong>.<\/li>\n<\/ul>\n
- La imagen es personalizable <\/strong>(se puede cambiar la fuente, el tama\u00f1o, el color, el fondo…)<\/li>\n
- S\u00ed: Esta imagen es decorativa.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
- S\u00ed: \u00bfEs el \u00fanico elemento del enlace o es un bot\u00f3n de tipo imagen?\n
- \u00bfEsta imagen es parte de un enlace o bot\u00f3n?\n
![\"\"](\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/02\/2014-first-quarter-visitors.png\")
<\/p>\n