Principio 1/1.3 Adaptable/1.3.1-O
De WCAG Wiki
< Principio 1 | 1.3 Adaptable
1.3.1-O. Agrupar opciones
- Nivel: A
- Versión: 2.0
- Principio: 1_Perceptible
- Pauta: 1.3_Adaptable
- Grupo: Formulario
- Subgrupo: Agrupación de opciones
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera leve
-
Sordoceguera –
Barrera leve
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
Evaluación Comprobación manual
Procedimiento de evaluación
- Localizar selectores con múltiples opciones
- Identificar si existen grupos lógicos de opciones
- 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...
