Diferencia entre revisiones de «2526UdL1.1.1-F-001»

De WCAG Wiki
VisualWikitexto
202526MicroUdL06 (discusión | contribs.)
alumnos
3 ediciones
Página creada con «{{ActividadWCAG |id_criterio=1.1.1 - Contenido no textual (Nivel: A) |id_subcriterio=1.1.1-F |id_universidad=UdL |curso_academico=2025-26 |enlace=https://wikiwcag.udl.cat/Principio_1/1.1_Texto_Alternativo/1.1.1-F |noa_barrera_evidencia_img=2025_26_UdL_1.1.1-F_NOA.png |noa_barrera_evidencia_url=https://historia-arte.com/obras/el-vinedo-rojo |noa_barrera_evidencia_html=<nowiki> <img alt="La vigne rouge" width="2001" height="1560" loading="lazy" src="https://historia…»
 
202526UdL07 (discusión | contribs.)
alumnos
11 ediciones
Exempres accessibles i no accessibles del principi 1.1.1-F de les pautes WCAG
 
Línea 5: Línea 5:
|curso_academico=2025-26
|curso_academico=2025-26
|enlace=https://wikiwcag.udl.cat/Principio_1/1.1_Texto_Alternativo/1.1.1-F
|enlace=https://wikiwcag.udl.cat/Principio_1/1.1_Texto_Alternativo/1.1.1-F
|noa_barrera_evidencia_img=2025_26_UdL_1.1.1-F_NOA.png
|noa_barrera_evidencia_img=Archivo2025 26 UdL 1.1.1-A NOA.png
|noa_barrera_evidencia_url=https://historia-arte.com/obras/el-vinedo-rojo
|noa_barrera_evidencia_url=http://www.artachomarbres.com/gale_01_cuines_granit.html
|noa_barrera_evidencia_html=<nowiki>  
|noa_barrera_evidencia_html=<nowiki>  


Línea 12: Línea 12:


</nowiki>
</nowiki>
|noa_barrera_explicacion=Esta imagen tiene como texto alternativo su título: "La vigne rouge".
|noa_barrera_explicacion=No conté descripcció de cap imatge
 
|noa_barrera_usuarios=visual total, no permet autodescripció per a persones cegues
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-.
|acc_barrera_evidencia_img=Archivo2025 26 UdL 1.1.1-A ACC.png
 
|acc_barrera_evidencia_url=https://www.carhartt-wip.com/es-es?gad_source=1&gad_campaignid=10948255172&gbraid=0AAAAADsbU6TddFvw8b0Ritpu5XuvZ8VHm&gclid=EAIaIQobChMInPmGwN7ekgMVqZRQBh1GGxrjEAAYASAAEgJ7LvD_BwE
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.
|noa_barrera_usuarios=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.
|acc_barrera_evidencia_img=2025 26 UdL 1.1.1-F ACC.png
|acc_barrera_evidencia_url=https://www.greyravengallery.com/product/a-hummingbirds-sweet-treat-acrylic-on-canvas-by-tamara-davidson/
|acc_barrera_evidencia_html=<nowiki>
|acc_barrera_evidencia_html=<nowiki>


Línea 37: Línea 27:


</nowiki>
</nowiki>
|acc_barrera_explicacion=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.
|acc_barrera_explicacion=Totes les imatges contenen una bona descripció que admet comprendre-les sense necessitat de veure-ho
 
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.
}}
}}

Revisión actual - 19:46 16 feb 2026

Edición de la página como formulario

1. Información básica

Id del criterio: 1.1.1 - Contenido no textual (Nivel: A)
Título del subcriterio: 1.1.1-F
Universidad participante: UdL
Curso académico: 2025-26

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

2.1.1. Evidencia en imagen y enlace:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
http://www.artachomarbres.com/gale_01_cuines_granit.html

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:
No conté descripcció de cap imatge

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
visual total, no permet autodescripció per a persones cegues

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://www.carhartt-wip.com/es-es?gad_source=1&gad_campaignid=10948255172&gbraid=0AAAAADsbU6TddFvw8b0Ritpu5XuvZ8VHm&gclid=EAIaIQobChMInPmGwN7ekgMVqZRQBh1GGxrjEAAYASAAEgJ7LvD_BwE


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:
Totes les imatges contenen una bona descripció que admet comprendre-les sense necessitat de veure-ho





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UdL1.1.1-F-001&oldid=4715»