Modal

El componente de modal está construido para ser accesible mediante navegación por teclado y reconocible por lectores de pantalla, comunicando su estado de forma clara.

• Tab / Shift + Tab
  Permiten navegar únicamente entre los elementos interactivos dentro del modal. El foco queda atrapado mientras el modal esté abierto (focus trap).
• Enter / Space
  Activan el elemento enfocado, como botones de acción.
• Escape (ESC)
  Cierra el modal y devuelve el foco al elemento que lo activó, siempre que el cierre esté habilitado.

Al abrirse el modal, el foco debe posicionarse automáticamente en el primer elemento interactivo relevante (generalmente el botón primario si es un modal sin campos).

Mientras el modal esté visible, el contenido de fondo no debe ser navegable ni interactivo.

Cuando se cierra el modal, el foco debe volver al elemento que activó el modal. Esto permite a los usuarios de teclados y lectores de pantalla continuar el contexto en el que abrieron originalmente el modal.

Para cumplir con buenas prácticas de accesibilidad (WCAG + WAI-ARIA), recomendamos proporcionar etiquetas accesible alternativa que comunique claramente el estado del componente.

Recomendamos:

• Role="dialog". Define el contenedor del modal como un cuadro de diálogo.
• Vincular el título del modal con el contenedor del diálogo con aria-labelledby, permitiendo que los lectores de pantalla anuncien correctamente el encabezado al abrirse.
• Asociar la descripción adicional (opcional) mediante aria-describedby, cuando exista contenido explicativo y simple. Es aconsejable omitir la especificación aria-describedby si el contenido del modal incluye estructuras semánticas, como listas, tablas o varios párrafos, que deben percibirse para comprender fácilmente el contenido, es decir, si el contenido sería difícil de entender cuando se anuncia como una sola cadena ininterrumpida.

<div class="modal fade" tabindex="-1" id="exampleModal1" role=”dialog” aria-modal=”true” aria-labelledby="exampleModal1Label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModal1Label">¡Importante!</h4> </div>
            <div class="modal-body">
                <p id=”exampleModal1Label”> Antes de realizar la ficha de salud, tené en cuenta haber realizado los pasos previos correspondientes. </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal"> Volver atrás </button>
                <button type="button" class="btn btn-primary">Continuar</button>
            </div>
        </div>
    </div>
</div>

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

La presentación visual de texto y de imágenes de texto tiene una relación de contraste de por lo menos 4.5:1, excepto textos grandes e imágenes de texto grande que tienen un contraste de por lo menos 3:1, textos o imágenes que son parte de un componente inactivo de interfaz de usuario o son pura decoración, o logotipos.

Excepto por los subtítulos e imágenes de texto, el texto puede redimensionarse hasta un 200 % sin tecnología de asistencia, sin pérdida de contenido ni funcionalidad.

El contenido puede presentarse sin pérdida de información o funcionalidad y sin necesidad de desplazarse en dos dimensiones, siempre que el desplazamiento vertical se ajuste a un ancho equivalente a 320 píxeles CSS y el desplazamiento horizontal a una altura equivalente a 256 píxeles CSS, excepto en aquellas partes del contenido que requieran un diseño bidimensional para su uso o significado.

Todas las funcionalidades del contenido se puede operar a través de una interfaz de teclado.

Si el foco del teclado puede moverse a un componente de la página utilizando una interfaz de teclado, también debe ser posible mover el foco fuera de ese componente usando únicamente la misma interfaz de teclado. Si se requiere algo más que las teclas de flecha, tabulador u otros métodos estándar para salir, se debe informar al usuario sobre el método necesario para mover el foco.

Si una página web puede navegarse de forma secuencial y las secuencias de navegación afectan el significado o la operación, los componentes enfocables reciben el foco en un orden que preserve el significado y la operabilidad.

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible.

Los mecanismos de navegación que se repiten en varias páginas web dentro de un conjunto de páginas aparecen en el mismo orden relativo cada vez que se repiten, a menos que el usuario inicie un cambio.

Para todos los componentes de la interfaz de usuario (incluidos, entre otros: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función se pueden determinar mediante programación; los estados, propiedades y valores que puede establecer el usuario se pueden configurar mediante programación; y la notificación de cambios en estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia.