2526UFV2.4.3-B-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.3-B
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:
<button onclick="document.getElementById('modal').style.display='block'">
Open information
</button>
<div id="modal" style="display:none; margin-top:20px; border:1px solid #000; padding:10px;">
<p>This is additional information displayed dynamically.</p>
<button>Close</button>
</div>
<a href="#">Go to footer link</a>
Explicación del problema detectado:
In this example, new content appears dynamically after the user activates a control, but the navigation order is not updated accordingly. The focus does not move to the newly displayed content, and users may continue navigating to elements that are visually behind or outside of the active content. This results in an illogical navigation sequence that does not match the visual order of the page, failing criterion 2.4.3-B.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Users who navigate using the keyboard may not realize that new content has appeared, as the focus remains elsewhere on the page. This can cause confusion and disorientation, especially for users who cannot see the screen or who rely on a predictable navigation order. Users may unintentionally skip important information or interact with elements that are no longer relevant, making the interface difficult to use.
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:
<button onclick="openModal()">
Open information
</button>
<div id="modal" style="display:none; margin-top:20px; border:1px solid #000; padding:10px;">
<p>This is additional information displayed dynamically.</p>
<button onclick="closeModal()">Close</button>
</div>
<script>
function openModal() {
var modal = document.getElementById('modal');
modal.style.display = 'block';
modal.querySelector('button').focus();
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
}
</script>
Explicación de la solución aplicada:
In the accessible version, when new content is displayed dynamically, the navigation order is updated so that users are taken directly to the new content. The focus follows the visual changes on the page, ensuring a logical and predictable navigation sequence. This allows users who rely on keyboard navigation or assistive technologies to understand when content changes and to interact with it efficiently, satisfying criterion 2.4.3-B.
