Así se construye una web que más personas pueden usar

<!doctype html>
<html lang="es-CO">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pausa visual · Ejemplo John Dalton</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <a class="skip-link" href="#contenido">Saltar al contenido</a>
  <header>
    <p class="eyebrow">John Dalton · Laboratorio web</p>
    <h1>Un temporizador que puedes modificar</h1>
    <p>Un ejemplo educativo con HTML, CSS y JavaScript, sin bibliotecas ni conexión a internet.</p>
  </header>
  <main id="contenido">
    <section class="timer" data-timer data-duration="10" aria-labelledby="timer-titulo">
      <h2 id="timer-titulo">Prueba de diez segundos</h2>
      <p>Inicia la cuenta, haz una pausa y reanuda cuando quieras. Reiniciar devuelve el tiempo al valor original y detiene la cuenta.</p>
      <p class="time-label">Tiempo restante <span class="time" data-timer-display>00:10</span></p>
      <p class="status" data-timer-status role="status">Activa JavaScript para usar el temporizador.</p>
      <div class="controls" data-timer-controls hidden>
        <button type="button" data-timer-toggle>Iniciar</button>
        <button type="button" class="secondary" data-timer-reset>Reiniciar</button>
      </div>
      <noscript><p>Puedes seguir leyendo y editar el código. La cuenta necesita JavaScript.</p></noscript>
    </section>
    <section aria-labelledby="experimento-titulo">
      <h2 id="experimento-titulo">Haz un experimento</h2>
      <p>Cambia <code>data-duration="10"</code> por <code>data-duration="20"</code>, guarda este archivo y vuelve a abrirlo. El número expresa la duración en segundos.</p>
      <p>El aviso final es un recordatorio de práctica; este ejemplo no evalúa tu visión ni reemplaza una valoración profesional.</p>
    </section>
  </main>
  <footer><p>John Dalton · Ejemplo para aprender programación y accesibilidad.</p></footer>
</body>
</html>

Los atributos data- guardan información que lee el script; hidden oculta los controles hasta que estén listos.

/* Estilos autónomos: no necesitan los archivos del portal. */
:root {
  font-family: system-ui, sans-serif;
  color: #121c27;
  background: #f7f9ff;
  line-height: 1.6;
}
* { box-sizing: border-box; }
body { max-width: 48rem; margin: 0 auto; padding: 2rem; }
h1, h2 { color: #00355f; line-height: 1.2; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.5rem; }
section { margin-block: 2rem; }
.eyebrow { color: #006972; font-weight: 700; }
.timer { padding: 2rem; border: 1px solid #d5dce2; border-radius: 1rem; background: #fff; }
.time-label { text-align: center; }
.time { display: block; font-size: 3rem; font-weight: 750; font-variant-numeric: tabular-nums; color: #00355f; }
.status { min-height: 3.2em; text-align: center; }
.controls { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
button { border: 2px solid #00355f; border-radius: .5rem; padding: .7rem 1.1rem; font: inherit; font-weight: 700; color: #fff; background: #00355f; cursor: pointer; }
button.secondary { background: #fff; color: #00355f; }
button:hover { background: #006972; border-color: #006972; color: #fff; }
a { color: #00355f; }
:focus-visible { outline: 3px solid #006972; outline-offset: 4px; }
code { font-size: .95em; overflow-wrap: anywhere; }
footer { border-top: 1px solid #d5dce2; margin-top: 2rem; }
.skip-link { position: absolute; top: .5rem; left: .5rem; padding: .6rem; background: #fff; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
[hidden] { display: none !important; }

Observa las unidades relativas, el foco visible y los controles que pueden ocupar otra línea.

(() => {
  'use strict';

  document.querySelectorAll('[data-timer]').forEach(contenedor => {
    const duracion = Number(contenedor.dataset.duration) * 1000;
    const pantalla = contenedor.querySelector('[data-timer-display]');
    const estado = contenedor.querySelector('[data-timer-status]');
    const alternar = contenedor.querySelector('[data-timer-toggle]');
    const reiniciar = contenedor.querySelector('[data-timer-reset]');
    const controles = contenedor.querySelector('[data-timer-controls]');
    if (!Number.isFinite(duracion) || duracion <= 0 || !pantalla || !estado || !alternar || !reiniciar || !controles) return;

    let restante = duracion;
    let fin = 0;
    let intervalo = null;
    let enMarcha = false;
    let terminado = false;

    function mostrarTiempo() {
      const segundos = Math.ceil(restante / 1000);
      pantalla.textContent = `${String(Math.floor(segundos / 60)).padStart(2, '0')}:${String(segundos % 60).padStart(2, '0')}`;
    }

    function detener() {
      clearInterval(intervalo);
      intervalo = null;
      enMarcha = false;
    }

    function actualizar() {
      // La hora de llegada evita sumar el retraso de una pestaña en segundo plano.
      restante = Math.max(0, fin - Date.now());
      mostrarTiempo();
      if (restante === 0) {
        detener();
        terminado = true;
        alternar.textContent = 'Volver a iniciar';
        estado.textContent = 'Cuenta terminada. Puedes hacer una pausa y apartar la mirada de la pantalla.';
      }
    }

    alternar.addEventListener('click', () => {
      if (enMarcha) {
        actualizar();
        if (!enMarcha) return;
        detener();
        alternar.textContent = 'Reanudar';
        estado.textContent = 'Temporizador en pausa.';
        return;
      }

      if (terminado) {
        restante = duracion;
        terminado = false;
      }
      fin = Date.now() + restante;
      enMarcha = true;
      alternar.textContent = 'Pausar';
      estado.textContent = 'Temporizador en marcha.';
      mostrarTiempo();
      intervalo = setInterval(actualizar, 250);
    });

    reiniciar.addEventListener('click', () => {
      detener();
      restante = duracion;
      terminado = false;
      alternar.textContent = 'Iniciar';
      estado.textContent = 'Temporizador reiniciado. Listo para iniciar.';
      mostrarTiempo();
    });

    mostrarTiempo();
    controles.hidden = false;
    estado.textContent = 'Listo para iniciar.';
  });
})();

Date.now() consulta la hora actual. La cuenta compara esa hora con la de llegada: así descuenta el retraso si el navegador actualiza más tarde.