2526UdL1.3.1-M-002
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_1/1.3_Adaptable/1.3.1-M
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
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.
