Diferencia entre revisiones de «2526UPSA4.1.1-A-001»

De WCAG Wiki
VisualWikitexto
202526UPSA21 (discusión | contribs.)
alumnos
18 ediciones
Página creada con «{{ActividadWCAG |id_criterio=4.1.1 - Procesamiento (Nivel: A) |id_subcriterio=4.1.1-A |id_universidad=UPSA |curso_academico=2025-26 |enlace=https://wikiwcag.udl.cat/Principio_4/4.1_Compatible/4.1.1-A |noa_barrera_evidencia_html=<nowiki> <form> <label for="campo-email">Suscríbete al boletín:</label> <input type="email" id="campo-email" name="newsletter"> </form> <form> <label for="campo-email">Inicia sesión:</label> <input type="text" id="campo-emai…»
 
202526UPSA21 (discusión | contribs.)
alumnos
18 ediciones
Sin resumen de edición
 
Línea 5: Línea 5:
|curso_academico=2025-26
|curso_academico=2025-26
|enlace=https://wikiwcag.udl.cat/Principio_4/4.1_Compatible/4.1.1-A
|enlace=https://wikiwcag.udl.cat/Principio_4/4.1_Compatible/4.1.1-A
|noa_barrera_evidencia_img=2526UPSA2.4.11-A-001.png
|noa_barrera_evidencia_url=https://es.aliexpress.com/
|noa_barrera_evidencia_html=<nowiki>
|noa_barrera_evidencia_html=<nowiki>
<form>
<input type="text" id="search-key" class="search-key" placeholder="buscar...">
  <label for="campo-email">Suscríbete al boletín:</label>
  <input type="email" id="campo-email" name="newsletter">
</form>


<form>
<input type="hidden" id="search-key" value="">
  <label for="campo-email">Inicia sesión:</label>
  <input type="text" id="campo-email" name="login">
  </form>
</nowiki>
</nowiki>
|noa_barrera_explicacion=El código HTML contiene errores de sintaxis graves, específicamente la duplicación del valor del atributo id. Según las especificaciones HTML, cada ID debe ser único dentro de un mismo documento.
|noa_barrera_explicacion=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.
 
|noa_barrera_usuarios=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.
Al repetir id="campo-email", el navegador y las tecnologías de asistencia no pueden determinar inequívocamente a qué elemento se refiere el código, rompiendo la estructura lógica de la página .
|acc_barrera_evidencia_img=2526UPSA4.1.1-A-0018.png 2526UPSA4.1.1-A-0018.png
|noa_barrera_usuarios=Personas afectadas: Usuarios de lectores de pantalla y tecnologías de asistencia que dependen de la estructura del código para navegar.
|acc_barrera_evidencia_url=https://www.google.com/?zx=1769033304239&no_sw_cr=1
 
Barreras:
 
Etiquetado incorrecto: Los lectores de pantalla utilizan el ID para asociar etiquetas (label) con sus campos (input). Si el ID está duplicado, el lector puede anunciar la etiqueta incorrecta (por ejemplo, decir "Suscríbete" cuando el usuario está en el campo de "Iniciar sesión").
 
Fallos de navegación: Los scripts o enlaces internos que apuntan a ese ID solo funcionarán con el primero que encuentren, haciendo el segundo inaccesible .
|acc_barrera_evidencia_html=<nowiki>
|acc_barrera_evidencia_html=<nowiki>
<form>
<div id="viewport" class="v-slt">
  <label for="newsletter-email">Suscríbete al boletín:</label>
    <form action="/search" id="search-form" role="search">
  <input type="email" id="newsletter-email" name="newsletter">
        <textarea id="APjFqb" name="q" title="Buscar"></textarea>
</form>
    </form>
 
</div>
<form>
  <label for="login-email">Inicia sesión:</label>
  <input type="text" id="login-email" name="login">
</form>
</nowiki>
</nowiki>
|acc_barrera_explicacion=Se ha corregido el código asegurando que todos los atributos id tengan valores únicos dentro de la página (newsletter-email y login-email).
|acc_barrera_explicacion=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.
 
Esto garantiza que el código HTML sea válido (cumpla con el estándar de "buen formado") y permite que los navegadores y productos de apoyo analicen ("parseen") la estructura sin ambigüedades, asociando correctamente cada etiqueta con su control correspondiente .
}}
}}

Revisión actual - 22:12 21 ene 2026

Edición de la página como formulario

1. Información básica

Id del criterio: 4.1.1 - Procesamiento (Nivel: A)
Título del subcriterio: 4.1.1-A
Universidad participante: UPSA
Curso académico: 2025-26

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

2.1.1. Evidencia en imagen y enlace:
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.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UPSA4.1.1-A-001&oldid=4339»