Estado Estado del control

`aria-selected`

Indica que un elemento dentro de un contenedor de selección simple o múltiple está actualmente seleccionado. Se utiliza en los roles tab, option, gridcell, treeitem y similares. Se distingue de aria-checked (casilla de verificación/botón de opción) y de aria-pressed (botón alternante).

Cuándo utilizarlo

En elementos que pertenecen a un contenedor con un modelo de selección:

role="tab" dentro de un tablist (exactamente uno seleccionado).
role="option" dentro de un listbox (uno o varios, según aria-multiselectable).
role="treeitem" dentro de un tree.
role="gridcell", role="row", role="columnheader", role="rowheader" dentro de un grid.

El estado describe la relación entre el elemento y la selección del contenedor, no un estado independiente de activado/desactivado como una casilla de verificación. Debe elegirse el estado correcto según el patrón:

aria-selected — elementos en un contexto de pestaña, opción, árbol o cuadrícula.
aria-checked — casillas de verificación y botones de opción (elecciones independientes).
aria-pressed — botones alternantes (el propio botón está activado o desactivado).

Un error habitual es colocar aria-selected="true" en un <button> para indicar «el usuario hizo clic en mí por última vez». Si el elemento no forma parte de un widget tipo selección, deben usarse aria-pressed o aria-current.

Cómo mantenerlo sincronizado

Los valores válidos son "true" y "false". Conviene representar "false" en los elementos no seleccionados en lugar de omitir el atributo: así la tecnología de apoyo anuncia correctamente información de posición del tipo «1 de 5». En un widget de selección simple (tablist, listbox de selección simple), exactamente un elemento debe tener el valor "true" en cada momento.

El atributo debe cambiar al mismo tiempo que el indicador visual y que la gestión del foco. En un tablist, desplazar la selección normalmente también mueve tabindex="0" a la pestaña seleccionada y tabindex="-1" al resto.

Errores frecuentes

Usar aria-selected en un botón o enlace fuera de cualquier contenedor tipo selección.
Varios elementos con aria-selected="true" en un tablist o listbox de selección simple.
Olvidar establecer aria-selected="false" en el elemento previamente seleccionado al mover la selección.
Aplicar una apariencia de «seleccionado» mediante CSS sin modificar el atributo.
Confundir aria-selected con aria-checked en opciones de listbox (siempre selected) o con aria-current en un enlace de navegación (current, no selected).
Establecer aria-selected en role="menuitem" — los elementos de menú no lo admiten; debe usarse aria-checked para casillas de verificación o botones de opción en menús.

Ejemplo

<div role="tablist" aria-label="Secciones">
  <button role="tab" id="tab-1" aria-selected="true"  tabindex="0"  aria-controls="panel-1">Resumen</button>
  <button role="tab" id="tab-2" aria-selected="false" tabindex="-1" aria-controls="panel-2">Detalles</button>
  <button role="tab" id="tab-3" aria-selected="false" tabindex="-1" aria-controls="panel-3">Reseñas</button>
</div>