Componentes accesibles, con código

<button type="button">Guardar borrador</button>
<button type="submit">Enviar solicitud</button>

<button type="button" role="switch" aria-checked="false" class="switch">
  <span class="switch-track" aria-hidden="true"></span>
  Recibir avisos por correo
</button>

// Interruptor: un botón con role="switch". El botón ya responde a Enter y Espacio;
// solo hay que cambiar aria-checked, y el estilo visual se basa en ese atributo.
for (const sw of document.querySelectorAll('[role="switch"]')) {
  sw.addEventListener("click", () => {
    const on = sw.getAttribute("aria-checked") === "true";
    sw.setAttribute("aria-checked", String(!on));
  });
}

/* El estado visual sale del atributo ARIA */
.switch[aria-checked="true"] .switch-track { background: var(--accent); }
.switch[aria-checked="true"] .switch-track::after { transform: translateX(1.25rem); }

<label for="demo-email">Correo electrónico</label>
<p id="demo-email-ayuda">Te enviaremos la confirmación aquí.</p>
<input id="demo-email" type="email" autocomplete="email"
  aria-describedby="demo-email-ayuda" required>

<fieldset>
  <legend>Tipo de entrega</legend>
  <label><input type="radio" name="demo-entrega" value="domicilio" checked> A domicilio</label>
  <label><input type="radio" name="demo-entrega" value="tienda"> Recoger en tienda</label>
  <label><input type="radio" name="demo-entrega" value="punto"> Punto de recogida</label>
</fieldset>

<label for="demo-provincia">Provincia</label>
<select id="demo-provincia" name="provincia" autocomplete="address-level2">
  <option value="">Elige una provincia</option>
  <option>Álava</option>
  <option>Albacete</option>
  <option>Alicante</option>
</select>

<label for="ciudad">Ciudad</label>
<input id="ciudad" type="text" role="combobox" autocomplete="off"
  aria-autocomplete="list" aria-expanded="false" aria-controls="ciudad-lista">
<ul id="ciudad-lista" role="listbox" aria-label="Sugerencias" hidden></ul>
<p role="status" id="ciudad-estado" class="sr-only"></p>

const CIUDADES = ["Barcelona", "Bilbao", "Madrid", "Málaga", "Sevilla", "Valencia", "Zaragoza"];
const input = document.getElementById("ciudad");
const lista = document.getElementById("ciudad-lista");
const estado = document.getElementById("ciudad-estado");
let activa = -1;

function mostrar(opciones) {
  lista.replaceChildren(...opciones.map((texto, i) => {
    const li = document.createElement("li");
    li.id = "ciudad-op-" + i;
    li.setAttribute("role", "option");
    li.textContent = texto;
    li.addEventListener("click", () => elegir(texto));
    return li;
  }));
  lista.hidden = opciones.length === 0;
  input.setAttribute("aria-expanded", String(!lista.hidden));
  resaltar(-1);
}

function resaltar(i) {
  activa = i;
  [...lista.children].forEach((op, j) => op.setAttribute("aria-selected", String(j === i)));
  if (i >= 0) input.setAttribute("aria-activedescendant", lista.children[i].id);
  else input.removeAttribute("aria-activedescendant");
}

function elegir(texto) {
  input.value = texto;
  mostrar([]);
}

input.addEventListener("input", () => {
  const q = input.value.trim().toLowerCase();
  const opciones = q ? CIUDADES.filter((c) => c.toLowerCase().startsWith(q)) : [];
  mostrar(opciones);
  estado.textContent = opciones.length === 1 ? "1 sugerencia" : opciones.length + " sugerencias";
});

input.addEventListener("keydown", (e) => {
  const n = lista.children.length;
  if (e.key === "ArrowDown" && n) {
    e.preventDefault();
    resaltar((activa + 1) % n);
  } else if (e.key === "ArrowUp" && n) {
    e.preventDefault();
    resaltar((activa - 1 + n) % n);
  } else if (e.key === "Enter" && activa >= 0) {
    e.preventDefault();
    elegir(lista.children[activa].textContent);
  } else if (e.key === "Escape") {
    mostrar([]);
  }
});

