toolbar

Cuándo utilizarlo

Cuando se disponga de una fila (o columna) de tres o más controles relacionados — una barra de formato de un editor de texto, la fila de iconos sobre un campo de chat, acciones de edición fotográfica. La ventaja es la eficiencia de teclado: en lugar de que cada botón sea un punto de tabulación independiente, la barra ocupa un único punto de tabulación y expone sus elementos mediante las teclas de flecha.

Una barra de herramientas DEBE tener un nombre accesible (aria-label o aria-labelledby). La orientación predeterminada es horizontal; establezca aria-orientation="vertical" para una barra vertical.

Los elementos hijos suelen ser botones (<button>), con role="separator" entre grupos lógicos. Las barras de herramientas PUEDEN contener botones, botones de alternancia, enlaces, menubuttons y otros controles pequeños — pero no formularios completos ni widgets de lista.

Contrato de teclado y foco

Según el patrón de toolbar de la APG:

• Tab lleva el foco a la barra de herramientas, situándolo en el primer control o en el último que tuvo el foco; Tab vuelve a salir.
• Las flechas Derecha/Izquierda (Arriba/Abajo si es vertical) se desplazan entre los elementos de la barra.
• Inicio / Fin saltan al primero / último elemento.
• Cada botón individual sigue activándose con Enter o Espacio — su contrato de activación no cambia por el rol de la barra.

Use un tabindex itinerante (roving tabindex): solo un elemento de la barra tendrá tabindex="0" en cada momento.

Errores frecuentes

• Todos los botones de la barra con tabindex="0". Esto anula por completo el propósito — Tab recorrerá igualmente cada botón.
• Barra de herramientas sin nombre accesible.
• Botones de la barra sin etiqueta porque el contenido visual es solo un icono. Añada aria-label a cada uno.
• Confundir la barra de herramientas con la semántica de role="group". Debe elegirse uno: toolbar implica navegación con teclas de flecha, group no.
• role="toolbar" sobre un elemento <nav>. Los roles son incompatibles — utilice uno u otro.

Ejemplo

<div role="toolbar" aria-label="Formato de texto">
  <button type="button" tabindex="0"  aria-pressed="false" aria-label="Negrita">B</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="Cursiva">I</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="Subrayado">U</button>
  <span role="separator" aria-orientation="vertical"></span>
  <button type="button" tabindex="-1" aria-label="Insertar enlace">Enlace</button>
</div>