2526UFV2.4.7-A-002
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:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>NOA – 2.4.7-A</title>
</head>
<body>
<h1>Ejemplo NO accesible – Foco no visible</h1>
<p>
Este menú parece interactivo visualmente, pero no se puede navegar con teclado
y no existe ningún foco visible.
</p>
<div>
<div>Inicio</div>
<div>Productos</div>
<div>Contacto</div>
</div>
</body>
</html>
Explicación del problema detectado:
Al navegar con teclado (TAB), el foco no llega a estos elementos. Como consecuencia, no existe ningún indicador de foco visible.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas con movilidad reducida que navegan solo con teclado, que no pueden saber dónde están ni interactuar con el menú.
Personas con baja visión, debido a la ausencia total de referencia visual del foco.
Personas con discapacidad cognitiva, por su dificultad para entender qué elementos son interactivos.
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:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>ACC – 2.4.7-A</title>
</head>
<body>
<h1>Ejemplo accesible – Foco visible</h1>
<p>
El menú utiliza enlaces reales. Al navegar con TAB, el navegador
muestra automáticamente el foco visible.
</p>
<nav aria-label="Menú principal">
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#productos">Productos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<h2 id="inicio">Inicio</h2>
<p>Contenido de ejemplo.</p>
<h2 id="productos">Productos</h2>
<p>Contenido de ejemplo.</p>
<h2 id="contacto">Contacto</h2>
<p>Contenido de ejemplo.</p>
</body>
</html>
Explicación de la solución aplicada:
Se utilizan elementos HTML nativos (<a>) que reciben foco automáticamente y muestran un indicador de foco visible por defecto.
El usuario puede navegar con teclado y saber en todo momento qué elemento tiene el foco.
