Diferencia entre revisiones de «2526UdL2.4.7-A-001»
Página creada con «{{ActividadWCAG |id_criterio=2.4.7 - Foco visible (Nivel: AA) |id_subcriterio=2.4.7-A |id_universidad=UdL |curso_academico=2025-26 |enlace=https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.7-A |noa_barrera_evidencia_html=<nowiki> a:focus { outline: none; } .btn-comprar { background-color: #2c3e50; color: white; padding: 10px; text-decoration: none; } </style> </head> <body> <a href="#" class=…» |
Sin resumen de edición |
||
| Línea 28: | Línea 28: | ||
Persones amb algunes discapacitats visuals o cognitives que necessiten indicadors clars per saber on estan. | Persones amb algunes discapacitats visuals o cognitives que necessiten indicadors clars per saber on estan. | ||
|acc_barrera_evidencia_img=Accesible3.png | |acc_barrera_evidencia_img=Accesible3.png | ||
|acc_barrera_evidencia_html=<style> | |acc_barrera_evidencia_html=<nowiki> | ||
<style> | |||
.btn-comprar { | .btn-comprar { | ||
background-color: #2c3e50; | background-color: #2c3e50; | ||
| Línea 45: | Línea 46: | ||
</head> | </head> | ||
<body> | <body> | ||
<nav> | <nav> | ||
<a href="#comprar" class="btn-comprar">Comprar producte</a> | <a href="#comprar" class="btn-comprar">Comprar producte</a> | ||
</nav> | </nav> | ||
</nowiki> | |||
|acc_barrera_explicacion=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. | |acc_barrera_explicacion=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. | ||
}} | }} | ||
Revisión actual - 12:46 15 feb 2026
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.
