2526UFV4.1.1-A-000
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_4/4.1_Compatible/4.1.1-A
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>Listado</title>
</head>
<body>
<h1>Productos</h1>
<!-- Error 1: anidamiento incorrecto (p dentro de ul) -->
<ul>
<p>Lista de productos:</p>
<li id="item">Portátil</li>
<li id="item">Monitor</li> <!-- Error 2: id duplicado -->
</ul>
<!-- Error 3: atributo duplicado en el mismo elemento -->
<a href="detalle.html" href="otra.html">Ver detalle</a>
<!-- Error 4: valor de atributo sin entrecomillar -->
<img src=producto.png alt="Foto del producto">
<!-- Error 5: etiqueta sin cerrar correctamente -->
<button>Comprar
</body>
</html>
Explicación del problema detectado:
El código contiene errores que impiden que los agentes de usuario lo procesen sin ambigüedades:
- Etiquetas mal anidadas / estructura inválida.
- id no únicos.
- Atributos duplicados en un mismo elemento.
- Valores de atributos sin comillas.
- Etiquetas sin cierre adecuado.
Esto incumple 4.1.1-A, porque el marcado no es “bien formado” y puede generar un DOM inconsistente o inesperado.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
En usuarios con discapacidad visual total que dependen de lectores de pantalla, los errores de marcado pueden:
- alterar el árbol de accesibilidad.
- romper relaciones estructurales (listas, controles).
- provocar lectura desordenada u omisión de contenido.
- dificultar la navegación por encabezados/elementos.
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>Listado</title>
</head>
<body>
<h1>Productos</h1>
<p>Lista de productos:</p>
<ul>
<li id="item-portatil">Portátil</li>
<li id="item-monitor">Monitor</li>
</ul>
<a href="detalle.html">Ver detalle</a>
<img src="producto.png" alt="Foto del producto">
<button type="button">Comprar</button>
</body>
</html>
Explicación de la solución aplicada:
El código está correctamente estructurado:
- Etiquetas bien abiertas/cerradas y anidamiento válido.
- id únicos.
- Sin atributos duplicados.
- Valores de atributos entrecomillados.
Esto permite que navegadores y tecnologías de asistencia interpreten el contenido de forma consistente, cumpliendo 4.1.1-A.
