2526UdL2.4.3-A-003
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_2/2.4_Navegable/2.4.3-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<form>
<div class="columna-izquierda">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre"> <label for="mensaje">Mensaje:</label>
<textarea id="mensaje"></textarea> </div>
<div class="columna-derecha">
<label for="apellido">Apellido:</label>
<input type="text" id="apellido"> <button type="submit">Enviar</button> </div>
</form>
Explicación del problema detectado:
Al presionar Tab, el foco salta de la siguiente manera:
Nombre → 2. Email (salta hacia abajo en lugar de a un lado) → 3. Apellido (vuelve arriba a la derecha) → 4. Botón Enviar (se salta el teléfono) → 5. Teléfono.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Discapacidad motriz – Barrera grave
Discapacidad visual total – Barrera grave Baja visión – Barrera moderada
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<form>
<div class="fila">
<div class="campo">
<label for="nombre-ok">Nombre:</label>
<input type="text" id="nombre-ok"> </div>
<div class="campo">
<label for="apellido-ok">Apellido:</label>
<input type="text" id="apellido-ok"> </div>
</div>
<div class="fila">
<label for="mensaje-ok">Mensaje:</label>
<textarea id="mensaje-ok"></textarea> </div>
<button type="submit">Enviar formulario</button>
</form>
Explicación de la solución aplicada:
El primer Tab selecciona el enlace principal.El foco se mueve de izquierda a derecha por los enlaces (Inicio, Servicios, Contacto). Si hay un botón de "Leer más" en el texto principal, este es el siguiente en recibir el foco.Finalmente, llega a los enlaces de redes sociales al final de la página.
