Diferencia entre revisiones de «2526UPSA2.4.5-B-000»

De WCAG Wiki
← Edición anterior
VisualWikitexto
202526UPSA16 (discusión | contribs.)
alumnos
24 ediciones
Sin resumen de edición
202526UFV20 (discusión | contribs.)
alumnos
10 ediciones
Sin resumen de edición
 
Línea 5: Línea 5:
|curso_academico=2025-26
|curso_academico=2025-26
|enlace=https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.5-B
|enlace=https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.5-B
|noa_barrera_evidencia_img=NoAccesible245.png
|noa_barrera_evidencia_img=NoAccesible245.png 2025 26 UFV 2.4.5-B NOA.png
|noa_barrera_evidencia_url=https://www.pennyjuice.com/
|noa_barrera_evidencia_url=https://www.pennyjuice.com/
|noa_barrera_explicacion=No existe un menú o buscador dónde encontrar las páginas del sitio web directamente, estas se han de buscar deslizando hacía abajo en la interfaz e incluso algunas se encuentran en mitad del texto.
|noa_barrera_evidencia_html=<!DOCTYPE html>
|noa_barrera_usuarios=Para los usuarios con discapacidades cognitivas, visuales o incluso motrices que han de navegar por teclado se les dificulta enormemente acceder a la página que desean rápidamente
<html lang="es">
|acc_barrera_evidencia_img=Accesible245.png
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tienda Online - Ejemplo NO Accesible 2.4.5-B</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
       
        header {
            background-color: #2c3e50;
            color: white;
            padding: 1rem 2rem;
        }
       
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }
       
        nav {
            background-color: #34495e;
            padding: 0;
        }
       
        nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }
       
        nav ul li {
            position: relative;
        }
       
        nav ul li a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 1rem 1.5rem;
            transition: background-color 0.3s;
        }
       
        nav ul li a:hover {
            background-color: #1abc9c;
        }
       
        nav ul li ul {
            display: none;
            position: absolute;
            background-color: #2c3e50;
            min-width: 200px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
       
        nav ul li:hover ul {
            display: block;
        }
       
        nav ul li ul li {
            width: 100%;
        }
       
        nav ul li ul li ul {
            left: 100%;
            top: 0;
        }
       
        main {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
       
        .alert {
            background-color: #e74c3c;
            color: white;
            padding: 1rem;
            margin-bottom: 2rem;
            border-radius: 5px;
        }
       
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
       
        .product-card {
            border: 1px solid #ddd;
            padding: 1rem;
            border-radius: 5px;
            text-align: center;
        }
       
        .product-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background-color: #ecf0f1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
       
        .product-card h3 {
            margin: 1rem 0 0.5rem;
        }
       
        .product-card .price {
            color: #e74c3c;
            font-size: 1.2rem;
            font-weight: bold;
        }
       
        footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 2rem;
            margin-top: 3rem;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">🛒 TechStore Online</div>
    </header>
   
    <nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li>
                <a href="#">Electrónica ▼</a>
                <ul>
                    <li>
                        <a href="#">Ordenadores ▶</a>
                        <ul>
                            <li><a href="#">Portátiles</a></li>
                            <li><a href="#">Sobremesa</a></li>
                            <li><a href="#">Gaming</a></li>
                            <li><a href="#">Accesorios</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Smartphones ▶</a>
                        <ul>
                            <li><a href="#">iPhone</a></li>
                            <li><a href="#">Samsung</a></li>
                            <li><a href="#">Xiaomi</a></li>
                            <li><a href="#">Otros</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Tablets ▶</a>
                        <ul>
                            <li><a href="#">iPad</a></li>
                            <li><a href="#">Android</a></li>
                            <li><a href="#">Windows</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Hogar ▼</a>
                <ul>
                    <li><a href="#">Electrodomésticos</a></li>
                    <li><a href="#">Muebles</a></li>
                    <li><a href="#">Decoración</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Deportes ▼</a>
                <ul>
                    <li><a href="#">Ropa deportiva</a></li>
                    <li><a href="#">Equipamiento</a></li>
                    <li><a href="#">Fitness</a></li>
                </ul>
            </li>
            <li><a href="#">Ofertas</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
   
    <main>
        <div class="alert">
            <strong>⚠️ PROBLEMA DE ACCESIBILIDAD:</strong> Este sitio web SOLO tiene el menú de navegación como forma de encontrar productos. No hay buscador, mapa del sitio, ni otras alternativas.
        </div>
       
        <h1>Productos Destacados</h1>
       
        <div class="product-grid">
            <div class="product-card">
                <div style="width: 100%; height: 200px; background-color: #ecf0f1; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
                    💻
                </div>
                <h3>Portátil Gaming Pro</h3>
                <p class="price">1.299€</p>
            </div>
           
            <div class="product-card">
                <div style="width: 100%; height: 200px; background-color: #ecf0f1; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
                    📱
                </div>
                <h3>Smartphone XL</h3>
                <p class="price">899€</p>
            </div>
           
            <div class="product-card">
                <div style="width: 100%; height: 200px; background-color: #ecf0f1; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
                    🎧
                </div>
                <h3>Auriculares Bluetooth</h3>
                <p class="price">149€</p>
            </div>
           
            <div class="product-card">
                <div style="width: 100%; height: 200px; background-color: #ecf0f1; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
                    ⌚
                </div>
                <h3>Smartwatch Sport</h3>
                <p class="price">299€</p>
            </div>
        </div>
       
        <div style="margin-top: 2rem; padding: 1rem; background-color: #fff3cd; border-left: 4px solid #ffc107;">
            <h3>¿Por qué esto NO es accesible?</h3>
            <ul style="margin-left: 2rem; margin-top: 1rem;">
                <li>Solo existe el menú desplegable multinivel como método de navegación</li>
                <li>No hay buscador interno</li>
                <li>No hay mapa del sitio</li>
                <li>No hay breadcrumbs (migas de pan)</li>
                <li>No hay enlaces relacionados ni otras formas de encontrar productos</li>
            </ul>
        </div>
    </main>
   
    <footer>
        <p>&copy; 2025 TechStore Online. Ejemplo NO Accesible para criterio WCAG 2.4.5-B</p>
    </footer>
</body>
</html>
|noa_barrera_explicacion=El sitio web presenta una violación del criterio 2.4.5-B al proporcionar
únicamente un menú de navegación desplegable multinivel como método para
localizar contenido. No incluye ninguna alternativa como buscador interno,
mapa del sitio, breadcrumbs, índice de contenidos o enlaces relacionados.
Esto obliga a todos los usuarios a utilizar el mismo método de navegación,
independientemente de sus capacidades o preferencias.
|noa_barrera_usuarios=- Usuarios con discapacidad cognitiva: Pueden tener dificultad recordando
  la estructura compleja del menú multinivel y perderse fácilmente en la
  jerarquía de categorías.
 
- Usuarios con discapacidad motora: Navegar por menús desplegables que
  requieren precisión con el ratón puede ser extremadamente difícil o
  imposible para personas con temblores o control motor limitado.
 
- Usuarios de lectores de pantalla: Deben escuchar toda la estructura
  del menú repetidamente para encontrar contenido, lo que resulta tedioso
  y consume mucho tiempo. Sin un buscador o mapa del sitio, no tienen forma
  rápida de acceder a páginas específicas.
 
- Usuarios con discapacidad visual: Sin breadcrumbs ni indicadores claros
  de ubicación, es difícil saber dónde se encuentran dentro del sitio.
 
- Usuarios con dispositivos de asistencia: Métodos alternativos de
  navegación son esenciales cuando los menús desplegables no funcionan
  bien con ciertos dispositivos adaptativos.
|acc_barrera_evidencia_img=Accesible245.png 2025 26 UFV 2.4.5-B ACC.png
|acc_barrera_evidencia_url=https://www.europarl.europa.eu/portal/en
|acc_barrera_evidencia_url=https://www.europarl.europa.eu/portal/en
|acc_barrera_explicacion=En este caso incluso teniendo una barra de búsqueda podemos encontrar un menú claro y ordenado al que llegar a todas las páginas del sitio web en la parte superior.
|acc_barrera_evidencia_html=<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tienda Online - Ejemplo ACCESIBLE 2.4.5-B</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
       
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: #000;
            color: white;
            padding: 8px;
            text-decoration: none;
            z-index: 100;
        }
       
        .skip-link:focus {
            top: 0;
        }
       
        header {
            background-color: #2c3e50;
            color: white;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
       
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }
       
        .search-bar {
            display: flex;
            gap: 0.5rem;
            margin: 1rem 0;
            flex: 1;
            max-width: 500px;
            margin-left: 2rem;
        }
       
        .search-bar input {
            flex: 1;
            padding: 0.5rem;
            border: none;
            border-radius: 3px;
        }
       
        .search-bar button {
            padding: 0.5rem 1rem;
            background-color: #1abc9c;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
       
        .search-bar button:hover {
            background-color: #16a085;
        }
       
        .breadcrumbs {
            background-color: #ecf0f1;
            padding: 0.5rem 2rem;
            font-size: 0.9rem;
        }
       
        .breadcrumbs a {
            color: #2c3e50;
            text-decoration: none;
        }
       
        .breadcrumbs a:hover {
            text-decoration: underline;
        }
       
        nav {
            background-color: #34495e;
            padding: 0;
        }
       
        nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }
       
        nav ul li {
            position: relative;
        }
       
        nav ul li a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 1rem 1.5rem;
            transition: background-color 0.3s;
        }
       
        nav ul li a:hover {
            background-color: #1abc9c;
        }
       
        nav ul li ul {
            display: none;
            position: absolute;
            background-color: #2c3e50;
            min-width: 200px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
       
        nav ul li:hover ul {
            display: block;
        }
       
        nav ul li ul li {
            width: 100%;
        }
       
        main {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
       
        .alert {
            background-color: #27ae60;
            color: white;
            padding: 1rem;
            margin-bottom: 2rem;
            border-radius: 5px;
        }
       
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
       
        .product-card {
            border: 1px solid #ddd;
            padding: 1rem;
            border-radius: 5px;
            text-align: center;
        }
       
        .product-card h3 {
            margin: 1rem 0 0.5rem;
        }
       
        .product-card .price {
            color: #e74c3c;
            font-size: 1.2rem;
            font-weight: bold;
        }
       
        .sidebar {
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-radius: 5px;
            margin-bottom: 2rem;
        }
       
        .sidebar h3 {
            margin-bottom: 1rem;
            color: #2c3e50;
        }
       
        .sidebar ul {
            list-style: none;
        }
       
        .sidebar ul li {
            margin-bottom: 0.5rem;
        }
       
        .sidebar ul li a {
            color: #2c3e50;
            text-decoration: none;
        }
       
        .sidebar ul li a:hover {
            color: #1abc9c;
            text-decoration: underline;
        }
       
        footer {
            background-color: #2c3e50;
            color: white;
            padding: 2rem;
            margin-top: 3rem;
        }
       
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
        }
       
        .footer-section h4 {
            margin-bottom: 1rem;
            color: #1abc9c;
        }
       
        .footer-section ul {
            list-style: none;
        }
       
        .footer-section ul li {
            margin-bottom: 0.5rem;
        }
       
        .footer-section ul li a {
            color: white;
            text-decoration: none;
        }
       
        .footer-section ul li a:hover {
            color: #1abc9c;
        }
       
        .footer-bottom {
            text-align: center;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid #34495e;
        }
    </style>
</head>
<body>
    <a href="#main-content" class="skip-link">Saltar al contenido principal</a>
   
    <header>
        <div class="logo">🛒 TechStore Online</div>
        <div class="search-bar">
            <input type="search" placeholder="Buscar productos..." aria-label="Buscar productos">
            <button type="submit">🔍 Buscar</button>
        </div>
    </header>
   
    <div class="breadcrumbs" role="navigation" aria-label="Migas de pan">
        <a href="#">Inicio</a> > <span>Productos Destacados</span>
    </div>
   
    <nav role="navigation" aria-label="Navegación principal">
        <ul>
            <li><a href="#">Inicio</a></li>
            <li>
                <a href="#">Electrónica ▼</a>
                <ul>
                    <li><a href="#">Ordenadores</a></li>
                    <li><a href="#">Smartphones</a></li>
                    <li><a href="#">Tablets</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Hogar ▼</a>
                <ul>
                    <li><a href="#">Electrodomésticos</a></li>
                    <li><a href="#">Muebles</a></li>
                    <li><a href="#">Decoración</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Deportes ▼</a>
                <ul>
                    <li><a href="#">Ropa deportiva</a></li>
                    <li><a href="#">Equipamiento</a></li>
                    <li><a href="#">Fitness</a></li>
                </ul>
            </li>
            <li><a href="#">Ofertas</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
   
    <main id="main-content">
        <div class="alert">
            <strong>✅ SITIO ACCESIBLE:</strong> Este sitio cumple con WCAG 2.4.5-B proporcionando múltiples vías de navegación.
        </div>
       
        <div style="display: grid; grid-template-columns: 250px 1fr; gap: 2rem;">
            <aside class="sidebar">
                <h3>Categorías Populares</h3>
                <ul>
                    <li><a href="#">📱 Smartphones</a></li>
                    <li><a href="#">💻 Portátiles</a></li>
                    <li><a href="#">🎧 Audio</a></li>
                    <li><a href="#">⌚ Wearables</a></li>
                    <li><a href="#">🎮 Gaming</a></li>
                </ul>
               
                <h3 style="margin-top: 2rem;">Enlaces Rápidos</h3>
                <ul>
                    <li><a href="#">🔥 Ofertas del día</a></li>
                    <li><a href="#">⭐ Más vendidos</a></li>
                    <li><a href="#">🆕 Novedades</a></li>
                    <li><a href="#">💰 Outlet</a></li>
                </ul>
            </aside>
           
            <div>
                <h1>Productos Destacados</h1>
               
                <div class="product-grid">
                    <div class="product-card">
                        <div style="width: 100%; height: 200px; background-color: #ecf0f1; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
                            💻
                        </div>
                        <h3>Portátil Gaming Pro</h3>
                        <p class="price">1.299€</p>
                    </div>
                   
                    <div class="product-card">
                        <div style="width: 100%; height: 200px; background-color: #ecf0f1; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
                            📱
                        </div>
                        <h3>Smartphone XL</h3>
                        <p class="price">899€</p>
                    </div>
                   
                    <div class="product-card">
                        <div style="width: 100%; height: 200px; background-color: #ecf0f1; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
                            🎧
                        </div>
                        <h3>Auriculares Bluetooth</h3>
                        <p class="price">149€</p>
                    </div>
                   
                    <div class="product-card">
                        <div style="width: 100%; height: 200px; background-color: #ecf0f1; display: flex; align-items: center; justify-content: center; border-radius: 5px;">
                            ⌚
                        </div>
                        <h3>Smartwatch Sport</h3>
                        <p class="price">299€</p>
                    </div>
                </div>
               
                <div style="margin-top: 2rem; padding: 1rem; background-color: #d4edda; border-left: 4px solid #28a745;">
                    <h3>✅ Múltiples vías de navegación implementadas:</h3>
                    <ul style="margin-left: 2rem; margin-top: 1rem;">
                        <li><strong>Buscador:</strong> Campo de búsqueda visible en el encabezado</li>
                        <li><strong>Menú de navegación:</strong> Menú principal con categorías</li>
                        <li><strong>Breadcrumbs:</strong> Migas de pan mostrando la ubicación actual</li>
                        <li><strong>Sidebar con enlaces:</strong> Categorías populares y enlaces rápidos</li>
                        <li><strong>Mapa del sitio:</strong> Disponible en el footer</li>
                        <li><strong>Enlaces relacionados:</strong> En cada sección</li>
                    </ul>
                </div>
            </div>
        </div>
    </main>
   
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>Sobre Nosotros</h4>
                <ul>
                    <li><a href="#">Quiénes somos</a></li>
                    <li><a href="#">Trabaja con nosotros</a></li>
                    <li><a href="#">Prensa</a></li>
                </ul>
            </div>
           
            <div class="footer-section">
                <h4>Ayuda</h4>
                <ul>
                    <li><a href="#">Contacto</a></li>
                    <li><a href="#">Envíos</a></li>
                    <li><a href="#">Devoluciones</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </div>
           
            <div class="footer-section">
                <h4>Categorías</h4>
                <ul>
                    <li><a href="#">Electrónica</a></li>
                    <li><a href="#">Hogar</a></li>
                    <li><a href="#">Deportes</a></li>
                    <li><a href="#">Moda</a></li>
                </ul>
            </div>
           
            <div class="footer-section">
                <h4>Mapa del Sitio</h4>
                <ul>
                    <li><a href="#"><strong>📄 Ver Mapa Completo del Sitio</strong></a></li>
                    <li><a href="#">Índice A-Z de productos</a></li>
                    <li><a href="#">Todas las categorías</a></li>
                </ul>
            </div>
        </div>
       
        <div class="footer-bottom">
            <p>&copy; 2025 TechStore Online. Ejemplo ACCESIBLE para criterio WCAG 2.4.5-B</p>
            <p>Cumple con las Pautas WCAG 2.2 Nivel AA</p>
        </div>
    </footer>
</body>
</html>
|acc_barrera_explicacion=Este sitio web cumple correctamente con el criterio 2.4.5-B al proporcionar
múltiples vías independientes para localizar contenido:
 
1. Buscador interno: Campo de búsqueda visible y accesible en el encabezado
  de todas las páginas, permitiendo búsqueda directa por palabras clave.
 
2. Menú de navegación principal: Menú jerárquico con categorías organizadas
  lógicamente.
 
3. Breadcrumbs (migas de pan): Indicadores de ubicación que muestran la
  ruta actual y permiten navegación rápida a niveles superiores.
 
4. Sidebar con enlaces directos: Categorías populares y enlaces rápidos a
  secciones destacadas (ofertas, más vendidos, novedades).
 
5. Mapa del sitio: Enlace visible en el footer que proporciona una vista
  completa de toda la estructura del sitio.
 
6. Enlaces relacionados: Organizados por secciones temáticas en el footer.
 
Esta implementación permite que usuarios con diferentes capacidades y
preferencias elijan el método de navegación que mejor se adapte a sus
necesidades, cumpliendo así con el principio de múltiples vías.
}}
}}

