Principio 1/1.3 Adaptable/1.3.1-O

De WCAG Wiki

1.3.1-O. Agrupar opciones

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • En los elementos select donde haya diferentes grupos de opciones relacionadas entre sí, dichas opciones se deben agrupar mediante el elemento <optgroup>.

Comprensión del criterio

Descripción resumida

Si dentro de un menú desplegable hay opciones que pertenecen a categorías comunes, estas deben agruparse programáticamente usando <optgroup>, para que las tecnologías de apoyo puedan anunciar y estructurar correctamente el contenido.

Objetivo

Asegurar que la relación entre grupos de opciones de un menú desplegable pueda ser comprendida por software y transmitida a usuarios, especialmente mediante lectores de pantalla.

Importancia de cumplir el criterio

Sin <optgroup>, los usuarios de lectores de pantalla no reciben información de contexto sobre la agrupación de opciones, lo que aumenta la dificultad de encontrar y seleccionar elementos relacionados dentro de un selector con muchas opciones.

Referencias WCAG

  • H85: Using OPTGROUP to group OPTION elements inside a SELECT

Recursos de apoyo

  • Usar <optgroup> para organizar opciones en listas desplegables complejas
  • Asegurar títulos claros y concisos para cada <optgroup>

Evaluación del criterio

Tipo de evaluación

Procedimiento de evaluación

  1. Localizar selectores con múltiples opciones
  2. Identificar si existen grupos lógicos de opciones
  3. Verificar el uso correcto de <optgroup>

Resultado esperado

Las opciones relacionadas dentro de un elemento <select> están agrupadas programáticamente usando <optgroup>.

Ejemplo

Ejemplo correcto:
<select>
 <optgroup label="Europa">
   <option>España</option>
   <option>Francia</option>
 </optgroup>
 <optgroup label="Asia">
   <option>Japón</option>
   <option>India</option>
 </optgroup>
</select>

Ejemplo incorrecto:

<select>
 <option>España</option>
 <option>Francia</option>
 <option>Japón</option>
 <option>India</option>
</select>

Otras herramientas de evaluación

  • Inspección del navegador
  • Lectores de pantalla










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-O. Agrupar opciones

Loading comments...