2526UPSA3.2.6-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_3/3.2_Predecible/3.2.6-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.miyakisalamanca.es/
2.1.2. Código HTML:
<header class="header header-style-4 fixed">
<div class="navigation flex-align">
<!-- ÚNICO ELEMENTO VISIBLE DEL NAVBAR -->
<a href="/index" class="logo" style="margin: 0 auto;">
<img src="/uploads/bases/1712075840.png" alt="Miyaki" class="web_logo">
</a>
</div>
</header>
Explicación del problema detectado:
En el caso de la página de este restaurante, el problema detectado es que el mecanismo de ayuda "Contacto" no se mantiene consistente entre páginas: en la página principal aparece en el navbar superior como enlace directo, pero en la página de reservas el navbar desaparece y el contacto pasa a mostrarse en otra zona (footer) y junto a otros elementos, cambiando su ubicación y orden relativo. Esto rompe la previsibilidad del sitio, obliga al usuario a volver a buscar cómo contactar y supone un incumplimiento del criterio 3.2.6 (Ayuda consistente) porque la ayuda no se presenta de forma uniforme dentro del conjunto de páginas.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este problema afecta principalmente a personas con discapacidad cognitiva, usuarios con baja experiencia digital y personas que utilizan tecnologías de asistencia, ya que dependen de la repetición y la previsibilidad para localizar los mecanismos de ayuda. La barrera que se genera es de orientación y comprensión, porque al cambiar la ubicación y el orden del contacto entre páginas el usuario no sabe dónde buscar la ayuda, pierde tiempo, aumenta la carga cognitiva y puede abandonar la tarea sin conseguir soporte.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.miyakisalamanca.es/reserve_page
2.2.2 Código HTML:
<header class="header header-style-4 fixed">
<div class="navigation flex-align">
<!-- Navbar completo (simple) -->
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/index">
<img alt="Logo Miyaki" src="/uploads/bases/1712075840.png" style="width: 70%;">
</a>
</div>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><a href="/index#home">Inicio</a></li>
<li><a href="/index#about">Sobre Nosotros</a></li>
<li><a href="/reserve_page">Reserva Mesa</a></li>
<li><a href="/product">Nuestra carta</a></li>
<li><a href="/index#inside">Restaurante</a></li>
<li><a href="/index#contact">Contacto</a></li>
</ul>
</nav>
</div>
</div>
</header>
Explicación de la solución aplicada:
En esta solución se ha hecho un cambio simple pero directo: se ha copiado el navbar de la página principal y se ha insertado en la página de reservas, que era donde antes el encabezado solo mostraba el logo y el acceso a "Contacto" aparecía en otra zona (footer) y con otro orden. Con esto, el mecanismo de ayuda "Contacto" vuelve a estar en el mismo lugar y en el mismo orden relativo que en el resto del sitio, haciendo la navegación más predecible y cumpliendo el criterio 3.2.6 (Ayuda consistente).