Revisión actual - 21:43 11 ene 2026

Edición de la página como formulario

1. Información básica

Id del criterio: 2.4.5 - Múltiples vías (Nivel: AA)
Título del subcriterio: 2.4.5-B
Universidad participante: UPSA
Curso académico: 2025-26

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.5-B


2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen
Archivo:NoAccesible245.png 2025 26 UFV 2.4.5-B NOA.png

b) Enlace de donde se ha obtenido la imagen:
https://www.pennyjuice.com/

2.1.2. Código HTML:

<!DOCTYPE html> Tienda Online - Ejemplo NO Accesible 2.4.5-B

⚠️ PROBLEMA DE ACCESIBILIDAD: Este sitio web SOLO tiene el menú de navegación como forma de encontrar productos. No hay buscador, mapa del sitio, ni otras alternativas.

Productos Destacados

💻

Portátil Gaming Pro

1.299€

📱

Smartphone XL

899€

🎧

Auriculares Bluetooth

149€

⌚

Smartwatch Sport

299€

¿Por qué esto NO es accesible?

  • Solo existe el menú desplegable multinivel como método de navegación
  • No hay buscador interno
  • No hay mapa del sitio
  • No hay breadcrumbs (migas de pan)
  • No hay enlaces relacionados ni otras formas de encontrar productos

© 2025 TechStore Online. Ejemplo NO Accesible para criterio WCAG 2.4.5-B



Explicación del problema detectado:
El sitio web presenta una violación del criterio 2.4.5-B al proporcionar únicamente un menú de navegación desplegable multinivel como método para localizar contenido. No incluye ninguna alternativa como buscador interno, mapa del sitio, breadcrumbs, índice de contenidos o enlaces relacionados. Esto obliga a todos los usuarios a utilizar el mismo método de navegación, independientemente de sus capacidades o preferencias.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
- Usuarios con discapacidad cognitiva: Pueden tener dificultad recordando 

 la estructura compleja del menú multinivel y perderse fácilmente en la 
 jerarquía de categorías.

- Usuarios con discapacidad motora: Navegar por menús desplegables que 

 requieren precisión con el ratón puede ser extremadamente difícil o 
 imposible para personas con temblores o control motor limitado.

- Usuarios de lectores de pantalla: Deben escuchar toda la estructura 

 del menú repetidamente para encontrar contenido, lo que resulta tedioso 
 y consume mucho tiempo. Sin un buscador o mapa del sitio, no tienen forma 
 rápida de acceder a páginas específicas.

- Usuarios con discapacidad visual: Sin breadcrumbs ni indicadores claros 

 de ubicación, es difícil saber dónde se encuentran dentro del sitio.

