2526UPSA2.4.7-A-001
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.7-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="https://www.gwentrpb.wales/home">https://www.gwentrpb.wales/home </a> <a rel="nofollow" class="external free" href="https://www.gwentrpb.wales/home">https://www.gwentrpb.wales/home </a>]
2.1.2. Código HTML:
<style>
.boton-malo:focus { outline: none; }
</style>
<button class="boton-malo">Enviar Formulario (Sin Foco)</button>
Explicación del problema detectado:
Mediante CSS se ha establecido outline: none o border: 0 en el estado :focus. Esto hace que, cuando se selecciona el elemento con el teclado (Tab), no haya ningún cambio visual (ni borde azul, ni brillo).
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Afectados: personas con discapacidad motora (parálisis, Parkinson) que navegan solo con teclado o conmutadores, y personas con baja visión.
Barrera: el usuario "se pierde". No sabe qué botón va a pulsar si presiona Enter, haciendo la web inoperable.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="https://www.bbc.com">https://www.bbc.com </a> <a rel="nofollow" class="external free" href="https://www.bbc.com">https://www.bbc.com </a>]
2.2.2 Código HTML:
<style>
.boton-bueno:focus { outline: 3px solid #0056b3; outline-offset: 2px; }
</style>
<button class="boton-bueno">Enviar Formulario (Con Foco)</button>
Explicación de la solución aplicada:
Se define explícitamente un estilo para la pseudoclase :focus que utiliza outline sólido y de color contrastado. Esto garantiza que el elemento activo destaque visualmente sobre el resto.
