Imagen futurista de una persona con discapacidad visual utilizando un movil

01 Crea alternativas textuales accesibles

irene ferrer 06 enero 2025 Accesibilidad/Customer experience

Te paso la fór­mu­la infal­i­ble para hac­er alter­na­ti­vas tex­tuales acce­si­bles. Cuan­do dis­eñamos con­tenido dig­i­tal, no debe­mos pen­sar solo en cumplir están­dares téc­ni­cos se tra­ta de garan­ti­zar que todas las per­sonas, inde­pen­di­en­te­mente de sus capaci­dades, puedan dis­fru­tar de la mis­ma expe­ri­en­cia.

Para alguien con dis­capaci­dad visu­al, la descrip­ción ade­cua­da de una ima­gen no es solo tex­to, es una for­ma de par­tic­i­par en la expe­ri­en­cia, de imag­i­nar, enten­der y dis­fru­tar lo mis­mo que quienes ven.
Las alter­na­ti­vas tex­tuales son las pal­abras que per­miten que una ima­gen hable, a través de ellas, un lec­tor de pan­talla puede con­ver­tir ele­men­tos visuales en infor­ma­ción en voz, ofre­cien­do acce­so igual­i­tario al contenido.Pero, para que esto fun­cione, esas pal­abras deben ser claras, útiles y con­tex­tuales.

Fór­mu­la para gener­ar alter­na­ti­vas tex­tuales: [Ele­men­to prin­ci­pal] + [Con­tex­to] + [Acción/Propósito (si apli­ca)]

 

3 Reglas de oro para generar alternativas

Montañas nevadas bajo un cielo naranja al atardecer.
Ima­gen mon­tañas nevadas

1. Describe lo rel­e­vante, no lo obvio: Iden­ti­fi­ca qué hace úni­ca a la ima­gen y cuál es su propósi­to en el con­tenido. Evi­ta detal­lar lo que no apor­ta al con­tex­to.

Por ejem­p­lo, en lugar de “Ima­gen de una mujer con un vesti­do azul”, usa: “Reina Isabel II vesti­da de gala, sím­bo­lo de su esta­tus en la monar­quía”.

2. Usa un lengua­je sen­cil­lo pero evo­cador: Ayu­da a imag­i­nar la esce­na sin abru­mar al usuario. Por ejem­p­lo, para un paisaje: “Mon­tañas nevadas bajo un cielo naran­ja al atarde­cer.”

3. Adap­ta la descrip­ción al con­tex­to. No describas detalles super­flu­os si la ima­gen acom­paña un tex­to que ya expli­ca el propósi­to. En ese caso, uti­liza alt=””.
Si el con­tenido es dec­o­ra­ti­vo o no añade val­or, usa alt=”” para que el lec­tor de pan­talla lo ignore:
<img src=“linea-ornamental.png” alt=””>

Portada de The Crown: la reina Isabel II de perfil, con una corona brillante y un fondo oscuro que transmite solemnidad
Ima­gen serie The Crown

Si la ima­gen tiene múlti­ples capas (por ejem­p­lo, tex­to e ilus­tra­ciones), asegúrate de que la descrip­ción refle­je todo lo impor­tante.
Ejem­p­lo: ban­ner pro­mo­cional de una pelícu­la. Un ban­ner de  debe trans­mi­tir la esen­cia de la ima­gen, para que quien no puede ver­la pue­da imag­i­narla con clar­i­dad. Ejem­p­lo cor­rec­to:

<div role=“banner” aria-labelledby=“banner-title” aria-describedby=“banner-details”>
    <h1 id=“banner-title”>Estreno exclu­si­vo: The Crown
    </h1>
    <img src=“poster-the-crown.jpg” alt=“Portada de The Crown: la reina Isabel II de per­fil, con una coro­na bril­lante y un fon­do oscuro que trans­mite solem­nidad.”>
    <p id=“banner-details”>La serie explo­ra los desafíos per­son­ales y políti­cos de la monar­quía británi­ca. Disponible el próx­i­mo viernes.
    </p>
</div>

Alt: Resume la ima­gen con pal­abras que evo­quen emo­ción y con­tex­to: el per­fil de la reina, la coro­na, el fon­do oscuro.

aria-described­by: Pro­por­ciona una ampliación del men­saje para usuar­ios que quier­an más detalles.

H1 vis­i­ble: Refuerza el propósi­to del ban­ner y per­mite una nave­gación clara para todos.

 

Para fomentar la coherencia en el equipo:

Diseñadores UX trabajando
Foto de un estu­dio de dis­eño

1. Crea una plan­til­la de ejem­p­los: Incluye casos especí­fi­cos de imá­genes dec­o­ra­ti­vas, fun­cionales y con­tex­tuales.
2. Capaci­ta al equipo: Usa talleres y prác­ti­cas, para crear coheren­cia en el label­ing del ser­vi­cio en estruc­tura, títu­los, links, botones, alts…
3. Establece revi­siones per­iódi­cas.

 

Herramientas de IA para generar descripciones de imágenes

Herramienta para generar alternativas textuales
Her­ramien­ta Alttext.ai, para gen­rar alter­na­ti­vas tex­tuales.

Microsoft Azure Com­put­er Vision. 
Anal­iza imá­genes y gen­era descrip­ciones basadas en el con­tenido visu­al. Es ide­al para inte­grar­lo en flu­jos de tra­ba­jo automáti­cos.
Google Cloud Vision
. Ofrece análi­sis de imá­genes con eti­que­tas con­tex­tuales y descrip­ciones útiles para crear alter­na­ti­vas tex­tuales ini­ciales.
Alt Text AI
. Espe­cial­iza­do en gener­ar descrip­ciones alt para imá­genes, espe­cial­mente útil en ecom­merce y sitios web con grandes catál­o­gos visuales.
AutoAlt (plu­g­in de Word­Press)
 Uti­liza IA para gener­ar automáti­ca­mente atrib­u­tos alt en imá­genes subidas a Word­Press.

Imagen de una familia en el campo, la IA de Azure reconoce la escena
IA Azure reconocimien­to de imá­genes.

Artículos Relacionados

No Comments

Sorry, the comment form is closed at this time.