Principio 1/1.3 Adaptable/1.3.1-O

1.3.1-O. Agrupar opciones

1_Perceptible 1.3_Adaptable

• 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

Consejos

• 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 Manual

Procedimiento de evaluación

1. Paso 1. Localizar los formularios existentes en la página que tienen elementos <select> con diferentes opciones relacionadas entre sí.
2. Paso 2. Usando la herramienta de inspección de código del navegador, verificar que las opciones se agrupan mediante <optgroup>.

Resultado esperado

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

Ejemplo

Se muestra un código con <select> que permite incluir la selección y <optgroup> que muestra la lista de opciones del mismo tipo

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

Otras herramientas de evaluación

• Inspección del navegador: comprobar el código fuente en formularios complejos, si hay <select> y <optgroup>
• Lector de pantalla: (NVDA, JAWS, VoiceOver) Comprobar si al acceder a un formulario complejo, se indican las opciones agrupadas.

Comentarios

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

Loading comments...