Técnica HTML WCAG 2.2

H102Crear diálogos modales con el elemento dialog de HTML

En resumen

Esta técnica propone construir las ventanas modales con el elemento nativo dialog de HTML en lugar de recrearlas con ARIA y scripts propios. El navegador se encarga de mover el foco al diálogo, retenerlo dentro, devolverlo al botón de origen al cerrar y de hacer inerte el resto de la página, lo que beneficia a quienes navegan con teclado o lector de pantalla. Úsela siempre que necesite un diálogo modal accesible con poco esfuerzo.

Aplicabilidad

HTML

Descripción

Quienes desarrollan sitios web suelen utilizar diálogos modales para centrar la atención del usuario en una información o en una actividad relacionada con una tarea que queda fuera del ámbito del contenido principal de la página. Los diálogos modales pueden construirse en el marcado mediante la función dialog de ARIA y sus atributos relacionados, o mediante el elemento dialog de HTML. Además de cumplir la primera regla de ARIA, el elemento dialog de HTML ofrece varias ventajas frente a su equivalente en ARIA, ya que el navegador se encarga de estas funciones:

el foco del teclado se mueve al dialog modal que se acaba de abrir;
el foco del teclado vuelve al elemento que invocó el diálogo (suponiendo que el elemento siga en la página) cuando se cierra el dialog modal;
el foco del teclado se limita al contenido del dialog modal y a la interfaz del propio navegador (es decir, la interfaz de usuario específica del navegador, como la barra de direcciones, etc.);
el contenido de la página «fuera» del diálogo modal pasa a ser inerte, lo que hace que quede oculto para las tecnologías de asistencia e inoperable para todos los usuarios mientras el dialog modal permanezca abierto;
el uso de la tecla Escape para cerrar el dialog modal.

Esta técnica utiliza el elemento dialog de HTML en lugar de una implementación ARIA a medida, lo que reduce el esfuerzo necesario para crear un diálogo modal accesible.

Ejemplos

Un diálogo para suscribirse a una lista de correo

Este es un ejemplo de uso de un elemento dialog modal para mostrar al usuario un formulario de suscripción a una lista de correo. La parte principal de la página contiene un elemento button que, al activarse, invoca el dialog modal. El button usa el atributo type para indicar al navegador que no se trata de un button de tipo submit.

Cuando se abre el dialog modal, el navegador trata todo el contenido que queda fuera del diálogo modal como inerte, de modo que lo vuelve inoperable y lo oculta a las tecnologías de asistencia. Por ejemplo, un lector de pantalla no podrá alcanzar ni anunciar ninguna parte del contenido inerte. Además, como el contenido de la página es inerte, el foco del teclado solo podrá llegar a los elementos enfocables que estén dentro del elemento dialog y a los controles del navegador. Al invocarlo, el navegador coloca automáticamente el foco en el primer elemento enfocable del DOM del diálogo. En este ejemplo, el elemento h1 recibirá el foco porque tiene un atributo tabindex="-1". Tenga en cuenta que, aunque el button de cierre del dialog aparece visualmente antes del h1, es el último elemento del DOM del dialog. Si el button estuviera primero, sería el que recibiría el foco al abrirse el diálogo.

El HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
     initial-scale=1, shrink-to-fit=no">
    <title>Turbo Encabulator News</title>
  </head>
  <body>
    <main>
      <h1>All The News About Turbo Encabulators</h1>
      <button class="open-modal" type="button">Sign up to our mailing list!</button>
    </main>
    <dialog aria-labelledby="dialog-heading" id="mailing-list-dialog">
      <h1 id="dialog-heading" tabindex="-1">Sign up to our mailing list</h1>
      <form>
        <p class="req-note">All form fields are required.</p>
        <div>
          <label for="fname">First Name</label>
          <input aria-required="true" autocomplete="given-name" id="fname" type="text">
        </div>
        <div>
          <label for="lname">Last Name</label>
          <input aria-required="true" autocomplete="family-name" id="lname" type="text">
        </div>
        <div>
          <label for="email">Email address</label>
          <input aria-required="true" autocomplete="email" id="email" type="text">
        </div>
        <button class="sign-up" type="submit">Sign up</button>
      </form>
     <form method="dialog">
        <button aria-label="close" class="close-modal">&times;</button>
      </form>
    </dialog>
  </body>
</html>

El CSS

*, *::after, *::before {
  box-sizing: inherit;
}
body {
  background:#fff;
  color:#000;
  font:1rem/1.5 system-ui, Helvetica, Roboto, sans-serif;
}
*:focus-visible {
  outline:1px solid #0054AE;
  outline-offset:1px;
}
dialog {
  border:1px solid #000;
  padding:2rem;
  position:relative;
}
dialog::backdrop {
  background-color:hsla(0, 0%, 0%, .5);
}
.close-modal {
  inset-block-start:1.5rem;  
  inset-inline-end:1.5rem;  
  line-height:1.3;
  padding:0.25em 0.5em;
  position:absolute;
}
.sign-up {
  background:#000;
  color:#fff;
  padding:0.25em;
}
dialog h1 {
  display:inline-block;
  line-height:1.3333;
  margin:0;
  max-inline-size:95%;
}
form {
  display:grid;
  grid-gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.req-note, .sign-up {
  grid-column:1 / -1;
}
label {
  display:block;
}
input {
  border:1px solid hsl(0, 0%, 50%);
  font:inherit;
  inline-size:calc(100% - 4px);
}
button {
  background:#fff;
  border:1px solid hsl(0, 0%, 50%);
  border-radius:3px;
  color:inherit;
  font:inherit;
  margin:0;
}

El JavaScript

El script es necesario para mostrar el dialog cuando se invoca. El elemento dialog de HTML puede abrirse con dos órdenes distintas: show() (para dialog no modales) y showModal() (para dialog modales), que es la que se usa en este ejemplo.

Nota: en lugar de escribir una función para cerrar el dialog, el botón de cierre está anidado dentro de un elemento form independiente con un atributo method="dialog". Este método permite cerrar el diálogo al activar dicho botón, y el navegador se encargará de devolver el foco del teclado al elemento que lo invocó.

document.addEventListener("DOMContentLoaded", function(e){
  const d = document.querySelector("dialog");
  const btnOpen = document.querySelector(".open-modal");
  btnOpen.addEventListener("click", function(){
    d.showModal();
  }, false);
});

Pruebas

Procedimiento

Localizar los componentes de la página que invocan elementos dialog modales.
Comprobar que cada dialog puede abrirse usando el teclado para activar el elemento que lo invoca (por ejemplo, activar un button pulsando la tecla Intro o la barra espaciadora).
Cuando se abre el dialog modal, comprobar que el foco se ha movido a él o a uno de sus descendientes enfocables.
Mientras el dialog modal está abierto, comprobar que el foco del teclado no puede moverse a los elementos del documento principal.
Cuando se cierra el dialog modal, comprobar que el foco vuelve al elemento que lo invocó, si dicho elemento sigue existiendo en la página.

Resultados esperados

Las comprobaciones n.º 2, n.º 3, n.º 4 y n.º 5 son verdaderas.

Recursos

HTML: el elemento dialog.
HTML: el elemento button.
ARIA Authoring Practices Guide - dialog (modal) pattern (patrón de diálogo modal).
Using ARIA.

Cómo lo comprobamos en ADDAW

En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H102 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.