Editar ActividadWCAG: 2526UPSA3.3.2-A-000

No tienes permiso para modificar esta página, por el siguiente motivo:

La acción que has solicitado está restringida a los usuarios de uno de estos 3 grupos: Administradores, alumnos, profesores.

1. Información básica[editar | editar código]

1.1. Id del criterio:
Selecciona el criterio concreto

1.2. Id del subcriterio:
Selecciona el código que identifica el subcriterio

1.3. Indica tu universidad:
Selecciona el acrónimo de tu universidad

1.4. Indica el curso académico:
Selecciona el curso académico actual

1.5. Enlace directo al subcriterio en la wiki: Incluye el enlace al subcriterio directo https://wikiwcag.udl.cat/Principio_3/3.3_Assistencia_en_los_input/3.3.2-A Puedes consultar el índice completo de la wiki WCAG y seleccionar tu subcriterio concreto

2. Ejemplos prácticos[editar | editar código]

Introduce la información respecto a cada ejemplo (accesible y no accesible). Tienes dos opciones:

a. Incluir una captura de imagen de una web y el enlace de donde se ha obtenido el ejemplo.
b. Incluir un código HTML propio representando el ejemplo

2.1. Ejemplo NO Accesible[editar | editar código]

2.1.1. Evidencia (Imagen/Enlace o código)

2.1.1.a Imagen/Enlace no accesible

📤 Sube tu imagen de evidencia no accesible
Puedes hacer clic en “Subir archivo” o seleccionar un archivo ya existente en la wiki

Al subir el fichero, usa un nombre identificativo, por ejemplo:

Cada fichero tiene una nomenclatura:
* Curso de creación: 2025_26_
* Universidad: UdL
* Identificador del subcriterio: 1.1.1-A
* No accesible: NOA
Por ejemplo: Archivo:2025_26_UdL_1.1.1-A_NOA.jpg

1. Subir la imagen de la evidencia: Subir archivo
También puedes 🗂️ No se pueden emplear las etiquetas <html> si no es en las páginas normales. e incluirla en el cuadro de texto.

2 Enlace de la web donde se detectó el problema: Por ejemplo: https://www.unawebconlabarrera.com

2.1.1.b. Código HTML no accesible

Incluir código HTML: NOTA: Incluye el codigo entre etiquetas <nowiki> y </nowiki>

<nowiki> <form> <input type="text" placeholder="Nombre de usuario"> <input type="password" placeholder="Contraseña"> <input type="text" placeholder="Fecha de nacimiento"> <button type="submit">Enviar</button> </form> </nowiki>

2.1.2. Explicación del problema detectado: En la imagen puesta de ejemplo aparece un formulario que no tiene etiquetas que indiquen que hay que escribir en cada campo del formulario. Además, en cada campo aparece texto y si quieres escribir en el formulario el texto aparece, ni siquiera se quita como si el texto se hubiera puesto en un atributo placeholder dentro la etiqueta <input>. En un formulario no se puede poner texto que se borre como el de un placeholder ni poner texto que no se borre al querer escribir como en el formulario de la imagen. En el código HTML se puede ver un formulario que no es accesible, ya que no hay una etiqueta label para cada etiqueta input que indique claramente con que información hay que rellenar cada campo del formulario. También aparecen los atributos placeholder en cada input, que genera texto en gris claro que se quita al escribir en ese input del formulario, algo que no hay que hacer. Explica qué problema tiene el código, imagen o enlace que has incluido.

2.1.3. Personas afectadas y barreras: El incumplimiento de este criterio afecta a usuarios con discapacidad visual, ya que, sin etiquetas de texto vinculadas a cada input del formulario, los lectores de pantalla son incapaces de anunciar el propósito de un campo, dejando al usuario sin información ante formularios mudos que no puede rellenar. Por otro lado, la ausencia de instrucciones claras y el uso de etiquetas que desaparecen (el texto de un atributo placeholder de un input) también afecta a personas con discapacidad cognitiva, TDAH o problemas de memoria, ya que pierden el contexto de la información requerida en cuanto empiezan a escribir. Esta carencia de guías preventivas —como no especificar el formato de una fecha o las reglas de una contraseña— genera una barrera de frustración y ansiedad que también afecta a personas mayores o con un bajo nivel digital, quienes suelen abandonar el proceso ante mensajes de error inesperados. Explica qué problema tiene los usuarios que se enfrentan con este problema.

2.2. Ejemplo Accesible[editar | editar código]

2.2.1. Evidencia (Imagen/Enlace o código)

2.2.1.a Imagen/Enlace Accesible

📤 Sube tu imagen de evidencia accesible
Puedes hacer clic en “Subir archivo” o seleccionar un archivo ya existente en la wiki

Al subir el fichero, usa un nombre identificativo, por ejemplo:

Cada fichero tiene una nomenclatura:
* Curso de creación: 2025_26_
* Universidad: UdL
* Identificador del subcriterio: 1.1.1-A
* No accesible: ACC
Por ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg

1. Subir la imagen de la evidencia: Subir archivo
También puedes 🗂️ No se pueden emplear las etiquetas <html> si no es en las páginas normales. e incluirla en el cuadro de texto.

2. Enlace de la web donde se observó la evidencia: Por ejemplo: https://www.unawebconlabarrera.com

2.2.1.b. Código HTML accesible

Incluir código HTML: NOTA: Incluye el codigo entre etiquetas <nowiki> y </nowiki>

<nowiki> <form> <label for="usuario">Nombre de usuario:</label> <input type="text" id="usuario" name="usuario"> <label for="nacimiento">Fecha de nacimiento:</label> <span id="ayuda-fecha">Formato requerido: DD/MM/AAAA</span> <input type="text" id="nacimiento" name="nacimiento"> <label for="clave">Contraseña:</label> <span id="ayuda-clave">Mínimo 8 caracteres y un número.</span> <input type="password" id="clave" name="clave"> <button type="submit">Enviar datos</button> </form> </nowiki>

2.2.2. Explicación de la solución: En la imagen se ve un formulario sin texto gris de placeholder que se quita al escribir en él. Además, encima de cada campo hay etiquetas que te indican claramente que hay que escribir en cada campo del formulario. El código HTML de ejemplo aparece un formulario donde hay inputs sin placeholder y con su correspondiente label que indica que hay que escribir en cada campo. Además para más ayuda, se pone en un span, información adicional sobre campos que requieren un formato específico como la fecha o la contraseña. Explica porque la evidencia que se ha incluido es un ejemplo accesible.

Resumen:

Cancelar

Anónimo

Buscar

Editar ActividadWCAG: 2526UPSA3.3.2-A-000

Espacios de nombres

Más

Acciones de página

Sumario

1. Información básica[editar | editar código]

2. Ejemplos prácticos[editar | editar código]

2.1. Ejemplo NO Accesible[editar | editar código]

2.2. Ejemplo Accesible[editar | editar código]

Navegación

Navegación

Herramientas wiki

Herramientas wiki

Anónimo

Buscar

Editar ActividadWCAG: 2526UPSA3.3.2-A-000

1. Información básica[editar | editar código]

2. Ejemplos prácticos[editar | editar código]

2.1. Ejemplo NO Accesible[editar | editar código]

2.2. Ejemplo Accesible[editar | editar código]

Navegación

Herramientas wiki

Herramientas de página