2526UdL1.1.1-F-001
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.1_Texto_Alternativo/1.1.1-F
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://historia-arte.com/obras/el-vinedo-rojo
2.1.2. Código HTML:
<img alt="La vigne rouge" width="2001" height="1560" loading="lazy" src="https://historia-arte.com/_/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbSI6WyJcL2FydHdvcmtcL2ltYWdlRmlsZVwvNjk3MWQzMDY2ZDBiMi5qcGciLCJyZXNpemUsODAwIl19.-nevJA0CmLBRL4h5oVukhAOrRruWanlvUdPspG5eSyc.jpg">
Explicación del problema detectado:
Esta imagen tiene como texto alternativo su título: "La vigne rouge".
Un cuadro de un pintor es una imagen compleja. Poner el nombre del cuadro no es suficiente para saber cómo es el cuadro o qué representa (sobretodo para personas con ceguera o baja visión) -sin contar que el hecho de que el título esté en un idioma distinto del resto de contendio la página web, puede ser un problema añadido para su comprensión-.
Si además (como ocurre en este caso), en el texto de la página no se describe dicho cuadro, la información de la página puede no llegarse a comprender porque falta esta descripción detallada de como es el cuadro.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las imágenes complejas pueden resultar difíciles de entender para mucha gente, especialmente para aquellas personas con ceguera, con baja visión, discapacidades de aprendizaje i/o experiencia limitada en la materia.
Una alternativa textual adecuada ayuda a las personas que tienen dificultades para percibir contenido visual, en este caso una imagen de un cuadro. La tecnología asistiva puede leer la alternativa textual en voz alta, presentarlo visualmente o convertirlo en braille, para la comprensión de cualquiera sobre dicha imagen.
Una alternativa textual adecuada también puede ayudar a algunas personas que tienen dificultades para entender el significado de la imagen compleja en cuestión.
Si no existe esta alternativa textual más detallada la persona no puede saber cómo es el cuadro y se pierde la información más importante para la comprensión del resto del contenido de la página web.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.greyravengallery.com/product/a-hummingbirds-sweet-treat-acrylic-on-canvas-by-tamara-davidson/
2.2.2 Código HTML:
<img src="Davidson-Sweet-Treat-web.webp"
alt="A Hummingbird’s Sweet Treat, Acrylic on Canvas by Tamara Davidson"
aria-describedby="description">
[…]
<p id="description">
An acrylic on canvas painting by Tamara Davidson of a solitary hummingbird in hues of red and green approaching flowers from beneath the vine. The bird hovers in front of a modeled background of muted kaleidoscopic colors and interspersed textures comprising shades of the foreground colors. 12″ W x 16″ H x 2″ D.
</p>
Explicación de la solución aplicada:
En los casos de imágenes complejas, es necesaria una alternativa de texto en dos partes. La primera parte es la descripción breve para identificar la imagen y, en su caso, indicar la ubicación de la descripción larga. La segunda parte es la descripción larga, una representación textual de la información esencial que transmite la imagen.
En este ejemplo se muestra la descripción corta (o para identificar la imagen) en el atributo alt, y la descripción larga se muestra mediante un párrafo.
El cuadro se describe mediante un párrafo de texto que se encuentra en la misma página web. El aria-describedby (atributo WAI-ARIA que contiene la imagen) se utiliza para enlazar a una descripción de la imagen que se proporciona en la misma página web. El valor del atributo es el id del elemento que proporciona la descripción larga.
Este es un ejemplo accesible porqué las imágenes complejas contienen información sustancial, más de la que puede transmitirse en una frase u oración corta, y por esto necesitan una descripción larga. Y en este ejemplo se proporciona.
NOTA: El elemento al que se hace referencia aria-describedby se trata como un párrafo continuo de texto. Los lectores de pantalla y otras tecnologías de asistencia al no tener acceso a la información estructural, como los encabezados y las tablas, leerán o proporcionarán el texto de cualquier elemento contenido sin indicar sus relaciones estructurales y sin los mecanismos de navegación correspondientes. Por este motivo, este enfoque sólo funciona para descripciones largas que son sólo de texto, sin necesidad de información estructural.
