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>
.enlace-invisible:focus {
outline: none;
}
</style>
<a href="https://www.gwentrpb.wales/home" class="enlace-invisible">Home</a>
Explicación del problema detectado:
Se ha detectado un incumplimiento de la pauta 2.4.7 Foco visible (Nivel A). Al realizar una navegación mediante teclado (tecla Tabulador), la barra de estado del navegador (esquina inferior izquierda) indica que el foco se encuentra sobre el enlace /area-plan, sin embargo, no aparece ningún indicador visual, borde o resalte en la interfaz. Esto se debe a que el CSS de la página elimina la propiedad outline de los elementos interactivos, impidiendo que usuarios con discapacidad motriz o baja visión sepan dónde están situados dentro de la página.
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>
.enlace-visible:focus {
outline: 4px solid #000000;
outline-offset: 2px;
}
</style>
<a href="https://www.bbc.com/" class="enlace-visible">BBC Home</a>
Explicación de la solución aplicada:
El código es accesible porque define un indicador de foco claro y de alto contraste mediante la propiedad outline. El uso de outline-offset asegura que el "cuadrado" de selección sea fácilmente distinguible del texto del enlace, facilitando la navegación por teclado siguiendo el estándar de la BBC.
