2526UPSA1.1.1-K-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://www.wikiwcag.udl.cat/index.php/Principio_1/1.1_Texto_Alternativo/1.1.1-K
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Galería de productos</title>
</head>
<body>
<h1>Nuestros productos destacados</h1>
<div class="productos">
<img src="laptop-gaming.jpg">
<img src="raton-inalambrico.jpg">
<img src="teclado-mecanico.jpg">
</div>
</body>
</html>
Explicación del problema detectado:
Las imágenes de productos no tienen el atributo alt (texto alternativo). Esto incumple el criterio 1.1.1 porque el contenido no textual (las imágenes) no dispone de una alternativa textual que cumpla el mismo propósito informativo. Los lectores de pantalla no pueden describir qué productos se muestran, dejando a los usuarios con discapacidad visual sin acceso a información esencial sobre los productos disponibles.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas con discapacidad visual total: No pueden saber qué productos se están mostrando, ya que los lectores de pantalla solo anunciarán "imagen" o el nombre del archivo ("laptop-gaming.jpg") sin contexto útil. Esto les impide realizar compras informadas o navegar efectivamente por el catálogo.
Personas con discapacidad visual parcial: Si las imágenes no cargan debido a conexiones lentas o navegación sin imágenes, no tendrán ninguna información alternativa sobre los productos.
Personas con discapacidad cognitiva: El texto alternativo refuerza la comprensión del contenido visual, su ausencia reduce la accesibilidad para usuarios que procesan mejor la información multimodal.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Galería de productos</title>
</head>
<body>
<h1>Nuestros productos destacados</h1>
<div class="productos">
<img src="laptop-gaming.jpg" alt="Portátil gaming ASUS ROG con pantalla 15 pulgadas, teclado retroiluminado RGB">
<img src="raton-inalambrico.jpg" alt="Ratón inalámbrico Logitech MX Master 3 ergonómico color negro">
<img src="teclado-mecanico.jpg" alt="Teclado mecánico Corsair K95 RGB con switches Cherry MX Brown">
</div>
</body>
</html>
Explicación de la solución aplicada:
Cada imagen incluye un atributo alt con una descripción textual significativa que proporciona la misma información que transmite visualmente la imagen. El texto alternativo describe el producto de forma clara y concisa (marca, modelo, características principales), permitiendo que los usuarios de tecnologías de asistencia comprendan completamente qué productos se ofrecen sin necesidad de ver la imagen.