- Usuarios con dispositivos de asistencia: Métodos alternativos de 

 navegación son esenciales cuando los menús desplegables no funcionan 
 bien con ciertos dispositivos adaptativos.

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen
Archivo:Accesible245.png 2025 26 UFV 2.4.5-B ACC.png
b) Enlace de donde se ha obtenido la imagen:
https://www.europarl.europa.eu/portal/en


2.2.2 Código HTML:

<!DOCTYPE html> Tienda Online - Ejemplo ACCESIBLE 2.4.5-B

✅ SITIO ACCESIBLE: Este sitio cumple con WCAG 2.4.5-B proporcionando múltiples vías de navegación.

Productos Destacados

💻

Portátil Gaming Pro

1.299€

📱

Smartphone XL

899€

🎧

Auriculares Bluetooth

149€

⌚

Smartwatch Sport

299€

✅ Múltiples vías de navegación implementadas:

  • Buscador: Campo de búsqueda visible en el encabezado
  • Menú de navegación: Menú principal con categorías
  • Breadcrumbs: Migas de pan mostrando la ubicación actual
  • Sidebar con enlaces: Categorías populares y enlaces rápidos
  • Mapa del sitio: Disponible en el footer
  • Enlaces relacionados: En cada sección



Explicación de la solución aplicada:
Este sitio web cumple correctamente con el criterio 2.4.5-B al proporcionar múltiples vías independientes para localizar contenido:

1. Buscador interno: Campo de búsqueda visible y accesible en el encabezado 

  de todas las páginas, permitiendo búsqueda directa por palabras clave.

2. Menú de navegación principal: Menú jerárquico con categorías organizadas 

  lógicamente.

3. Breadcrumbs (migas de pan): Indicadores de ubicación que muestran la 

  ruta actual y permiten navegación rápida a niveles superiores.

4. Sidebar con enlaces directos: Categorías populares y enlaces rápidos a 

  secciones destacadas (ofertas, más vendidos, novedades).

5. Mapa del sitio: Enlace visible en el footer que proporciona una vista 

  completa de toda la estructura del sitio.

6. Enlaces relacionados: Organizados por secciones temáticas en el footer.

Esta implementación permite que usuarios con diferentes capacidades y preferencias elijan el método de navegación que mejor se adapte a sus necesidades, cumpliendo así con el principio de múltiples vías.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UPSA2.4.5-B-000&oldid=4307»