2526UPSA4.1.1-A-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_4/4.1_Compatible/4.1.1-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://es.aliexpress.com/
2.1.2. Código HTML:
<input type="text" id="search-key" class="search-key" placeholder="buscar...">
<input type="hidden" id="search-key" value="">
Explicación del problema detectado:
La página principal de AliExpress contiene un error de validación HTML grave. El atributo id="search-key" se utiliza en dos elementos diferentes dentro del mismo documento (el input visible y un input oculto). Los estándares web exigen que los IDs sean únicos en toda la página.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Esto confunde a los lectores de pantalla. Cuando el software intenta etiquetar el campo de búsqueda o interactuar con él, puede "engancharse" al elemento oculto en lugar del visible, haciendo que la búsqueda sea inaccesible para personas ciegas.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
Archivo:2526UPSA4.1.1-A-0018.png 2526UPSA4.1.1-A-0018.png
b) Enlace de donde se ha obtenido la imagen:
https://www.google.com/?zx=1769033304239&no_sw_cr=1
2.2.2 Código HTML:
<div id="viewport" class="v-slt">
<form action="/search" id="search-form" role="search">
<textarea id="APjFqb" name="q" title="Buscar"></textarea>
</form>
</div>
Explicación de la solución aplicada:
La página de inicio de Google es un ejemplo de código validado correctamente. Cada elemento interactivo (el formulario, el área de texto) posee un identificador (id) único y exclusivo en todo el documento (search-form, APjFqb). Esto garantiza que el navegador procese ("parsee") la estructura sin ambigüedades y funcione perfectamente con productos de apoyo.
