2526UPSA.1.3.1-E-001

De WCAG Wiki
Revisión del 21:33 11 ene 2026 de 202526UFV20 (discusión | contribs.)
(difs.) ← Revisión anterior | Revisión actual (difs.) | Revisión siguiente → (difs.)

Edición de la página como formulario

1. Información básica

Id del criterio: 1.3.1 - Información y relaciones (Nivel: A)
Título del subcriterio: 1.3.1-E
Universidad participante: UFV
Curso académico: 2025-26

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-E


2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen
Archivo:2025 26 UPSA 1.3.1-E NOA.png 2025 26 UFV 1.3.1-E NOA.png

b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-No-Accesible.html"> https://www.fundacionsbs.com/patronato/ </a> <a rel="nofollow" class="external free" href="file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-No-Accesible.html"> https://www.fundacionsbs.com/patronato/ </a>]

2.1.2. Código HTML:

<!DOCTYPE html> Formulario - NO Accesible 1.3.1-E

⚠️ PROBLEMA DE ACCESIBILIDAD 1.3.1-E: Este formulario usa DIVs y SPANs sin semántica HTML correcta.
Registro de Usuario
Información Personal
Nombre completo *
Campo obligatorio
Correo electrónico *
Campo obligatorio. Usaremos este correo para contactarte.
Teléfono
Información de Cuenta
Nombre de usuario *
Mínimo 6 caracteres. Solo letras y números.
Contraseña *
Mínimo 8 caracteres, debe incluir mayúsculas, minúsculas y números.
Confirmar contraseña *
Preferencias
¿Deseas recibir nuestro boletín?
Sí
No
Acepto los términos y condiciones *
He leído y acepto los términos
Registrarse
⚠️ Problemas de accesibilidad en este ejemplo:
  • Usa <div class="title"> en lugar de <h1>
  • Usa <div class="subtitle"> en lugar de <h2>
  • Usa <span class="label-text"> en lugar de <label>
  • No hay relación entre etiquetas e inputs (falta for y id)
  • Usa <div class="button"> en lugar de <button>
  • No hay <form> agrupando los campos
  • Los lectores de pantalla no pueden identificar la estructura



Explicación del problema detectado:
El formulario utiliza elementos div y span con clases CSS para simular la estructura visual (títulos, subtítulos, etiquetas), pero sin

semántica HTML. Usa
en lugar de

, en lugar de <label>, y

en lugar de <button>. No hay atributos "for" vinculando etiquetas con inputs, ni <form> o <fieldset> agrupando campos relacionados.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
- Usuarios de lectores de pantalla no pueden identificar la jerarquía 

 de títulos ni navegar por secciones.

- No se anuncia la relación entre etiquetas y campos de formulario. - Usuarios de teclado tienen dificultad navegando sin estructura semántica. - Tecnologías de asistencia no pueden interpretar correctamente la 

 información y relaciones del contenido.

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen
Archivo:2025 26 UPSA 1.3.1-E ACC.png 2025 26 UFV 1.3.1-E ACC.png
b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-Accesible.html">file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-Accesible.html</a> <a rel="nofollow" class="external free" href="file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-Accesible.html">file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-Accesible.html</a>]


2.2.2 Código HTML:

<!DOCTYPE html> Formulario - ACCESIBLE 1.3.1-E

✅ ACCESIBLE 1.3.1-E: Este formulario usa HTML semántico correcto con estructura clara.

Registro de Usuario

Información Personal

Campo obligatorio

Campo obligatorio. Usaremos este correo para contactarte.

Información de Cuenta

Mínimo 6 caracteres. Solo letras y números.

Mínimo 8 caracteres, debe incluir mayúsculas, minúsculas y números.

Preferencias

¿Deseas recibir nuestro boletín?

✅ Implementación accesible correcta:
  • Usa <h1> para el título principal
  • Usa <h2> o <legend> para subtítulos
  • Usa <label> con atributo for vinculado a cada input
  • Usa <form> y <fieldset> para agrupar campos relacionados
  • Usa <button> en lugar de div
  • Usa atributos ARIA cuando es necesario (aria-required, aria-describedby)
  • Los lectores de pantalla pueden navegar la estructura correctamente
  • La relación entre etiquetas y campos es clara programáticamente



Explicación de la solución aplicada:

Implementa correctamente HTML semántico usando

,

, <form>, <fieldset>, <legend>, y <label> con atributo "for". Cada campo tiene su etiqueta asociada mediante id. Usa atributos ARIA apropiados como aria-required, aria-describedby y aria-labelledby para reforzar las relaciones. La estructura es clara tanto visual como programáticamente.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UPSA.1.3.1-E-001&oldid=4300»