0Pricing
HTML Academy · Lección

aria-selected y patrones de pestañas

Implemente interfaces de pestañas accesibles mediante el teclado

aria-selected y patrones de pestañas es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Descripción general del patrón de pestañas

Una interfaz de pestañas tiene tres componentes ARIA:

  • role="tablist" — contenedor de todas las pestañas
  • role="tab" — botón de cada pestaña
  • role="tabpanel" — panel de contenido de cada pestaña

Estructura ARIA de las pestañas

Marcado completo de pestañas accesibles:

<div role="tablist" aria-label="Account Settings">
  <button role="tab" id="tab-1" aria-selected="true"
          aria-controls="panel-1">Profile</button>
  <button role="tab" id="tab-2" aria-selected="false"
          aria-controls="panel-2" tabindex="-1">Security</button>
  <button role="tab" id="tab-3" aria-selected="false"
          aria-controls="panel-3" tabindex="-1">Notifications</button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Profile content...
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Security content...
</div>

aria-selected

aria-selected indica el elemento activo en ese momento dentro de un contexto de selección:

<!-- In a tablist: -->
<button role="tab" aria-selected="true">Active Tab</button>
<button role="tab" aria-selected="false">Other Tab</button>

<!-- In a listbox: -->
<ul role="listbox">
  <li role="option" aria-selected="false">Option 1</li>
  <li role="option" aria-selected="true">Option 2</li>
</ul>

Patrón de teclado para pestañas

Los patrones ARIA definen un comportamiento de teclado específico para las pestañas:

  • Tab — mueve el foco a la pestaña seleccionada dentro de la lista de pestañas
  • Teclas de flecha — permiten recorrer las pestañas
  • Tab de nuevo — mueve el foco fuera de la lista de pestañas, al panel activo
  • Home — primera pestaña
  • End — última pestaña

Implementación del teclado para pestañas

Navegación mediante el teclado para pestañas usando las teclas de flecha:

const tabs = document.querySelectorAll('[role="tab"]');

tabs.forEach((tab, i) => {
  tab.addEventListener('keydown', (e) => {
    let target;
    if (e.key === 'ArrowRight') target = tabs[(i + 1) % tabs.length];
    if (e.key === 'ArrowLeft') target = tabs[(i - 1 + tabs.length) % tabs.length];
    if (e.key === 'Home') target = tabs[0];
    if (e.key === 'End') target = tabs[tabs.length - 1];

    if (target) {
      activateTab(target);
      target.focus();
    }
  });
});

Función activateTab

Función para cambiar de pestaña y actualizar ARIA:

function activateTab(selectedTab) {
  // Deactivate all tabs:
  document.querySelectorAll('[role="tab"]').forEach(tab => {
    tab.setAttribute('aria-selected', 'false');
    tab.setAttribute('tabindex', '-1');
    document.getElementById(tab.getAttribute('aria-controls')).hidden = true;
  });

  // Activate selected tab:
  selectedTab.setAttribute('aria-selected', 'true');
  selectedTab.setAttribute('tabindex', '0');
  document.getElementById(selectedTab.getAttribute('aria-controls')).hidden = false;
}

Patrón de roving tabindex

Los grupos de pestañas utilizan roving tabindex para mantener una sola pestaña en el orden de tabulación:

<!-- Only the selected tab has tabindex=0 -->
<button role="tab" aria-selected="true" tabindex="0">Active</button>
<button role="tab" aria-selected="false" tabindex="-1">Other</button>
<button role="tab" aria-selected="false" tabindex="-1">Another</button>

<!-- When user arrows to a new tab:
     1. Set new tab tabindex=0
     2. Set old tab tabindex=-1
     3. Focus new tab -->

aria-selected frente a aria-checked

aria-selected frente a aria-checked: contextos diferentes:

  • aria-selected — se utiliza en controles de selección: pestañas, opciones de listbox y elementos de tree
  • aria-checked — se utiliza en elementos seleccionables: casillas de verificación y elementos de menú con marca de verificación

Foco del panel de pestañas

Cuando se activa una pestaña, el panel se hace visible, pero el foco permanece en la pestaña:

// Users can then Tab to move into the panel content
// The panel should not automatically receive focus

// Exception: if the panel is very long, consider moving focus
// to the panel heading for long-form content tabs

// Panel should have tabindex=-1 for programmatic focus:
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="-1">

Activación automática frente a manual

Dos modelos de activación de pestañas:

  • Automática — las pestañas se activan mientras el usuario se desplaza por ellas con las teclas de flecha (experiencia de usuario más sencilla)
  • Manual — el usuario debe pulsar Enter/Space para activar la pestaña después de desplazarse con las teclas de flecha (mejor cuando es necesario cargar el contenido de la pestaña)

Estilos accesibles para pestañas

CSS para el estado seleccionado de una pestaña accesible:

[role="tab"] {
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

[role="tab"][aria-selected="true"] {
  border-bottom-color: #0070f3;
  font-weight: bold;
}

/* :focus-visible for keyboard users: */
[role="tab"]:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: -2px;
}

Comprobación rápida

¿Cómo debe funcionar la navegación mediante el teclado dentro de una lista de pestañas?

Resumen: aria-selected y pestañas

Aspectos esenciales del patrón de pestañas:

  • tablist → tab (aria-selected) → tabpanel (aria-labelledby)
  • Las teclas de flecha permiten desplazarse entre las pestañas; Tab entra en el panel
  • Roving tabindex: solo la pestaña activa tiene tabindex=0
  • aria-selected="true" en la pestaña activa
  • Los paneles inactivos utilizan el atributo hidden

Preguntas frecuentes

¿La lección «aria-selected y patrones de pestañas» es gratis?

Sí — el texto completo de «aria-selected y patrones de pestañas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «aria-selected y patrones de pestañas»?

Implemente interfaces de pestañas accesibles mediante el teclado Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «aria-selected y patrones de pestañas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. aria-expanded y aria-controls para controles desplegables
  2. aria-selected y patrones de pestañas
  3. Regiones dinámicas: aria-live, aria-atomic y aria-relevant
  4. Pruebas con lectores de pantalla
← Volver a HTML Academy