/* La opción resaltada tiene que verse, no solo anunciarse */
[role="option"][aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

<label for="ciudad-nativa">Ciudad</label>
<input id="ciudad-nativa" list="ciudades">
<datalist id="ciudades">
  <option value="Barcelona"></option>
  <option value="Madrid"></option>
  <option value="Sevilla"></option>
</datalist>

<a href="/criterios/">Ver los criterios WCAG</a>

<!-- Si descarga un archivo, dilo en el texto -->
<a href="/guia.pdf">Guía de accesibilidad (PDF, 1,2 MB)</a>

<body>
  <a href="#contenido">Saltar al contenido</a>
  <header>
    <search>…buscador…</search>
  </header>
  <nav aria-label="Principal">…</nav>
  <main id="contenido">
    <h1>Título de la página</h1>
  </main>
  <footer>…</footer>
</body>

<div class="tabs">
  <div role="tablist" aria-label="Información del producto">
    <button type="button" role="tab" id="tab-desc" aria-selected="true" aria-controls="panel-desc">Descripción</button>
    <button type="button" role="tab" id="tab-tallas" aria-selected="false" aria-controls="panel-tallas" tabindex="-1">Tallas</button>
    <button type="button" role="tab" id="tab-envio" aria-selected="false" aria-controls="panel-envio" tabindex="-1">Envío</button>
  </div>
  <div role="tabpanel" id="panel-desc" aria-labelledby="tab-desc" tabindex="0">…</div>
  <div role="tabpanel" id="panel-tallas" aria-labelledby="tab-tallas" tabindex="0" hidden>…</div>
  <div role="tabpanel" id="panel-envio" aria-labelledby="tab-envio" tabindex="0" hidden>…</div>
</div>

// Pestañas con activación automática: las flechas cambian de pestaña y muestran su panel.
// Solo la pestaña activa está en el orden de Tab (tabindex 0); el resto tiene -1.
for (const list of document.querySelectorAll('[role="tablist"]')) {
  const tabs = [...list.querySelectorAll('[role="tab"]')];

  function select(tab) {
    for (const t of tabs) {
      const active = t === tab;
      t.setAttribute("aria-selected", String(active));
      t.tabIndex = active ? 0 : -1;
      document.getElementById(t.getAttribute("aria-controls")).hidden = !active;
    }
    tab.focus();
  }

  list.addEventListener("click", (e) => {
    const tab = e.target.closest('[role="tab"]');
    if (tab) select(tab);
  });

  list.addEventListener("keydown", (e) => {
    const i = tabs.indexOf(document.activeElement);
    const next = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[e.key];
    if (next === undefined) return;
    e.preventDefault();
    select(tabs[(next + tabs.length) % tabs.length]);
  });
}

<nav aria-label="Principal">
  <button type="button" aria-expanded="false" aria-controls="menu-servicios">Servicios</button>
  <ul id="menu-servicios" hidden>
    <li><a href="/auditorias">Auditorías</a></li>
    <li><a href="/formacion">Formación</a></li>
  </ul>
</nav>

const boton = document.querySelector('[aria-controls="menu-servicios"]');
const menu = document.getElementById("menu-servicios");

function mostrar(abrir) {
  boton.setAttribute("aria-expanded", String(abrir));
  menu.hidden = !abrir;
}

boton.addEventListener("click", () => mostrar(menu.hidden));

// Esc cierra y devuelve el foco al botón
boton.parentElement.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && !menu.hidden) {
    mostrar(false);
    boton.focus();
  }
});

<details name="demo-faq">
  <summary>¿Cuánto tarda el envío?</summary>
  <p>Entre 24 y 48 horas en la península.</p>
</details>
<details name="demo-faq">
  <summary>¿Puedo devolver un pedido?</summary>
  <p>Sí, durante 30 días desde la entrega.</p>
</details>

<table>
  <caption>Multas según la gravedad</caption>
  <thead>
    <tr><th scope="col">Infracción</th><th scope="col">Multa</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Leve</th><td>301 € a 30.000 €</td></tr>
    <tr><th scope="row">Grave</th><td>30.001 € a 90.000 €</td></tr>
    <tr><th scope="row">Muy grave</th><td>90.001 € a 1.000.000 €</td></tr>
  </tbody>
