Rol Estructura del documento

`separator`

Marca un elemento como divisor entre secciones de contenido o elementos de un widget compuesto. Se recomienda usar <hr> para las separaciones temáticas en el texto continuo; solo se debe recurrir a role="separator" para separar elementos dentro de un menú, una barra de herramientas u otro widget.

Cuándo se debe usar

Para una separación temática entre secciones de texto continuo, conviene usar <hr>. El elemento nativo es anunciado como separador por los lectores de pantalla.

role="separator" en un elemento que no es <hr> resulta apropiado dentro de widgets compuestos:

Entre grupos de elementos de menú dentro de un role="menu" o role="menubar".
Entre grupos de controles dentro de un role="toolbar".
Como controlador de redimensionado en un diseño de paneles divididos (la variante enfocable y «con valor» — véase más abajo).

Existen dos variantes de separator:

Estático — no es enfocable ni interactivo. Es un divisor puramente visual y semántico. Es el comportamiento por defecto.
Enfocable — tabindex="0", se usa como controlador de arrastre (p. ej., entre dos paneles). Admite aria-valuenow, aria-valuemin, aria-valuemax para exponer su posición y responde a las teclas de flecha para desplazarse.

Se debe establecer aria-orientation="vertical" para los separadores verticales en barras de herramientas horizontales; el valor horizontal es el predeterminado.

Errores frecuentes

role="separator" con tabindex="0" pero sin controlador de teclado. Los usuarios se desplazan con el foco hasta un elemento que no pueden operar.
El separador enfocable carece de aria-valuenow. Los lectores de pantalla no pueden anunciar la posición de la división.
Usar <hr> para líneas puramente decorativas. Si solo se trata de un borde CSS, conviene prescindir del <hr> y aplicar el estilo mediante border-top.
Múltiples separadores en un menú sin una razón de agrupación lógica — genera desorden visual.
Un separador vertical en una barra de herramientas horizontal sin aria-orientation="vertical".

Ejemplo

<!-- Separador estático dentro de un menú -->
<ul role="menu" aria-label="File">
  <li role="menuitem" tabindex="0">New</li>
  <li role="menuitem" tabindex="-1">Open</li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Save</li>
</ul>

<!-- Separador enfocable (controlador de redimensionado) -->
<div
  role="separator"
  tabindex="0"
  aria-orientation="vertical"
  aria-valuenow="40"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Resize panels"
></div>