2526UdL2.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
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:
a:focus {
outline: none;
}
.btn-comprar {
background-color: #2c3e50;
color: white;
padding: 10px;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" class="btn-comprar">Comprar producte</a>
Explicación del problema detectado:
Normalment, quan fas clic en un enllaç o hi arribes amb el teclat (amb la tecla Tab), el navegador mostra una línia al voltant de l’element per indicar que està seleccionat. Això ajuda a saber on ets dins la pàgina.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Persones que naveguen amb teclat i/o amb mobilitat reduïda.
Persones amb algunes discapacitats visuals o cognitives que necessiten indicadors clars per saber on estan.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<style>
.btn-comprar {
background-color: #2c3e50;
color: white;
padding: 10px;
text-decoration: none;
display: inline-block;
}
.btn-comprar:focus-visible {
outline: 4px solid #ffcc00;
outline-offset: 3px;
box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<nav>
<a href="#comprar" class="btn-comprar">Comprar producte</a>
</nav>
Explicación de la solución aplicada:
Quan una persona arriba al botó amb el teclat, el botó mostra un contorn groc ben visible al voltant i una mica d’ombra. Això serveix per indicar clarament quin element està seleccionat en aquell moment.
