option

Cuándo utilizarlo

Se debe usar <option> dentro de <select>. El elemento nativo incorpora todo el comportamiento de forma nativa.

role="option" es para elementos dentro de un role="listbox" personalizado — típicamente el menú emergente de un combobox o un selector de selección múltiple que no puede estilizarse con elementos nativos. Cada elemento option DEBE tener un id único para que el combobox o listbox padre pueda referenciarlo a través de aria-activedescendant.

Si la opción representa una elección tipo casilla de verificación en un listbox de selección múltiple, se debe establecer aria-selected="true". El atributo aria-checked solo se debe usar en el patrón excepcional de opción con marca de verificación (la mayoría de los listbox de selección múltiple usan aria-selected).

Errores frecuentes

• role="option" fuera de un elemento padre role="listbox". El lector de pantalla anuncia una opción huérfana sin contexto de grupo.
• id ausente en una opción que debe ser el destino de aria-activedescendant — el combobox no puede apuntar a ella.
• Alternar una clase CSS .selected sin actualizar aria-selected. El árbol visual y el árbol de accesibilidad quedan en conflicto.
• aria-selected="false" en todas las opciones de un listbox de selección única donde una debería ser la opción por defecto. Se debe establecer aria-selected="true" en una de ellas.
• Opciones que son a su vez botones o enlaces (<a role="option">). La semántica de option reemplaza a la semántica de enlace en la tecnología de apoyo, pero el comportamiento al hacer clic se mantiene, lo que resulta confuso.

Ejemplo

<label id="lang">Language</label>
<ul
  role="listbox"
  aria-labelledby="lang"
  tabindex="0"
  aria-activedescendant="lang-2"
>
  <li id="lang-1" role="option" aria-selected="false">English</li>
  <li id="lang-2" role="option" aria-selected="true">Spanish</li>
  <li id="lang-3" role="option" aria-selected="false">French</li>
</ul>