¿Cómo resuelvo en código los patrones que más fallan: botón o enlace, salto al contenido, texto oculto y ventanas modales?

Los elementos nativos de HTML traen de regalo lo que más cuesta programar: foco, activación con teclado, nombre y función para las tecnologías de apoyo. Usarlos bien es la forma más rápida y barata de que un componente sea accesible.

• Enlace (<a href>): lleva a otro lugar, otra página o una sección de la misma página. Se activa con Enter.
• Botón (<button>): hace algo en la página: abrir un menú, enviar un formulario, mostrar un modal. Se activa con Enter y con la barra espaciadora.

<!-- Navega: enlace -->
<a href="/contacto">Escribinos</a>

<!-- Hace algo en la página: botón -->
<button type="button" aria-expanded="false" aria-controls="menu-principal">
  Menú
</button>

El botón del menú tiene que cambiar aria-expanded a true cuando el menú se abre. Si el botón solo tiene un ícono, sumale un nombre: aria-label="Buscar".

Permite a quien navega con teclado saltar el menú, que se repite en cada página (WCAG 2.4.1). Va como primer elemento del body y se ve al recibir el foco:

<a href="#contenido" class="saltar">Saltar al contenido</a>
...
<main id="contenido" tabindex="-1">

.saltar {
  position: absolute;
  left: 1rem;
  top: -100%;
}
.saltar:focus {
  top: 1rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: #111111;
  color: #ffffff;
}

El tabindex="-1" en el main asegura que el foco pase de verdad al contenido en todos los navegadores.

A veces hace falta sumar contexto que no se ve, como «(se abre en otra pestaña)» o el nombre de un botón con ícono. Esta clase oculta el texto en pantalla sin ocultarlo para el lector:

.solo-lector {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

No uses display: none ni visibility: hidden para esto: ocultan el texto también para el lector de pantalla.

El elemento <dialog> abierto con showModal() ya resuelve casi todo: mantiene el foco dentro, deja el resto de la página inerte y se cierra con Escape.

<button type="button" id="abrir-aviso">Ver condiciones</button>

<dialog id="aviso" aria-labelledby="aviso-titulo">
  <h2 id="aviso-titulo">Condiciones de inscripción</h2>
  <p>La inscripción cierra el 10 de diciembre.</p>
  <button type="button" id="cerrar-aviso">Cerrar</button>
</dialog>

const aviso = document.getElementById('aviso');
const abrir = document.getElementById('abrir-aviso');

abrir.addEventListener('click', () => aviso.showModal());
document.getElementById('cerrar-aviso').addEventListener('click', () => aviso.close());

// Al cerrarse (con el botón o con Escape), el foco vuelve al botón que lo abrió
aviso.addEventListener('close', () => abrir.focus());

Si armás el modal sin dialog, tenés que resolver a mano el foco inicial, mantenerlo dentro, cerrar con Escape, devolver el foco y ocultar el resto de la página a las tecnologías de apoyo.

• Trampa de foco vs. foco contenido: WCAG 2.1.2 pide que nunca quede el foco atrapado sin salida. Un modal que mantiene el foco adentro está bien siempre que se pueda cerrar con Escape o con un botón.
• href="#" en un botón: si no navega, es un botón. Un enlace falso se anuncia como enlace y no responde a la barra espaciadora.
• tabindex positivo: tabindex="1" o mayor altera el orden natural del foco y casi siempre genera más problemas. Usá 0 para hacer enfocable algo que no lo es y -1 para enfocarlo solo por código.

Revisado en noviembre de 2026 con la documentación de dialog en MDN y la Guía de prácticas de ARIA del W3C (en inglés). Para los atributos ARIA, consultá ARIA Hub.