</table>

<figure>
  <img src="ventas.png" alt="Las ventas online crecieron un 30 % entre 2024 y 2026.">
  <figcaption>Evolución de las ventas online, 2024 a 2026.</figcaption>
</figure>

<img src="separador.svg" alt="">

<section class="carrusel" aria-roledescription="carrusel" aria-label="Ofertas destacadas">
  <button type="button" class="pausa">Pausar</button>
  <button type="button" class="anterior">Anterior</button>
  <button type="button" class="siguiente">Siguiente</button>
  <div class="diapositivas" aria-live="off">
    <div role="group" aria-roledescription="diapositiva" aria-label="1 de 3">…</div>
    <div role="group" aria-roledescription="diapositiva" aria-label="2 de 3" hidden>…</div>
    <div role="group" aria-roledescription="diapositiva" aria-label="3 de 3" hidden>…</div>
  </div>
</section>

const carrusel = document.querySelector(".carrusel");
const zona = carrusel.querySelector(".diapositivas");
const diapositivas = [...zona.children];
const pausa = carrusel.querySelector(".pausa");
let actual = 0;
let timer = null;

function mostrar(i) {
  actual = (i + diapositivas.length) % diapositivas.length;
  diapositivas.forEach((d, j) => (d.hidden = j !== actual));
}

function reproducir(si) {
  clearInterval(timer);
  timer = si ? setInterval(() => mostrar(actual + 1), 6000) : null;
  pausa.textContent = si ? "Pausar" : "Reproducir";
  // Mientras gira solo, no se anuncia cada cambio
  zona.setAttribute("aria-live", si ? "off" : "polite");
}

pausa.addEventListener("click", () => reproducir(!timer));
carrusel.querySelector(".anterior").addEventListener("click", () => {
  reproducir(false);
  mostrar(actual - 1);
});
carrusel.querySelector(".siguiente").addEventListener("click", () => {
  reproducir(false);
  mostrar(actual + 1);
});
carrusel.addEventListener("focusin", () => reproducir(false));

reproducir(!matchMedia("(prefers-reduced-motion: reduce)").matches);

<button type="button" id="demo-abrir">Ver condiciones de envío</button>

<dialog id="demo-dialogo" aria-labelledby="demo-dialogo-titulo">
  <h2 id="demo-dialogo-titulo">Condiciones de envío</h2>
  <p>Envío gratis a partir de 50 €. Devoluciones en 30 días.</p>
  <form method="dialog">
    <button>Cerrar</button>
  </form>
</dialog>

<script>
  const dialogo = document.getElementById("demo-dialogo");
  document.getElementById("demo-abrir").addEventListener("click", () => dialogo.showModal());
</script>

<label for="demo-subida">Subiendo documento</label>
<progress id="demo-subida" max="100" value="60">60 %</progress>

<label for="demo-fuerza">Seguridad de la contraseña</label>
<meter id="demo-fuerza" min="0" max="4" low="2" high="3" optimum="4" value="3">Buena</meter>

<button type="button" class="guardar">Guardar cambios</button>
<div class="avisos" role="status"></div>

const avisos = document.querySelector(".avisos");

function avisar(texto) {
  const aviso = document.createElement("div");
  aviso.className = "aviso";
  const mensaje = document.createElement("p");
  mensaje.textContent = texto;
  const cerrar = document.createElement("button");
  cerrar.type = "button";
  cerrar.textContent = "Cerrar aviso";
  cerrar.addEventListener("click", () => aviso.remove());
  aviso.append(mensaje, cerrar);
  avisos.append(aviso);
}

document.querySelector(".guardar").addEventListener("click", () => avisar("Cambios guardados."));

<button type="button">Añadir a favoritos</button>

<div role="button" tabindex="0" class="favorito">Añadir a favoritos</div>

<script>
  const favorito = document.querySelector(".favorito");
  favorito.addEventListener("click", anadirFavorito);
  favorito.addEventListener("keydown", (e) => {
    if (e.key === "Enter") anadirFavorito();
    if (e.key === " ") e.preventDefault();  // evita que la página se desplace
  });
  favorito.addEventListener("keyup", (e) => {
    if (e.key === " ") anadirFavorito();
  });
</script>