Interactividad y Accesibilidad

Etiquetas que mejoran la experiencia de usuario y la accesibilidad web.

tabindex Accesibilidad

Controla el enfoque del teclado. tabindex="0" hace el elemento enfocable en el orden natural del DOM. tabindex="-1" lo hace enfocable solo por JavaScript (el.focus()), no con Tab. Evita valores positivos (tabindex="2") — crean un orden de foco imprevisible y rompen la accesibilidad.

Enfocable con Tab (div con tabindex="0")
Segundo elemento enfocable
contenteditable Interactivo

Hace cualquier elemento editable en el navegador. Valores: true (editable), false (no editable), plaintext-only (solo texto sin formato HTML). Base de editores WYSIWYG. El contenido editado existe solo en el DOM del cliente — necesitas JavaScript para guardar cambios (ej. localStorage o una API).

Haz clic aquí y edita este texto directamente en el navegador.
draggable Interactivo

Atributo global que habilita la API nativa de Drag & Drop HTML5. Valores: true (arrastrable), false (no arrastrable), auto (comportamiento por defecto: solo texto e imágenes). Para una interacción completa, el elemento arrastrado maneja dragstart (guarda datos en dataTransfer) y el destino maneja dragover con preventDefault() y drop para recibir los datos.

La API de Drag & Drop nativa no es accesible por teclado. Para interfaces accesibles, implementa también atajos de teclado alternativos, o usa librerías como dnd-kit que incluyen accesibilidad integrada.

🔴 Arrástr.
🟢 Arrástr.
🔵 Arrástr.
Suelta aquí
spellcheck Interactivo

Atributo global que activa o desactiva la revisión ortográfica del navegador en campos de texto e elementos contenteditable. Valores: true (activo), false (desactivo). El valor por defecto depende del navegador y la configuración del usuario. Se hereda de elementos padre, por lo que establecerlo en <body spellcheck="false"> lo desactiva en toda la página.

Desactiva spellcheck en campos que contienen código, URLs, nombres de usuario o datos técnicos. El subrayado rojo en código o comandos genera confusión y puede activar auto-corrección inesperada en móviles.


hidden Visibilidad

Atributo global que oculta un elemento semánticamente: lo elimina del flujo visual y lo hace invisible para los lectores de pantalla. Es equivalente a display: none en términos visuales, pero comunica la intención al navegador y a las tecnologías asistivas. Un elemento hidden no puede recibir foco con Tab y no aparece en la búsqueda de texto del navegador. HTML 2022 añadió hidden="until-found", que permite búsqueda en el contenido oculto y lo expande al encontrarse.

Valores hiddenbooleanOculta completamente el elemento (visual + semántico) hidden="until-found"stringOculto pero accesible para la búsqueda en página (Ctrl+F); se expande al encontrarse

Si necesitas ocultar algo visualmente pero mantenerlo accesible para lectores de pantalla (como texto de ayuda), usa la clase CSS visually-hidden en vez del atributo hidden.

data-* Datos

Atributos personalizados para almacenar datos privados en elementos HTML, accesibles en JavaScript vía element.dataset. El nombre puede ser cualquier cadena válida en minúsculas después del prefijo data-. En JavaScript, los guiones se convierten en camelCase: data-user-id → element.dataset.userId. Son invisibles para el usuario pero inspeccionables en las DevTools, por lo que no deben contener información sensible.

Los atributos data-* también son accesibles en CSS: [data-estado="activo"] { background: green; } y content: attr(data-label) en pseudo-elementos. Esto permite comunicación CSS↔HTML sin JavaScript adicional.

aria-* Accesibilidad

Atributos para describir roles, estados y propiedades a tecnologías asistivas. Regla de oro: usa HTML semántico primero; añade ARIA solo cuando no existe un elemento nativo equivalente. Los atributos más comunes: aria-label (nombre accesible), aria-hidden="true" (ocultar de lectores), aria-live (anunciar cambios dinámicos), aria-expanded, aria-pressed, aria-selected.

ARIA Landmarks y Estados — Playground Accesibilidad

Los landmarks ARIA permiten que los lectores de pantalla ofrezcan navegación rápida entre regiones. Los elementos semánticos HTML5 los implementan automáticamente. Experimenta con los estados ARIA interactivos.

HTML5 ↔ ARIA equivalencias:
<header>→ role="banner"
<nav>→ role="navigation"
<main>→ role="main"
<aside>→ role="complementary"
<footer>→ role="contentinfo"
<search>→ role="search"
<form>→ role="form"

Prefiere siempre el elemento HTML5 sobre role=

Estados ARIA — Haz clic para cambiar:
aria-hidden="false" — visible para tecnologías asistivas
(Clic para cambiar)
pointer-events CSS

Controla si un elemento responde a eventos de ratón/táctil. none hace el elemento "invisible" para el cursor sin ocultarlo visualmente.

/* Deshabilita interacción visual sin display:none */
.disabled { pointer-events: none; opacity: .5; }

/* Útil en overlays */
.overlay  { pointer-events: none; } /* click pasa a través */
.overlay.active { pointer-events: all; }

/* En SVG */
.svg-bg { pointer-events: none; } /* solo formas frontales son clickables */
touch-action Táctil

Controla qué gestos táctiles maneja el navegador vs. los que maneja tu JavaScript. Mejora la performance del scroll en móviles.

touch-action: auto          /* default: el browser decide */
touch-action: none          /* deshabilita todos los gestos */
touch-action: pan-x         /* solo scroll horizontal */
touch-action: pan-y         /* solo scroll vertical */
touch-action: pan-x pan-y   /* scroll en ambos ejes */
touch-action: pinch-zoom    /* solo pinch para zoom */
touch-action: manipulation  /* pan + pinch, sin doble-tap zoom */

/* Común en mapas / sliders personalizados */
.map     { touch-action: none; }
.slider  { touch-action: pan-y; } /* scroll vertical libre */
Navegación por teclado Accesibilidad

Una web accesible debe ser completamente navegable por teclado. Patrones esenciales para el manejo correcto del foco.

Tab → avanza entre elementos enfocables
Shift+Tab → retrocede
Enter/Space → activa botones/links
Esc → cierra modales/menús 
<!-- Skip link (primero en el body) -->
<a href="#main" class="skip-link">Saltar al contenido</a>

/* Skip link visible solo al enfocar */
.skip-link {
  position: absolute; top: -100px;
  transition: top .2s;
}
.skip-link:focus { top: 0; }
Custom Elements Web Components

Permite crear tus propias etiquetas HTML con comportamiento encapsulado. Base de los Web Components junto con Shadow DOM y HTML Templates.

// Definir el elemento
class MiBoton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <button style="background:var(--accent)">
        ${this.getAttribute('label') || 'Click'}
      </button>`;
  }
}
customElements.define('mi-boton', MiBoton);

// Uso en HTML
<mi-boton label="Enviar"></mi-boton>

// Extiende elemento existente
class MiInput extends HTMLInputElement { ... }
customElements.define('mi-input', MiInput,
  { extends: 'input' });