2526UdL1.3.1-M-002

De WCAG Wiki

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-M
Universidad participante: UdL
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-M


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://www.cpnl.cat/xarxa/cnlreus/vxl/contacte/

2.1.2. Código HTML:

<label for="field_171">Nom*</label> <input type="text" name="171" id="field_171" value="" required="" data-rule-required="true" data-rule-duplicatecontrol="171" class="form-control">

<label for="field_171">Nom*</label> <input type="text" name="171" id="field_171" value="" required="" data-rule-required="true" data-rule-duplicatecontrol="171" class="form-control">

<label for="field_171">Nom*</label> <input type="text" name="171" id="field_171" value="" required="" data-rule-required="true" data-rule-duplicatecontrol="171" class="form-control">



Explicación del problema detectado:
El camp "Nom" sembla tenir <label for="field_171">Nom *</label> + <input id="field_171">, però:

Molts altres camps del formulari (correu, telèfon, missatge...) sovint no tenen label associada (només placeholder o text visual sense for/id). Els noms dels camps són numèrics (name="171") → poc descriptius.

Les relacions no són consistents en tot el formulari. Els lectors de pantalla no identifiquen correctament tots els camps.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Persones cegues o amb discapacitat visual greu que utilitzen lectors de pantalla (com VoiceOver, NVDA, JAWS o TalkBack).

Persones sordcegues que utilitzen dispositius braille.

En menor mesura: persones amb discapacitats cognitives o que utilitzen tecnologies d'assistència per navegar (teclat, veu...).

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://te-ayudamos.mediamarkt.es/app/ask


2.2.2 Código HTML: 

       <label for="rn_TextInput_3_Contact.Name.First" id="rn_TextInput_3_Label" class="rn_Label">
       Nombre
  • </label>
   <input type="text" id="rn_TextInput_3_Contact.Name.First" name="Contact.Name.First" class="rn_Text" maxlength="80" required="">



       <label for="rn_TextInput_5_Contact.Name.Last" id="rn_TextInput_5_Label" class="rn_Label">
       Apellido
  • </label>
   <input type="text" id="rn_TextInput_5_Contact.Name.Last" name="Contact.Name.Last" class="rn_Text" maxlength="80" required="">



Explicación de la solución aplicada:
Cada camp té una etiqueta visible clara (ex: "Nombre *", "Correo electrónico *", "Tema de la consulta *").

Les etiquetes estan programàticament associades als inputs amb <label for="id"> + <input id="id"> (o equivalent semàntic correcte).

Els lectors de pantalla anuncien correctament: "Nombre, obligatori, edita text" (no només "edita text" sense context).

No depen només de placeholders; la informació és accessible i comprensible per tecnologies d'assistència.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UdL1.3.1-M-002&oldid=4677»